我在视图中使用了jQuery File Upload
。但是当上传文件时,我得到这样的错误(清空文件上传结果):
行动
[HttpPost]
public virtual ActionResult UploadImage(IList<HttpPostedFileBase> files)
{
var lstUploadReults = new List<UploadFileResult>(files.Count);
foreach (var file in files)
{
if (file.ContentLength <= 0) continue;
var guid = Guid.NewGuid();
var fileExtension = Path.GetExtension(file.FileName);
var fileName = $"{guid}{fileExtension}";
var path = Server.MapPath(TmpPath) + fileName;
file.SaveAs(path);
var thumbnailFileName = $"{guid}-thumb{fileExtension}";
var fileSize = file.ContentLength;
GenerateProductThumbnailImage(file.InputStream, Server.MapPath(TmpPath) + thumbnailFileName);
lstUploadReults.Add(new UploadFileResult
{
Url = Url.Content(TmpPath + fileName),
Name = file.FileName,
DeleteType = "Post",
DeleteUrl = Url.Action(MVC.baseadmin.Upload.ActionNames.DeleteFile, MVC.baseadmin.Upload.Name, new { fileName }),
Size = fileSize,
ThumbnailUrl = Url.Content(TmpPath + thumbnailFileName),
Type = file.ContentType
});
}
return Json(new { Files = lstUploadReults.ToArray() });
}
查看
@using Newtonsoft.Json
@using Newtonsoft.Json.Serialization
@model Model.Adminmodal.Product.AddPicture
<style>
.ui-state-highlight {
height: 100px;
background-color: #ccc !important;
}
#tblProductImages td {
text-align: center;
vertical-align: middle;
}
#tblProductImages .size {
direction: ltr;
unicode-bidi: bidi-override;
text-align: center;
}
#tblProductImages .name {
direction: ltr;
unicode-bidi: bidi-override;
text-align: center;
}
.ui-sortable-helper {
display: table !important;
background-color: white;
}
div.editable-input input {
direction: ltr;
text-align: center;
}
</style>
<div id="productImageTab">
<div id="fileupload">
<div class="row fileupload-buttonbar">
<div class="col-lg-7">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>انتخاب تصاویر...</span>
<input type="file" name="files" multiple>
</span>
<button type="submit" class="btn btn-primary start">
<i class="glyphicon glyphicon-upload"></i>
<span>شروع آپلود</span>
</button>
<button type="reset" class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>لغو آپلود</span>
</button>
<button type="button" class="btn btn-danger delete">
<i class="glyphicon glyphicon-trash"></i>
<span>حذف</span>
</button>
<input type="checkbox" class="toggle">
<!-- The global file processing state -->
<span class="fileupload-process"></span>
</div>
<!-- The global progress state -->
<div class="col-lg-5 fileupload-progress fade">
<!-- The global progress bar -->
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-success" style="width: 0;"></div>
</div>
<!-- The extended global progress state -->
<div class="progress-extended"> </div>
</div>
</div>
<!-- The table listing the files available for upload/download -->
<table id="tblProductImages" role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
</div>
@*@if (Model.Images != null && Model.Images.Any())
{
<input id="productImagesData" type="hidden" value="@JsonConvert.SerializeObject(Model.Images, new JsonSerializerSettings()
{
ContractResolver = new CamelCasePropertyNamesContractResolver(),
})" />
}*@
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-upload fade">
<td>
<p class="preview"></p>
</td>
<td>
<p class="name">{%=file.name%}</p>
<strong class="error text-danger"></strong>
</td>
<td>
<p class="size">Processing...</p>
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
</td>
<td>
{% if (!i && !o.options.autoUpload) { %}
<button class="btn btn-primary start" disabled>
<i class="glyphicon glyphicon-upload"></i>
<span>شروع کن</span>
</button>
{% } %}
{% if (!i) { %}
<button class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>بیخیال شو</span>
</button>
{% } %}
</td>
</tr>
{% } %}
</script>
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-download fade">
<td style="display:none !important;">
@Html.Hidden("Images.Index", "{%= file.name %}")
@Html.Hidden("Images[{%= file.name %}].Id", "{%= file.id %}")
@Html.Hidden("Images[{%= file.name %}].Name", "{%= file.name %}")
@Html.Hidden("Images[{%= file.name %}].Order", "{%= file.order %}")
@Html.Hidden("Images[{%= file.name %}].ThumbnailUrl", "{%= file.thumbnailUrl %}")
@Html.Hidden("Images[{%= file.name %}].Url", "{%= file.url %}")
@Html.Hidden("Images[{%= file.name %}].Size", "{%= file.size %}")
@Html.Hidden("Images[{%= file.name %}].DeleteUrl", "{%= file.deleteUrl %}")
@Html.Hidden("Images[{%= file.name %}].ProductId", Model.ProductId)
</td>
<td>
<span class="preview">
{% if (file.thumbnailUrl) { %}
<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
{% } %}
</span>
</td>
<td>
<p class="name">
{% if (file.url) { %}
<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
{% } else { %}
<span>{%=file.name%}</span>
{% } %}
</p>
{% if (file.error) { %}
<div><span class="label label-danger">Error</span> {%=file.error%}</div>
{% } %}
</td>
<td>
<span class="size">{%=o.formatFileSize(file.size)%}</span>
</td>
<td>
{% if (file.deleteUrl) { %}
<button class="btn btn-danger delete" data-type="Post" data-url="{%=file.deleteUrl%}" {% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}' {% } %}>
<i class="glyphicon glyphicon-trash"></i>
<span>حذف</span>
</button>
<input type="checkbox" name="delete" value="1" class="toggle">
{% } else { %}
<button class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>بیخیال4</span>
</button>
{% } %}
</td>
</tr>
{% } %}
</script>
<a href="@Url.Action(MVC.baseadmin.Product.ActionNames.Index, MVC.baseadmin.Product.Name)" class="btn azm-social azm-btn azm-border-bottom azm-facebook" id="btncreate" style="border:solid 1px #ffffff">
بازگشت
<i class="fa fa-plus-circle"></i>
</a>
</div>
<link href="~/Content/bootstrap-editable/bootstrap-editable.css" rel="stylesheet" />
<link href="~/Content/select2.css" rel="stylesheet" />
<link href="~/Scripts/jQuery-File-Upload/css/jquery.fileupload.css" rel="stylesheet" />
<link rel="stylesheet" href="//blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
<script src="~/Scripts/jquery2-min.js"></script>
<script src="~/Scripts/jQuery-File-Upload/js/vendor/jquery.ui.widget.js"></script>
<script type="text/javascript" src="~/Scripts/jQuery-File-Upload/js/vendor/tmpl.min.js"></script>
<script type="text/javascript" src="~/Scripts/jQuery-File-Upload/js/vendor/load-image.all.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="~/Scripts/jQuery-File-Upload/js/vendor/canvas-to-blob.min.js"></script>
<script src="~/Scripts/jQuery-File-Upload/js/jquery.iframe-transport.js"></script>
<script src="~/Scripts/jQuery-File-Upload/js/jquery.fileupload.js"></script>
<script src="~/Scripts/jQuery-File-Upload/js/jquery.fileupload-process.js"></script>
<script src="~/Scripts/jQuery-File-Upload/js/jquery.fileupload-image.js"></script>
<script src="~/Scripts/jQuery-File-Upload/js/jquery.fileupload-validate.js"></script>
<script src="~/Scripts/jQuery-File-Upload/js/jquery.fileupload-ui.js"></script>
<script src="//blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
@Scripts.Render("~/bundles/manage-product")
<script type="text/javascript">
var productId = parseInt('@Model.ProductId');
$("#productImageTab").imageTab({
fileUploadId: "fileupload",
uploadUrl: "@Url.Action(MVC.baseadmin.Upload.ActionNames.UploadImage, MVC.baseadmin.Upload.Name )",
tblFilesId: "tblProductImages",
uploadedFilesId: "productImagesData"
});
</script>
插件(imagetab.js)
(function () {
$.fn.imageTab = function (options) {
var defaults = {
fileUploadId: null,
uploadUrl: null,
tblFilesId: null,
uploadedFilesId: null
};
var settings = $.extend(defaults, options);
var $fileUpload = $("#" + settings.fileUploadId).fileupload({
url: settings.uploadUrl,
formData: function (form) {
return form.find("input[type='file']").serializeArray();
},
autoUpload: true,
maxFileSize: 99900000,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
});
$("#" + settings.tblFilesId + " tbody").sortable({
items: '> tr',
revert: true,
forcePlaceholderSize: true,
placeholder: 'ui-state-highlight',
cursor: "move",
start: function (event, ui) {
// Build a placeholder cell that spans all the cells in the row
var cellCount = 0;
$('td, th', ui.helper).each(function () {
// For each TD or TH try and get it's colspan attribute, and add that or 1 to the total
var colspan = 1;
var colspanAttr = $(this).attr('colspan');
if (colspanAttr > 1) {
colspan = colspanAttr;
}
cellCount += colspan;
});
// Add the placeholder UI - note that this is the item's content, so TD rather thanTR
ui.placeholder.html('<td colspan="' + cellCount + '"> </td>');
}
});
var imagesDataInput = $("input#" + settings.uploadedFilesId).val();
if (imagesDataInput != undefined) {
var imagesData = $.parseJSON(imagesDataInput);
$fileUpload.fileupload('option', 'done')
.call($fileUpload[0], $.Event('done'), { result: { files: imagesData } });
}
return this;
}
})();
如果有人可以解释这个问题的解决方案,那将非常有用。