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);//上传身份证正面
时间: 2024-10-14 07:59:12

Ajaxupload.js上传插件使用的相关文章

ajaxupload.js上传报错

相信大家在工作中经常用到文件上传的操作,因为我是搞前端的,所以这里主要是介绍ajax在前端中的操作.代码我省略的比较多,直接拿js那里的 $.ajaxFileUpload({ url:'www.coding/mobi/file/uploadSingleFile.html',//处理图片脚本 secureuri :false, fileElementId :'image2',//file控件id.就是input type="file" id="image2" data

Html5 js上传插件resumable.js 的使用

最近做一个csv文件上传,网上找了几个,兼容性不好,年代也比较久远,就去github上看看找找,发现了一个resumable.js,支持分片上传,多文件上传,完全满足需求~项目地址:https://github.com/23/resumable.js. 简单说下应用,顺便保存下代码,万一哪天再用了,忘了还得重新找.....这才是关键. 后台代码,两个文件,一个model,一个webapi,基于C#的. model代码: namespace Resumable.Models { public cl

7款js文件上传插件

1.  jQuery File Upload 具有多文件上传.拖拽.进度条和图像预览功能的文件上传插件,支持跨域.分块.暂停恢复和客户端图像缩放.可与任何服务端平台(如PHP.Python.Ruby on Rails.Java.Node.js.Go等)一起使用,支持标准的HTML表单文件上传. 2.  Pixelcone Fileuploader 使用HTML5 API的jQuery文件上传插件,支持AJAX上传和拖拽操作,以及针对老版本浏览器的iframe上传部件.有多种形式来实现多文件上传,

CKeditor七牛云JS SDK前端上传插件修改

七牛云官方有放出JS SDK,没有我想使用的CKeditor前端上传插件,所以结合七牛官方的Javascript SDK对CKeditor做了一些修改使它能够直接上传到七牛云,又同时保留了上传到本地服务的接口. 优点和缺点1.在前端上传到七牛云,不消耗服务器带宽和流量.空间.2.保留了CKeditor上传到自己服务器的能力.3.支持拖拽和剪切板黏贴图片上传(因为是保存为png格式,建议只黏贴色彩单调的图片,要不然图片会很大,浪费流量).4.拖拽和剪切板黏贴图片.不支持4M以上的文件,因为没有分块

纯原生js移动端图片压缩上传插件

前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于jquery.zepto的(这句话似乎吐槽次数太多了...),然后我也就不吐槽了, 然后当然是自己做了,先上图: 纯原生js的移动端图片压缩上传插件,不依赖任何库 用法 在html页面中引入input标签,通过自定义属性data-LUploader绑定点击触发的标签id,写法如下: <div cla

cjhupload一个简单异步文件上传插件(html5+js)

来源:http://www.myopenresources.com/page/resource_detail_0.html?rid=370 更多文章请查看本人博客网站:http://www.myopenresources.com cjhupload是一个本人基于原生JS编写的一个文件上传插件,支持手机.电脑端,你可查看例子,或下载详细例子(请到下面的"下载地址"下载). 例子: <!DOCTYPE HTML> <html lang='zh'> <head&

7 款基于 JavaScript/AJAX 的文件上传插件

本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传 拖拽操作 实时上传进度 自定义上传限制 希望能为你的开发工作带来帮助. 1.  jQuery File Upload 具有多文件上传.拖拽.进度条和图像预览功能的文件上传插件,支持跨域.分块.暂停恢复和客户端图像缩放.可与任何服务端平台(如PHP.Python.Ruby on Rails.Java.Node.js.Go等)一起使用,支持标准的HTML表单文件上传. 2.  Pixelco

图片上传插件梳理与学习

图片上传梳理与学习: 项目的oper端和seller端,用了两个不同插件,简单了解一下: 一.seller端: seller端使用的是 AjaxUpload.js ,封装好的一个库.调用时传入参数,配置相关属性即可. 1.使用步骤 引入JS文件: JS代码构建对象,传入对应参数:同时JS中的方法可以进行图片上传之前之后的处理: 后台:实现图片上传同时返回结果: 2.AjaxUpload的学习参考: http://www.zhangxinxu.com/wordpress/2009/11/ajax-

SWFUpload批量上传插件

SWFUpload是一个批量上传插件,在HTML4.1里面,估计也只有Flash+javascript配合才能够做到了.先复制个重要的网址,这个应该是官方的文档了,相当齐全. http://leeon.me/upload/other/swfupload.html#uploadStart 这个是格式比较好看的. http://www.cnblogs.com/2050/archive/2012/08/29/2662932.html 算了,这个文档的内容太多,各种属性各种方法,记不了这么多,直接贴上个