Jquery fileupload用法，包括进度条设置

准备工作：引入几个js

<script src="js/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>

<!-- 上传input,data-url为上传url，也可在fileupload中指定url -->
<input id="fileupload" type="file" name="files[]" data-url="" multiple>
           

js调用

/**
 * [get_progress_str 获取进度条dom]
 * @param  {[type]} _name     [文件名称]
 * @param  {[type]} _progress [当前进度]
 * @return {[type]}           [description]
 */
function get_progress_str(_name, _progress){
   var progressStr = '<div data-name="' + _name + '"><div class="progress_name">' + _name + '</div><div class="progress progress_custom"><div class="progress-bar" style="width: ' + _progress + '%">' + _progress + '%</div></div></div>';
   return progressStr;
 }
  
$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        singleFileUploads: false, // 是否一次上传一个文件，默认true，设置false可多个文件一次上传
        url: '', // 上传url，也可以在file上传input上通过data-url属性来指定
        add: function (e, data) {
        	loadingFlag = true;
	        // var card_size = data.files[0].fileSize || data.files[0].size; // 获取file的文件大小
	        // 循环添加当前上传文件的进度条
	        for (var i = 0; i < data.files.length; i++) {
	          var tempName = data.files[i].name;
	          // 通过data-name判断当前进度条是否已经存在，若不存在则添加
	          if ($('[data-name="' + tempName + '"]').length == 0) {
	            var progressStr = get_progress_str(tempName, 0);
	            $('.upload_progress').append(progressStr);
	          }
	        }
	        jqFileuploadXHR = data.submit();
      },
      progress: function (e, data) {// 单个进度
        var progress = parseInt(data.loaded / data.total * 100, 10);
        var tempName = data.files[0].name;
        if ($('[data-name="' + tempName + '"]').length == 0) {
          var progressStr = get_progress_str(tempName, progress);
          $('.upload_progress').append(progressStr);
        } else {
          $('[data-name="' + tempName + '"]').find('.progress-bar').css('width', progress + '%').text(progress + '%');
        }
      },
      progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10); // 总进度
        if (progress >= 100) {
          loadingFlag = false;
        }
      },
      done: function (e, data) {  
        if (loadingFlag) { // 还有文件未上传完
          return;
        }     
      }
    });
});