我有一个ASP.NET MVC 3应用程序,需要能够将多个文件上传到服务器。
Jquery是否可以选择将文件异步发送到操作方法并将其保存在文件夹和会话变量中?
由于我在许多视图中使用此组件,我应该遵循PRG模式,还是使用JQuery异步上传文件?
答案 0 :(得分:2)
使用Jquery文件上传插件。
我通常使用plupload。
我的样本使用PlUpload:
在视图中:
<div id="file-upload-continer">
<div id="btnInsertFile" style="display: inline-block; width: 100px; border: 1px solid gray;">Choose File</div>
</div>
<table class="file-upload-box">
<tr>
<th>Title</th><th></th><th></th>
</tr>
</table>
<script type="text/javascript">
$(function () {
var uploader = new plupload.Uploader({
url: '@Url.Action("Upload")',
multipart : true,
multipart_params: { },
runtimes: 'html5,html4',
container: 'file-upload-continer',
button_browse_hover : true,
browse_button: 'btnInsertFile'
});
uploader.bind('Init', function (up, params) {
$('.select-document, .file-upload-box').removeClass("hidden");
$('.upload-support').addClass("hidden");
});
uploader.init();
uploader.bind('FilesAdded', function (up, files) {
$.each(files, function (i, file) {
var newRow =
"<tr class='file-row' id='" + file.id + "'>" +
"<td class='title'>" + file.name + " (" + formatFileSize(file.size) + ") </td>" +
"<td class='cancel' id='cancel" + file.id + "'></td>" +
"<td class='status' id='cancel" + file.id + "'></td>" +
"</tr>";
$('.file-upload-box').append(newRow);
//Bind cancel click event
$('#cancel'+file.id).click(function(){
$('#' + file.id).remove();
uploader.removeFile(file);
$(this).unbind().remove();
});
});
uploader.start();
});
uploader.bind('BeforeUpload', function (up, file) {
$(".status", ".file-row#" + file.id).addClass('throbber');
});
uploader.bind('FileUploaded', function (up, file) {
$(".throbber", ".file-row#" + file.id).addClass('success').removeClass('throbber');
$(".cancel", ".file-row#" + file.id).removeClass('cancel');
});
uploader.bind('Error', function (up, err) {
$(".throbber", ".file-row#" + err.file.id).addClass('error').removeClass('throbber');
$(".cancel", ".file-row#" + err.file.id).removeClass('cancel');
});
});
</script>
并在我的控制器中:
public ActionResult Upload(string name = "", int chunk = 0)
{
if (Request.Files.Count < 1)
return Json(false);
HttpPostedFileBase fileUpload = Request.Files[0];
// Save file
return Json(true, "text/html");
}
答案 1 :(得分:0)
如果您想使用jQuery上传文件,我会向您推荐这个库:
它可以异步上传多个文件。他们的网站上有足够的例子。