使用jQuery-File-Upload插件創建上傳按鈕和進度條

Question

我正在嘗試使用jQuery文件上傳插件以ajax形式上傳一些文件。 我正在嘗試遵循“基本”插件的說明 ，但文檔有點稀疏。

我沒有看到任何方法來創建“開始上傳”按鈕。 我也不太了解如何設置單個上傳的進度條。 我看到我可以在add回調中設置data.context ，但是如果data.files有多個文件，它是如何工作的？

Answer 1

所有標記必須包裝在一個表單中，這里是表單的標記。

<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.的進度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 Widget在整個過程中使用，如果**我們還沒有包含jQuery UI核心或jQuery UI.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>

這適用於HTML5 Canvas to Blob支持。 它保持了上述的simliar功能，但是，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>

其余的是與Plugin相關的核心文件。

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

祝好運。