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

Ajaxfileupload 总结(包括插件处理json格式bug的解决方案)的更多相关文章

  1. easyUI的datagrid控件日期列不能正确显示Json格式数据的解决方案

    EasyUI是一套比较轻巧易用的Jquery控件,在使用过程中遇到一个问题,它的列表控件——datagrid, 在显示日期列的时候,由于后台返回给页面的数据是Json格式的,其中的日期字段,在后台是正 ...

  2. RESTful Get方式传参json格式后端400 解决方案

    前端采用vue+axios 后端采用spring boot restful 问题: 前端get 请求需要传递array 字段值 后端由于tomcat 版本问题,不支持url接受特殊字符包括 [] {} ...

  3. 一个粗心的Bug,JSON格式不规范导致AJAX错误

    一.事件回放  今天工作时碰到了一个奇怪的问题,这个问题很早很早以前也碰到过,不过没想到过这么久了竟然又栽在这里. 当时正在联调一个项目,由于后端没有提供数据接口,于是我直接本地建立了一个 json ...

  4. json相关,浏览器打开json格式的api接口时,进行格式化,chrome插件

    在chrome浏览器中安装Google jsonview插件能够自动格式化json格式的数据.

  5. ajaxFileUpload上传带参数,返回值改成json格式

    /*直接复制在自己的js文件中就能使用*/ jQuery.extend({ createUploadIframe: function (id, uri) { //create frame var fr ...

  6. 小强的HTML5移动开发之路(39)——jqMobi插件json格式ActionSheet

    在上一篇中我们学会了ActionSheet的使用,细心的朋友可能会发现其中创建列表的格式是HTML的,代码如下: function showCustomHtmlSheet() { $("#a ...

  7. Android 自定义 ListView 显示网络上 JSON 格式歌曲列表

    本文内容 环境 项目结构 演示自定义 ListView 显示网络上 JSON 歌曲列表 参考资料 本文最开始看的是一个国人翻译的文章,没有源代码可下载,根据文中提供的代码片段,自己新建的项目(比较可恶 ...

  8. spring mvc ajaxfileupload文件上传返回json下载问题

    问题:使用spring mvc ajaxfileupload 文件上传在ie8下会提示json下载问题 解决方案如下: 服务器代码: @RequestMapping(value = "/ad ...

  9. 将任意一个jQuery对象进行表单序列化,免除了提交请求时大量拼写表单数据的烦恼,支持键值对<name&value>格式和JSON格式。

    http://zhengxinlong.iteye.com/blog/848712 将任意一个jQuery对象进行表单序列化,免除了提交请求时大量拼写表单数据的烦恼,支持键值对<name& ...

随机推荐

  1. 对于用div+css随心所欲布局的思考

    在div+css取代Table成为主流的时代,学会用其进行随心所欲的布局是一个不可回避的技能.那么,重点掌握哪几个要点呢? 整体布局:从整体到局部的顺序进行布局,逐步定义div集css样式: 灵活运用 ...

  2. 樱花的季节,教大家用canvas画出飞舞的樱花树

    又到了樱花的季节,教大家使用canvas画出飞舞的樱花树效果. 废话少说,先看效果. 演示效果地址:http://suohb.com/work/tree4.htm 查看演示效果 第一步,我们先画出一棵 ...

  3. dev机上数据库中批量生成table

    我的低效方法: 通过本地php脚本进行create: <?php //0-63 header("Content-type:text/html;charset=utf-8"); ...

  4. Linux下Scala(2.12.1)安装

    一.文件准备 1.1 文件名称 scala-2.12.1.tgz 1.2 下载地址 http://www.scala-lang.org/download/2.12.1.html 二.工具准备 2.1 ...

  5. servlet与jsp的区别(转)

    一.基本概念 1.1 Servlet Servlet是一种服务器端的Java应用程序,具有独立于平台和协议的特性,可以生成动态的Web页面.它担当客户请求(Web浏览器或其他HTTP客户程序)与服务器 ...

  6. Java基础—JDK环境变量配置

    1.安装JDK 下载网址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 注意点 ...

  7. 自动生成并导出word文档

    今天很荣幸又破解一现实难题:自动生成并导出word文档 先看页面效果: word效果: 代码: 先搭建struts2项目 创建action,并在struts.xml完成注册 <?xml vers ...

  8. google官方的下拉刷新+自定义上拉加载更多

    转载请标注转载:http://blog.csdn.net/oqihaogongyuan/article/details/50949118 google官方的下拉刷新+自定义上拉加载更多 现在很多app ...

  9. 【转】DHCP的请求过程

    首先你得清楚DHCP的请求过程:1.client向server发送请求,发向广播地址2.server向client回应一个IP,发向单播地址3.client向server回应一个确认,发向广播地址,表 ...

  10. shiro基础学习(三)—shiro授权

    一.入门程序 1.授权流程        2.授权的三种方式 (1)编程式: 通过写if/else 授权代码块完成. Subject subject = SecurityUtils.getSubjec ...