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}");