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}");
Ajaxfileupload 总结(包括插件处理json格式bug的解决方案)的更多相关文章
- easyUI的datagrid控件日期列不能正确显示Json格式数据的解决方案
EasyUI是一套比较轻巧易用的Jquery控件,在使用过程中遇到一个问题,它的列表控件——datagrid, 在显示日期列的时候,由于后台返回给页面的数据是Json格式的,其中的日期字段,在后台是正 ...
- RESTful Get方式传参json格式后端400 解决方案
前端采用vue+axios 后端采用spring boot restful 问题: 前端get 请求需要传递array 字段值 后端由于tomcat 版本问题,不支持url接受特殊字符包括 [] {} ...
- 一个粗心的Bug,JSON格式不规范导致AJAX错误
一.事件回放 今天工作时碰到了一个奇怪的问题,这个问题很早很早以前也碰到过,不过没想到过这么久了竟然又栽在这里. 当时正在联调一个项目,由于后端没有提供数据接口,于是我直接本地建立了一个 json ...
- json相关,浏览器打开json格式的api接口时,进行格式化,chrome插件
在chrome浏览器中安装Google jsonview插件能够自动格式化json格式的数据.
- ajaxFileUpload上传带参数,返回值改成json格式
/*直接复制在自己的js文件中就能使用*/ jQuery.extend({ createUploadIframe: function (id, uri) { //create frame var fr ...
- 小强的HTML5移动开发之路(39)——jqMobi插件json格式ActionSheet
在上一篇中我们学会了ActionSheet的使用,细心的朋友可能会发现其中创建列表的格式是HTML的,代码如下: function showCustomHtmlSheet() { $("#a ...
- Android 自定义 ListView 显示网络上 JSON 格式歌曲列表
本文内容 环境 项目结构 演示自定义 ListView 显示网络上 JSON 歌曲列表 参考资料 本文最开始看的是一个国人翻译的文章,没有源代码可下载,根据文中提供的代码片段,自己新建的项目(比较可恶 ...
- spring mvc ajaxfileupload文件上传返回json下载问题
问题:使用spring mvc ajaxfileupload 文件上传在ie8下会提示json下载问题 解决方案如下: 服务器代码: @RequestMapping(value = "/ad ...
- 将任意一个jQuery对象进行表单序列化,免除了提交请求时大量拼写表单数据的烦恼,支持键值对<name&value>格式和JSON格式。
http://zhengxinlong.iteye.com/blog/848712 将任意一个jQuery对象进行表单序列化,免除了提交请求时大量拼写表单数据的烦恼,支持键值对<name& ...
随机推荐
- 对于用div+css随心所欲布局的思考
在div+css取代Table成为主流的时代,学会用其进行随心所欲的布局是一个不可回避的技能.那么,重点掌握哪几个要点呢? 整体布局:从整体到局部的顺序进行布局,逐步定义div集css样式: 灵活运用 ...
- 樱花的季节,教大家用canvas画出飞舞的樱花树
又到了樱花的季节,教大家使用canvas画出飞舞的樱花树效果. 废话少说,先看效果. 演示效果地址:http://suohb.com/work/tree4.htm 查看演示效果 第一步,我们先画出一棵 ...
- dev机上数据库中批量生成table
我的低效方法: 通过本地php脚本进行create: <?php //0-63 header("Content-type:text/html;charset=utf-8"); ...
- 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 ...
- servlet与jsp的区别(转)
一.基本概念 1.1 Servlet Servlet是一种服务器端的Java应用程序,具有独立于平台和协议的特性,可以生成动态的Web页面.它担当客户请求(Web浏览器或其他HTTP客户程序)与服务器 ...
- Java基础—JDK环境变量配置
1.安装JDK 下载网址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 注意点 ...
- 自动生成并导出word文档
今天很荣幸又破解一现实难题:自动生成并导出word文档 先看页面效果: word效果: 代码: 先搭建struts2项目 创建action,并在struts.xml完成注册 <?xml vers ...
- google官方的下拉刷新+自定义上拉加载更多
转载请标注转载:http://blog.csdn.net/oqihaogongyuan/article/details/50949118 google官方的下拉刷新+自定义上拉加载更多 现在很多app ...
- 【转】DHCP的请求过程
首先你得清楚DHCP的请求过程:1.client向server发送请求,发向广播地址2.server向client回应一个IP,发向单播地址3.client向server回应一个确认,发向广播地址,表 ...
- shiro基础学习(三)—shiro授权
一.入门程序 1.授权流程 2.授权的三种方式 (1)编程式: 通过写if/else 授权代码块完成. Subject subject = SecurityUtils.getSubjec ...