单击“添加到列表”后，我想上传图像并显示在表格中。
我使用以下方法在HTML表格的客户端插入数据：
imageFile =$("#imageFile").val()
但它只显示一个链接，但我想显示图像。
jQuery的
$("#addToList").click(function (e) {
e.preventDefault();
var Srno = document.getElementById("detailsTable").rows.length,
imageFile =$("#imageFile").val()
detailsTableBody = $("#detailsTable tbody");
var Qt = '<tr><td>' + Srno + '</td><td>' + imageFile + '</td><td><a
data-itemId="0" href="#" class="deleteItem">Remove</a></td></tr>';
detailsTableBody.append(Qt);
clearItem();
});
Save Function
$("#saveQuotation").click(function (e) {
e.preventDefault();
var QuotationArr = [];
QuotationArr.length = 0;
$.each($("#detailsTable tbody tr"), function () {
QuotationArr.push({
Srno: $(this).find('td:eq(0)').html(),
imageFile: $(this).find('td:eq(2)').html(),
});
});
function saveQuotation(data) {
return $.ajax({
contentType: 'application/json; charset=utf-8',
dataType: 'json',
type: 'POST',
url: "/Home/mQuotationInsert",
data: data,
success: function (result) {
alert(result);
location.reload();
},
error: function () {
alert("Error!")
}
});
}
var data = JSON.stringify({
Quot: QuotationArr
AddNew: $("#AddNew").val()
});
$.when(saveQuotation(data)).then(function (response) {
console.log(response);
}).fail(function (err) {
console.log(err);
});
上传时预览图像
function ShowImagePreview(ImageUploder, previewImage)
{
if (ImageUploder.files && ImageUploder.files[0])
{
var reader = new FileReader();
reader.onload = function (e) {
$(previewImage).attr('src', e.target.result);
}
reader.readAsDataURL(ImageUploder.files[0]);
}
}
模型
public string imagePath { get; set; }
[NotMapped]
public HttpPostedFileBase imageFile { get;set; }
的HTML
<div class="col">
<label for="lblPartyName">Image File</label>
<div class="row">
<div class="col-4">
<input type="file" name="imageFile" accept="image/jpeg, image/png" onchange="ShowImagePreview(this,document.getElementById('ImagePreview'))" />
</div>
<div class="col-4" style="margin-left:30%; ">
<img alt="image" src="~/AppFiles/Images/Default.png" height="50" width="50" style="margin-top:-15%" id="ImagePreview">
</div>
</div>
</div>
C＃
[HttpPost]
public ActionResult mQuotationInsert(Quotation[] Quot, string AddNew)
{
string result = "Error! Order Is Not Complete!";
try
{
objQuotation.QuotationInsert(Quot, AddNew);
ModelState.Clear();
result = "Quotation Inserted Successfully!";
return Json(result, JsonRequestBehavior.AllowGet);
}
catch (Exception)
{
throw;
}
}
public int QuotationInsert(Quotation[] Quot, string AddNew)
{
try
{
con.Open();
tr = con.BeginTransaction();
if(Quot !=null)
{
for (int i = 0; i < Quot.Length; i++)
{
try
{
string fileName = Path.GetFileNameWithoutExtension(Quot[i].imageFile.FileName);
string extension = Path.GetExtension(Quot[i].imageFile.FileName);
fileName = fileName + DateTime.Now.ToString("dd/MM/yyyy") + extension;
Quot[i].imagePath = "~/AppFiles/Images/" + fileName;
fileName = Path.Combine(HttpContext.Current.Server.MapPath("~/AppFiles/Images/"), fileName);
Quot[i].imageFile.SaveAs(fileName);
cmd = new SqlCommand("Sp_QuotationDetailInsert", con);
cmd.CommandType = CommandType.StoredProcedure;
if (Quot[i].imagePath != null)
cmd.Parameters.AddWithValue("@Image",fileName);
cmd.Transaction = tr;
cmd.ExecuteNonQuery();
}
catch (Exception)
{
throw;
}
}
}
tr.Commit();
return i;
}
catch (SqlException sqlex)
{
tr.Rollback();
throw sqlex; // read all sql error
}
catch (Exception ex)
{
tr.Rollback();
throw ex; // General execption
}
finally
{
con.Close();
}
参考方案
代替imageFile =$("#imageFile").val()尝试使用imageFile = $('<div>').append($('#ImagePreview').clone()).html()
我看过几篇有关使整个div可点击的文章，但我希望使其成为可选择的。我所拥有的是一个php while循环，该循环显示基于用户进入mySQL数据库的表。该代码如下所示： <div class='tracksub'> <div class='headname'><div class='…
当<form>'.submit'函数被覆盖时(使用Ajax)将数据获取到php吗？ - javascript我已覆盖此网页上表单的.submit函数，因为该网页已加载在“ index.php”中的#mainContent内，并且我希望“提交”按钮仅替换此#mainContent。我正在尝试将数据从此表单获取到.php文件，以便对数据库进行查询（或简单地回显已填充的变量，以指示已传递数据）。我是AJAX的新手。有人可以向我解释如何将数据传递到.php文件，或者指向要…
使用php重新加载内容 - javascript在对网站进行编程时，我以前使用过此代码，它可以完美工作，但是现在当我想使用一些Flash部件时，每次单击链接时，它都会重新加载所有网站。源代码： <!DOCTYPE html> <html> <head> <title>Hot King Staff</title> <meta charset=…
用jQuery填充模式形式 - javascript我正在将订单表从数据库绘制到datatables（jquery插件）中。我要在每笔最后一笔交易或每笔交易中增加付款。问题是，如何获取单击添加付款按钮以添加付款的行的订单ID。其次，当点击addpayment时，它会弹出一个带有字段或订单号的模态表单。我想用在td中找到的订单ID填充该字段，并使其不可编辑或隐藏，但在提交模态表单时将其发布到服务器。表格和模式表…
保留文本区域的数据或值，然后选择输入 - javascript通过$ _POST提交表单时，输入文件值仍然保留。像这样： if($_POST){ $error = false; if(!$post['price']){ $error = true; $error_note['price'] = "*Should not be empty"; } if($err…