1

サーバーに複数のファイルをアップロードする機能を必要とする ASP.NET MVC 3 アプリケーションがあります。

欲しい機能は以下です。

  • アップロードされたファイルを表示する JQuery グリッド
  • JQuery アップロード モーダル ダイアログ (FileUpload コントロールを含む)
  • 非同期アップロード (アップロード ウィンドウには、アップロード中のファイルが表示されます)
  • フラッシュプラグインを使用したくない.

あると便利:

  • ファイル アップロード モーダルは再利用可能である必要があります。

質問:

  • Jqueryには、ファイルをアクションメソッドに非同期で送信し、同じものをフォルダーとセッション変数に保存するオプションがありますか?

  • このコンポーネントを多くのビューで使用しているので、PRG パターンに従うべきですか、それとも JQuery を使用してファイルを非同期的にアップロードするべきですか?

4

2 に答える 2

2

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

jQuery を使用してファイルをアップロードする場合は、次のライブラリをお勧めします。

http://www.uploadify.com/

複数のファイルを非同期でアップロードできます。彼らのウェブサイトには十分な例があります。

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

于 2012-04-18T12:55:11.767 に答える