最近在做一個集富媒體功能于一身的項目。需要上傳視頻。這里我希望做成異步上傳，并且有進度條，響應有狀態碼，視頻連接，縮略圖。

服務端響應

 {   "thumbnail": "/slsxpt//upload/thumbnail/fdceefc.jpg",   "success": true,   "link": "/slsxpt//upload/video/fdceefc.mp" }

并且希望我的input file控件不要被form標簽包裹。原因是form中不能嵌套form，另外form標簽在瀏覽器了還是有一點點默認樣式的，搞不好又要寫css。

以前用ajaxFileUpload做過文件異步上傳。不過這個東西好久未更新，代碼還有bug，雖然最后勉強成功用上了，但總覺不好。而且ajaxFileUpload沒有直接添加xhr2的progress事件響應，比較麻煩。

上網找了一下，發現方法都是很多。

比如在文件上傳后，將上傳進度放到session中，輪詢服務器session。但我總覺的這個方法有問題，我認為這種方法看到的進度，應該是我的服務端應用程序代碼（我的也就是action）從服務器的臨時目錄復制文件的進度，因為所有請求都應該先提交給服務器軟件，也就是tomcat，tomcat對請求進行封裝session，request等對象，并且文件實際上也應該是它來接收的。也就是說在我的action代碼執行之前，文件實際上已經上傳完畢了。

后來找到個比較好的方法使用 jquery.form.js插件的ajaxSubmit方法。這個方法以表單來提交，也就是 $.fn.ajaxSubmit.：$(form selector).ajaxSubmit({})，這個api的好處是它已經對xhr2的progress時間進行了處理，可以在調用時傳遞一個uploadProgress的function，在function里就能夠拿到進度。而且如果不想input file被form包裹也沒關系，在代碼里createElement應該可以。不過這個方法我因為犯了個小錯誤最后沒有成功，可惜了。

ajaxSubmit源碼

最后，還是使用了$.ajax 方法來做。$.ajax 不需要關聯form，有點像個靜態方法哦。唯一的遺憾就是$.ajax options里沒有對progress的響應。不過它有一個參數為 xhr ,也就是你可以定制xhr，那么久可以通過xhr添加progress的事件處理程序。再結合看一看ajaxSubmit方法里對progress事件的處理，頓時豁然開朗

那么我也可以在$.ajax 方法中添加progress事件處理函數了。為了把對dom的操作從上傳業務中抽取出來，我決定以插件的形式寫。下面是插件的代碼

 ;(function ($) {   var defaults = {       uploadProgress    :  null,       beforeSend      :  null,       success        :  null,     },     setting = {     };   var upload = function($this){     $this.parent().on('change',$this,function(event){       //var $this = $(event.target),       var  formData = new FormData(),         target = event.target || event.srcElement;       //$.each(target.files, function(key, value)       //{       //  console.log(key);       //  formData.append(key, value);       //});       formData.append('file',target.files[]);       settings.fileType && formData.append('fileType',settings.fileType);       $.ajax({         url        :  $this.data('url'),         type      :  "POST",         data      :  formData,         dataType    :  'json',         processData    :  false,         contentType    :  false,         cache      :  false,         beforeSend    :  function(){           //console.log('start');           if(settings.beforeSend){             settings.beforeSend();           }         },         xhr        :   function() {           var xhr = $.ajaxSettings.xhr();           if(xhr.upload){             xhr.upload.addEventListener('progress',function(event){               var total = event.total,                 position = event.loaded || event.position,                 percent = ;               if(event.lengthComputable){                 percent = Math.ceil(position / total * );               }               if(settings.uploadProgress){                 settings.uploadProgress(event, position, total, percent);               }             }, false);           }           return xhr;         },         success      :  function(data,status,jXhr){           if(settings.success){             settings.success(data);           }         },         error      :  function(jXhr,status,error){           if(settings.error){             settings.error(jXhr,status,error);           }         }       });     });   };   $.fn.uploadFile = function (options) {     settings = $.extend({}, defaults, options);     // 文件上傳     return this.each(function(){       upload($(this));     });   } })($ || jQuery);