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

Question

我試圖使用jQuery File Upload插件以ajax形式上傳一些文件。我試圖按照"Basic" plugin的說明操作，但文檔有點稀疏。

我沒有看到任何方法來創建「開始上傳」按鈕。我也不太瞭解如何設置單個上傳的進度條。我看到我可以在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.

<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畫布到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> 

其餘的是與插件相關的核心文件。

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

這下一個是不是很自我exlpanatory。本地化處理語言差異化。

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

最後，這是我們的土豆肉。 Main.js處理我們所有的腳本執行和條件化。這是您需要熟悉的文件。如果你檢查他們的頁面，你會看到發生的一切。一個簡單的複製+粘貼就足夠了;但是，您需要更改此腳本中的URL值以匹配您計劃使用的服務器。

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

祝你好運。