4

jQuery File Uploadプラグインを使用して、いくつかのファイルを ajax 形式でアップロードしようとしています。「基本」プラグインの指示に従おうとしていますが、ドキュメントは少しまばらです。

「アップロード開始」ボタンを作成する方法がわかりません。また、個々のアップロードの進行状況バーを設定する方法もよくわかりません。data.contextコールバックで設定できるaddようですが、複数のファイルがある場合、どのように機能しますdata.filesか?

4

1 に答える 1

3

すべてのマークアップはフォームでラップする必要があります。これがフォームのマークアップです。

<form id="fileupload" action="/path/to/your/controller/ext" method="POST" type="multiplart/form-data">...everything below this goes in here </form>

これは、[アップロードの開始]ボタンを作成するためのマークアップです。

<button class="btn btn-primary start" type="submit">
    <span>Start upload</span>
</button>

[ファイルの追加]ボタンを作成するためのマークアップは次のとおりです。

<span class="btn btn-success fileinput-button">
   <span>Add files...</span>
   <input type="file" multiple="" name="files[]">
</span>

[アップロードのキャンセル]ボタンを作成するためのマークアップは次のとおりです。

<button class="btn btn-warning cancel" type="reset">
    <span>Cancel upload</span>
</button>

これが「削除」ボタンを作成するためのマークアップです。

<button class="btn btn-danger delete" type="button">
    <span>Delete</span>
</button>

これは、単一ファイルの進行状況を表示するためのマークアップです。各ファイルは同期的に処理されます。つまり、このプログレスバーには常に進行状況が表示されます。currently queued file.

<div class="span5 fileupload-progress fade">
    <!-- The global progress bar -->
    <div aria-valuemax="100" aria-valuemin="0" role="progressbar" class="progress progress-success progress-striped active">
        <div style="width:0%;" class="bar"></div>
    </div>
    <!-- The extended global progress information -->
    <div class="progress-extended">&nbsp;</div>
</div>

処理中にファイルデータを保持するために使用されるHTMLは次のとおりです。

<table class="table table-striped" role="presentation">
    <tbody data-target="#modal-gallery" data-toggle="modal-gallery" class="files"></tbody>
 </table>

これが標準の「送信」ボタンであることがわかります。フォームの処理に使用されます。クリックすると、フォームはすべてのファイル部分をアップロードしようとします。

上記のコードで想定されているプログレスバーのHTML。

<div id="progress">
    <div class="bar" style="width: 0%;"></div>
</div>

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
             });
        },
        progressall: function (e, data) {
           var progress = parseInt(data.loaded / data.total * 100, 10);
           $('#progress .bar').css(
               'width',
               progress + '%'
           );
        }
   });
});

サイトごとに、各javascriptは、その機能と要件に関するコメントをファイルします。分解しましょう

jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
//We need the jQuery core. No need for an explanation.

jQuery UIウィジェットは全体で使用されます。**jQueryUIコアまたはjQueryUI.widgetコアがまだ含まれていない場合は、それらを含める必要があります。

<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="js/vendor/jquery.ui.widget.js"></script>

要素をドラッグ/ドロップ/リストに追加するときに要素を自動的に生成するために使用されるテンプレートファクトリプラグインがあります。これを含めることをお勧めします。

<!-- The Templates plugin is included to render the upload/download listings -->
<script src="http://blueimp.github.com/JavaScript-Templates/tmpl.min.js"></script>

画像のサイズを変更してプレビューできるようにしますか？君はそうすると思う

<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"></script>

これは、HTML5CanvasからBlobへのサポート用です。上記と同様の機能を維持しますが、HTML5のアップロードには必要です。

<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="http://blueimp.github.com/JavaScript-Canvas-to-Blob/canvas-to-blob.min.js"></script>

この次のものはかなり自明です、私たちはこれらを必要としません、しかし彼はデモのためにそれらを使用します。

<!-- Bootstrap JS and Bootstrap Image Gallery are not required, but included for the demo -->
<script src="http://blueimp.github.com/cdn/js/bootstrap.min.js"></script>
<script src="http://blueimp.github.com/Bootstrap-Image-Gallery/js/bootstrap-image-gallery.min.js"></script>

ブラウザがXHRファイルのアップロードをサポートしていない場合は、バックグラウンドでiFrameを使用して機能を模倣します。これはブラウザのサポートに必要です。

<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="js/jquery.iframe-transport.js"></script>

これらの残りは、プラグイン自体に関連するコアファイルです。

<!-- The basic File Upload plugin -->
<script src="js/jquery.fileupload.js"></script>

<!-- The File Upload file processing plugin -->
<script src="js/jquery.fileupload-fp.js"></script>

<!-- The File Upload user interface plugin -->
<script src="js/jquery.fileupload-ui.js"></script>

この次のものは、それほど自明ではありません。ローカリゼーションは言語の差別化を処理します。

<!-- The localization script -->
<script src="js/locale.js"></script>

最後に、これは私たちのジャガイモの肉です。Main.jsは、スクリプトの実行と条件付けのすべてを処理します。これは、使い慣れたファイルです。彼らのページを調べると、起こっていることすべてがわかります。単純なコピーと貼り付けで十分です。ただし、使用する予定のサーバーに一致するように、このスクリプト内のURL値を変更する必要があります。

<!-- The main application script -->
<script src="js/main.js"></script>

幸運を。

于 2012-08-06T17:35:02.757 に答える