我有一个部分视图，可以在上传后查看图像，如下所示：
@model IEnumerable<WebApplication1.Model.Image>
@using MvcApplication1.Models
<div id="divImages">
<input type="file" id="FileUpload" multiple />
<input type="submit" id="Upload" value="Upload" />
<table class="table" id="tble">
<tr>
<th>
@Html.DisplayNameFor(model => model.cover)
</th>
<th>
@Html.DisplayNameFor(model => model.Product.type)
<th></th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.cover)
</td>
<td>
@Html.Image("/Images/" + item.id_product + "/" + item.id_image + ".jpg", "Image", "50")
</td>
<td>
@Html.ActionLink("Delete", "Delete", new { id = item.id_image })
</td>
</tr>
}
</table>
</div>
和ajax如下：
<script>
$(document).ready(function () {
$("#Upload").click(function () {
var formData = new FormData($('form').get(0));
var totalFiles = document.getElementById("FileUpload").files.length;
for (var i = 0; i < totalFiles; i++)
{
var file = document.getElementById("FileUpload").files[i];
formData.append("FileUpload", file);
}
formData.append("Model", @Model.Take(1).Single().id_product);
$.ajax({
type: "POST",
url: '/Products/Upload',
data: formData,
//dataType: 'json',
contentType: false,
processData: false,
success: function (response) {
alert('succes!!');
$.get('@Url.Action("All", "Products")', { id: @Model.Take(1).Single().id_product }, function (data) {
$("#divImages").html(data);
});
},
error: function (error) {
alert("errror");
}
});
});
});
</script>
在警告用户成功上传后，您可以看到部分视图已更新。
这是我的Upload()功能：
public ActionResult Upload(int model)
{
for (int i = 0; i < Request.Files.Count; i++)
{
Image p = new Image();
p.cover = true;
p.id_product = model;
db.Images.Add(p);
db.SaveChanges();
var ims = db.Images.OrderByDescending(x => x.id_image).Take(1).Single();
var file = Request.Files[i];
var fileName = ims.id_image.ToString() + ".jpg"; //Path.GetFileName(file.FileName);
var path = Server.MapPath("~/Images/"+model.ToString()+"/");
if(this.CreateFolderIfNeeded(path))
file.SaveAs(path + fileName);
}
return RedirectToAction("All", new { id = model });
}
最后，我的All()函数：
public PartialViewResult All(int id)
{
List<Image> model = db.Images.Where(x => x.id_product == id).ToList();
if (model.Count() == 0)
{
Image i = new Image();
i.id_product = id;
List<Image> li = new List<Image>();
li.Add(i);
return PartialView("_File", li);
}
else
return PartialView("_File", model);
}
这是我的Image型号：
namespace WebApplication1.Model
{
using System;
using System.Collections.Generic;
public partial class Image
{
public int id_image { get; set; }
public int id_product { get; set; }
public bool cover { get; set; }
public virtual Product Product { get; set; }
}
}
和编辑视图：
@model WebApplication1.Model.Product
@using MvcApplication1.Models
@{
ViewBag.Title = "Edit";
}
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="jquery.fileupload.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<body>
<h2>Edit</h2>
<br />
<br />
<div class="form-horizontal">
<div id="tabs">
<ul>
<li>
<a href="#fragment-1"><span>Information</span></a>
</li>
<li>
<a href="#fragment-2"><span>Prices</span></a>
</li>
<li>
<a href="#fragment-3"><span>SEO</span></a>
</li>
<li>
<a href="#fragment-4"><span>Associations</span></a>
</li>
<li>
<a href="#fragment-5"><span>Images</span></a>
</li>
</ul>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.HiddenFor(model => model.id_product)
<div id="fragment-1">
</div>
<div id="fragment-2">
</div>
<div id="fragment-3">
</div>
<div id="fragment-4">
</div>
<div id="fragment-5">
@{ Html.RenderAction("All", "Products", new { id = Model.id_product }); }
</div>
</div>
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.js"></script>
<script>
$("#tabs").tabs();
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#fileupload').fileupload({
dataType: 'json',
url: '/Products/UploadFiles',
autoUpload: true,
done: function (e, data) {
$('.file_name').html(data.result.name);
$('.file_type').html(data.result.type);
$('.file_size').html(data.result.size);
}
}).on('fileuploadprogressall', function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('.progress .progress-bar').css('width', progress + '%');
});
});
</script>
</body>
现在，一切都运行良好，即上传和刷新部分视图。除非成功上传后，当我想上传其他图片时，上传按钮无法正常工作。
我希望有些人知道原因。
答案 0 :(得分：0)
从主视图中删除以下部分后问题已解决。斯蒂芬·穆克（Stephen Muecke）。
<script type="text/javascript">
$(document).ready(function () {
$('#fileupload').fileupload({
dataType: 'json',
url: '/Products/UploadFiles',
autoUpload: true,
done: function (e, data) {
$('.file_name').html(data.result.name);
$('.file_type').html(data.result.type);
$('.file_size').html(data.result.size);
}
}).on('fileuploadprogressall', function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('.progress .progress-bar').css('width', progress + '%');
});
});
</script>