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()需 ...
随机推荐
- Only Link: Reading links for button/a etc
When To Use The Button Element: https://css-tricks.com/use-button-element/ The Difference Between An ...
- gulp完全开发指南 => 快来换掉你的Grunt吧
最近一直在构建Angular应用,通过bower管理前端包依赖,然后通过gulp和它配合.发现gulp相比于grunt真的很轻,现在我的项目中已经取代了grunt.这里把我的一些实践贴记录下来和大家分 ...
- Codeforces Round #242 (Div. 2) A. Squats
注意题目一次只能改变一个松鼠,Pasha can make some hamster ether sit down or stand up.是单数不是复数 #include <iostream& ...
- eclipse安装color theme插件
为Eclipse添加Color.Theme的插件 这样可以方便一键更换主题,再也不用一个一个设置BackgroundColor了,同时也方便回退到default默认主题配置. 方法一: 打开Eclip ...
- ORA-01034错误:ORALCE NOT CONNECT
解决办法: 启动数据库 sqlplus '/as sysdba ' startup;
- 百度SDK的使用第一天
//获取自定义的经纬度上添加位置气泡,大头钉 BMKPointAnnotation* annotation = [[BMKPointAnnotation alloc]init]; CLLocation ...
- Flex在Win10,Chrome浏览器上汉字乱码的问题
今天遇到一个超级郁闷的问题,之前好好的程序.但是因为客户升级了客户端操作系统.由Win7升级到Win10,就出现乱码了. 找了好多原因和办法都没解决. (1)IE浏览器正常 (2)Win7,Windo ...
- 关于多条id相同,只取其中一条记录的sql语句
需要使用:分区函数用法(partition by 字段) select *,row_number() over(partition by item order by date ) as index ...
- [LintCode] House Robber III 打家劫舍之三
The thief has found himself a new place for his thievery again. There is only one entrance to this a ...
- ubuntu上安装Eclipse时遇到的一个错误
A Java Runtime Environment (JRE) or Java Development Kit (JDK)must be available in order to run Ecli ...