Ajaxfileupload 總結（包括插件處理json格式bug的解決方案）

Ajaxfileupload 是一款輕量級js的上傳插件，簡單容易上手，今天簡單學習了下。

1，引用jquery和Ajaxfileupload .js

   <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="~/Scripts/ajaxfileupload.js"></script>

2，html代碼

   <input type="file" id="touxiang" name="photo" size="10" onchange="changImg()" />

3，js的處理

   

  function changImg() {
            $.ajaxFileUpload({
                url: '/home/file',
                secureuri: false,  //是否啟用安全提交
                dataType: 'text',   //數據類型
                fileElementId: 'touxiang', //表示文件域ID
                //提交成功后處理函數      data為返回值，status為執行的狀態
                success: function (data, status) {}
                //提交失敗的函數
                error:function(data,status,e){}

應該還會有一些其他的API，用到的時候再補充吧。

 

問題：上傳插件不支持服務器返回的json格式的數據。

原因：ajaxfileupload 的原理其實是動態創建了一個<ifream>標簽，把你寫的表單元素放到ifream 中再用一個post表單包起來，提交的時候直接提交表單，然后服務器返回的結果也是直接到ifream里面，所以json數據格式會被包裹上一層<pre>標簽

 

解決方案： 1，先把$.ajaxFileUpload 參數列表里面datatype設置成text，不然無論執行成功或者失敗，只要服務器返回數據，都會直接執行error方法。

               2，服務器用序列化工具返回json數據，在js里面用substr切割掉標簽，然后序列化為json對象

 

  var result = data.toString().substr(5, data.length - 11);
                    var json = $.parseJSON(result);

 

              3，服務器用字符串拼接的方式返回一個json字符串，js里面直接序列化。　　

return Content("{\"msg\":666}");