Question

我有一个ASP.NET MVC 3应用程序，需要能够将多个文件上传到服务器。

以下是我喜欢的功能：

用于显示上传文件的JQuery Grid
JQuery上传模式对话框（其中包含FileUpload控件）
异步上传（上传窗口将显示上传过程中的文件）
不想使用flash插件。

很高兴：

文件上传模式应该是可恢复的。

问题：

Jquery是否可以选择将文件异步发送到操作方法并将其保存在文件夹和会话变量中？
由于我在许多视图中使用此组件，我应该遵循PRG模式，还是使用JQuery异步上传文件？

Answer 1

使用Jquery文件上传插件。

我通常使用plupload。

http://www.plupload.com/

我的样本使用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");
}

Answer 2

如果您想使用jQuery上传文件，我会向您推荐这个库：

http://www.uploadify.com/

它可以异步上传多个文件。他们的网站上有足够的例子。

http://www.uploadify.com/demos/

我应该如何处理ASP.NET MVC 3中的多个文件上传？

以下是我喜欢的功能：

很高兴：

问题：

2 个答案: