1

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

以下是我希望它具有的功能：

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

很高兴拥有：

  • 文件上传模式应该是可重用的。

问题：

  • Jquery 是否可以选择将文件异步发送到操作方法并将其保存在文件夹和会话变量中？

  • 由于我在很多视图中都使用这个组件，我应该遵循 PRG 模式，还是使用 JQuery 异步上传文件？

4

2 回答 2

2

Use Jquery file upload pluging.

I usually use plupload.

http://www.plupload.com/

My Sample To Use PlUpload:

in View:

<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>

and in My Controller:

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");
}
于 2012-04-18T12:56:02.813 回答
0

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

http://www.uploadify.com/

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

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

于 2012-04-18T12:55:11.767 回答