zoukankan      html  css  js  c++  java
  • 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}");

     

  • 相关阅读:
    IoC~MVC3+EF+Autofac实现松耦合的系统架构
    IoC~高效的Autofac
    Autofac 依赖注入框架 使用
    C# socket编程实践——支持广播的简单socket服务器
    简单理解Socket
    利用html 5 websocket做个山寨版web聊天室(手写C#服务器)
    c# 实现WebSocket
    oracle中clob字段的使用
    查找程序加载的动态库的路径
    wordpress在window下完美实现301重定向的方法
  • 原文地址:https://www.cnblogs.com/codersun/p/5265031.html
Copyright © 2011-2022 走看看