Ajaxupload.js上传插件使用
注意一下火狐,360IE78下的坑:
返回过来的response在不同浏览器下的字符串不一致
// response(chrome):<pre style="word-wrap: break-word; white-space: pre-wrap;">{"success":true,"info":"保存成功!","PhotoURL":"\/upload_BenefitsFund\/33\/20151204102733907401WRME4.png"}</pre>
// response(360IE78):<PRE>{"success":true,"info":"保存成功!","PhotoURL":"\/upload_BenefitsFund\/33\/20151204101939484PTND5ELI.png"}</PRE>
// response(Firefox):"<pre>{"success":true,"info":"保存成功!","PhotoURL":"\/upload_BenefitsFund\/33\/20151204102931978J0GLUULI.png"}</pre>"
单纯的正则匹配并移除多余部分已经不能满足不同浏览器下的需求了
于是我们只能通过”{” ,”}”匹配截取”{”前面与”}”后面的
最后把剩余部分的json格式字符串再通过eval转为json
var UploadImg = function ($_selector, applyType, type) {
var button = $($_selector), interval;
new AjaxUpload(button, {
action: 'Handler/Users/BenefitsFund.ashx?action=ImgSave&applyType=' + applyType + '&type='+type,
name: 'myfile',
// dataType: "json",
onSubmit: function (file, ext) {
if (!(ext && /^(jpg|jpeg|png|gif|JPG|JPEG|PNG|GIF)$/.test(ext))) {
alert("图片格式不正确,请重新选择!");
return false;
}
},
onComplete: function (file, response) {//当上传完成时的操作
console.log(response);
// response(chrome):<pre style="word-wrap: break-word; white-space: pre-wrap;">{"success":true,"info":"保存成功!","PhotoURL":"\/upload_BenefitsFund\/33\/20151204102733907401WRME4.png"}</pre>
// response(360IE78):<PRE>{"success":true,"info":"保存成功!","PhotoURL":"\/upload_BenefitsFund\/33\/20151204101939484PTND5ELI.png"}</PRE>
// response(Firefox):"<pre>{"success":true,"info":"保存成功!","PhotoURL":"\/upload_BenefitsFund\/33\/20151204102931978J0GLUULI.png"}</pre>"
response = response.substring(response.lastIndexOf("{"));///去response中"{"前面的除字符串
// console.log(response);
response = response.substring(0, response.lastIndexOf("}") + 1);///去response中"}"后面的除字符串
//alert(response);
// console.log(response);
//var reg = /<pre.+?>(.+)<\/pre>/g;
//var result = response.match(reg);
//response = RegExp.$1;//去除多余的字符串
// alert(response)
//response = JSON.parse(response);//转成json格式 IE78不支持
// response = $.parseJSON(response);//转成json格式
response = eval("(" + response + ")");//转成json格式 IE78支持
// response = JSON.parse(response);
//alert(response)
// console.log(response);
//var _MyJson = '{ "success": true, "info": "保存成功!", "PhotoURL": "/upload_BenefitsFund/33/201512031628303370LTKBULS.png" }';
//alert(_MyJson);
//console.log("1" + _MyJson);
//_MyJson = eval("(" + _MyJson + ")");
// alert(response.success)
if (response.success == true) {
alert("上传成功");
button.find(".upload_img").attr("src", response.PhotoURL)
}
else {
alert(response.reason);
}
//if (file!= "") {
// //window.location.href = window.location.href;
// alert("dd");
// //alert(response)
// console.log(response)
//}
},
onError: function (id, fName, error) {
ZENG.msgbox.show("上传失败,请重试!", 1, 2000);
window.clearInterval(interval);
}
});
}
new UploadImg(".Js_upload_sfz01",4,0);//上传身份证正面
Ajaxupload.js上传插件使用的更多相关文章
- js上传插件uploadify自动检测不到flash控件的问题
[问题描述] 项目开发中,由于使用了js的一个上传插件uploadify,下载的是flash版本的,后来在谷歌浏览器上运行时经常报flash控件未安装,虽然下图是uploadify自动检测自动弹出来的 ...
- angular js 上传插件 ng-file-upload 使用时注意事项
项目框架为angular js,需要用到文件上传,百度之后先选择了angular-file-upload,githuab上API文档很全,想要具体了解,可以仔细研究一下.在这里简单回顾一下自己使用的插 ...
- 【原】ajaxupload.js上传报错处理方法
相信大家在工作中经常用到文件上传的操作,因为我是搞前端的,所以这里主要是介绍ajax在前端中的操作.代码我省略的比较多,直接拿js那里的 $.ajaxFileUpload({ url:'www.cod ...
- 7款js文件上传插件
1. jQuery File Upload 具有多文件上传.拖拽.进度条和图像预览功能的文件上传插件,支持跨域.分块.暂停恢复和客户端图像缩放.可与任何服务端平台(如PHP.Python.Ruby ...
- 纯原生js移动端图片压缩上传插件
前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于 ...
- js插件---IUpload文件上传插件(包括图片)
js插件---IUpload文件上传插件(包括图片) 一.总结 一句话总结:上传插件找到真正上传位置的代码,这样就可以知道整个上传插件的逻辑了, 找资料还是github+官方 1.如何在js中找到真正 ...
- PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件
PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...
- Js 之移动端图片上传插件mbUploadify
一.下载 https://pan.baidu.com/s/1NEL4tkHoK4ydqdMi_hgWcw 提取码:vx7e 二.Demo示例 <div class="weui_uplo ...
- JQuery文件上传插件JQuery.upload.js的用法简介
JQuery文件上传插件,这个插件很小,用法很简单,效果却很棒.注意:JQuery版本要求1.8及以上,大家执行如果没效果,则检查JQuery版本,如果是1.8及以上,则该插件源码中的.size()需 ...
随机推荐
- dplyr包--数据操作与清洗
1.简介 在我们数据分析的实际应用中,我们可能会花费大量的时间在数据清洗上,而如果使用 R 里面自带的一些函数(base 包的 transform 等),可能会觉得力不从心,或者不是很人性化.好在我们 ...
- unity 解析tmx
using UnityEngine; using System.Collections; using System.IO; using System.Xml; public class xml : M ...
- Enum(枚举类型)的基本应用
一.前言 在我们日常的开发过程中,我们经常定义使用常量:在Effective Java建议用枚举来替换常量的使用,提高我们代码的质量,总结一下枚举定义常量的基本使用 二.枚举类型说明 1.枚 ...
- webpack: require.ensure与require AMD的区别
http://blog.csdn.net/zhbhun/article/details/46826129
- BZOJ 1029 & 丝帛贪心
题意: 小刚在玩JSOI提供的一个称之为“建筑抢修”的电脑游戏:经过了一场激烈的战斗,T部落消灭了所有z部落的入侵者.但是T部落的基地里已经有N个建筑设 施受到了严重的损伤,如果不尽快修复的话,这些建 ...
- 移动H5前端性能优化指南(转载)
移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...
- 快速搭建IE测试环境(Virtualbox+ievms)
IE下的测试 作为一个有追求的程序员,应该尽可能的远离Windows系统.不论从专业开发者的角度,还是仅仅作为最终用户从使用体验上来说,Windows都可以算是垃圾中的战斗机: 没有shell . 响 ...
- 1204. Maze Traversal
1204. Maze Traversal A common problem in artificial intelligence is negotiation of a maze. A maze ...
- 【BZOJ】2563: 阿狸和桃子的游戏
http://www.lydsy.com/JudgeOnline/problem.php?id=2563 题意:给一个n个加权点m条加权边的无向图,两个人轮流拿走一个点,最后使先手得分-后手得分尽量大 ...
- 开年钜献:华清远见金牌讲师名家大讲堂(Android开发篇)
华清远见作为嵌入式培训领导品牌,嵌入式就业课程已成为业内公认的专业人才培养体系!华清远见致力于让更多嵌入式技术爱好者及在校大学生获得一线嵌入式系统开发关键技术应用的经验,于2009年始开办名家 ...