jQuery插件之ajaxFileUpload

转载于 2019-02-19 14:23:22 发布 · 135 阅读

文章标签：

#ajaxFileUpload #上传插件 #上传 #jquery上传

js 同时被 2 个专栏收录

33 篇文章

订阅专栏

ajax

1 篇文章

订阅专栏

本文详细介绍了AjaxFileUpload.js插件的使用方法，包括引入插件、HTML代码配置、JS代码实现异步文件上传功能，以及后台处理页面的编写。同时，文章提供了常见错误的排查方法，帮助开发者快速解决问题。

ajaxFileUpload.js 很多同名的，因为做出来一个很容易。

我用的是这个:https://github.com/carlcarl/AjaxFileUpload

下载地址在这里：http://files.cnblogs.com/files/kissdodog/ajaxfileupload_JS_File.rar

AjaxFileUpload.js并不是一个很出名的插件，只是别人写好的放出来供大家用，原理都是创建隐藏的表单和iframe然后用JS去提交，获得返回值。

当初做了个异步上传的功能，选择它因为它的配置方式比较像jQuery的AJAX，我很喜欢。

评论里面说到的不行。那是因为我们用的不是同一个js。我上github搜AjaxFileUpload出来很多类似js。

ajaxFileUpload是一个异步上传文件的jQuery插件

　　传一个不知道什么版本的上来，以后不用到处找了。

　　语法：$.ajaxFileUpload([options])

　　options参数说明：

1、url　　　　　　　　　　上传处理程序地址。　　
2，fileElementId　　　　　需要上传的文件域的ID，即<input type="file">的ID。
3，secureuri　　　　　　　是否启用安全提交，默认为false。
4，dataType　　　　　　　服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。
5，success　　　　　　　　提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
6，error　　　　　　　　　提交失败自动执行的处理函数。
7，data 　　　　　　　　　自定义参数。这个东西比较有用，当有数据是与上传的图片相关的时候，这个东西就要用到了。
8, type 　　　　　　　　　当要提交自定义参数时，这个参数要设置成post

错误提示:

1，SyntaxError: missing ; before statement错误
　　如果出现这个错误就需要检查url路径是否可以访问
2，SyntaxError: syntax error错误
　　如果出现这个错误就需要检查处理提交操作的服务器后台处理程序是否存在语法错误
3，SyntaxError: invalid property id错误
　　如果出现这个错误就需要检查文本域属性ID是否存在
4，SyntaxError: missing } in XML expression错误
　　如果出现这个错误就需要检查文件name是否一致或不存在
5，其它自定义错误
　　大家可使用变量$error直接打印的方法检查各参数是否正确，比起上面这些无效的错误提示还是方便很多。

　　使用方法：

　　第一步：先引入jQuery与ajaxFileUpload插件。注意先后顺序，这个不用说了，所有的插件都是这样。

    <script src="jquery-1.7.1.js" type="text/javascript"></script>
    <script src="ajaxfileupload.js" type="text/javascript"></script>

　　第二步：HTML代码：

<body>
    <p><input type="file" id="file1" name="file" /></p>
    <input type="button" value="上传" />
    <p><img id="img1" alt="上传成功啦" src="" /></p>
</body>

　　第三步：JS代码

    <script src="jquery-1.7.1.js" type="text/javascript"></script>
    <script src="ajaxfileupload.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(":button").click(function () {
                ajaxFileUpload();
            })
        })
        function ajaxFileUpload() {
            $.ajaxFileUpload
            (
                {
                    url: '/upload.aspx', //用于文件上传的服务器端请求地址
                    secureuri: false, //是否需要安全协议，一般设置为false
                    fileElementId: 'file1', //文件上传域的ID
                    dataType: 'json', //返回值类型 一般设置为json
                    success: function (data, status)  //服务器成功响应处理函数
                    {
                        $("#img1").attr("src", data.imgurl);
                        if (typeof (data.error) != 'undefined') {
                            if (data.error != '') {
                                alert(data.error);
                            } else {
                                alert(data.msg);
                            }
                        }
                    },
                    error: function (data, status, e)//服务器响应失败处理函数
                    {
                        alert(e);
                    }
                }
            )
            return false;
        }
    </script>

　　　　第四步：后台页面upload.aspx代码：

        protected void Page_Load(object sender, EventArgs e)
        {
            HttpFileCollection files = Request.Files;
            string msg = string.Empty;
            string error = string.Empty;
            string imgurl;
            if (files.Count > 0)
            {
                files[0].SaveAs(Server.MapPath("/") + System.IO.Path.GetFileName(files[0].FileName));
                msg = " 成功! 文件大小为:" + files[0].ContentLength;
                imgurl = "/" + files[0].FileName;
                string res = "{ error:'" + error + "', msg:'" + msg + "',imgurl:'" + imgurl + "'}";
                Response.Write(res);
                Response.End();
            }
        }

修复版本：

jQuery.extend({createUploadIframe:function(d,b){var a="jUploadFrame"+d;var c='<iframe id="'+a+'" name="'+a+'" style="position:absolute; top:-9999px; left:-9999px"';if(window.ActiveXObject){if(typeof b=="boolean"){c+=' src="'+"javascript:false"+'"'}else{if(typeof b=="string"){c+=' src="'+b+'"'}}}c+=" />";jQuery(c).appendTo(document.body);return jQuery("#"+a).get(0)},createUploadForm:function(a,j,d){var h="jUploadForm"+a;var c="jUploadFile"+a;var b=jQuery('<form  action="" method="POST" name="'+h+'" id="'+h+'" enctype="multipart/form-data"></form>');if(d){for(var e in d){if(d[e].name!=null&&d[e].value!=null){jQuery('<input type="hidden" name="'+d[e].name+'" value="'+d[e].value+'" />').appendTo(b)}else{jQuery('<input type="hidden" name="'+e+'" value="'+d[e]+'" />').appendTo(b)}}}var f=jQuery("#"+j);var g=jQuery(f).clone();jQuery(f).attr("id",c);jQuery(f).before(g);jQuery(f).appendTo(b);jQuery(b).css("position","absolute");jQuery(b).css("top","-1200px");jQuery(b).css("left","-1200px");jQuery(b).appendTo("body");return b},ajaxFileUpload:function(k){k=jQuery.extend({},jQuery.ajaxSettings,k);var a=new Date().getTime();var b=jQuery.createUploadForm(a,k.fileElementId,(typeof(k.data)=="undefined"?false:k.data));var i=jQuery.createUploadIframe(a,k.secureuri);var h="jUploadFrame"+a;var j="jUploadForm"+a;if(k.global&&!jQuery.active++){jQuery.event.trigger("ajaxStart")}var c=false;var f={};if(k.global){jQuery.event.trigger("ajaxSend",[f,k])}var d=function(l){var p=document.getElementById(h);try{if(p.contentWindow){f.responseText=p.contentWindow.document.body?p.contentWindow.document.body.innerHTML:null;f.responseXML=p.contentWindow.document.XMLDocument?p.contentWindow.document.XMLDocument:p.contentWindow.document}else{if(p.contentDocument){f.responseText=p.contentDocument.document.body?p.contentDocument.document.body.innerHTML:null;f.responseXML=p.contentDocument.document.XMLDocument?p.contentDocument.document.XMLDocument:p.contentDocument.document}}}catch(o){jQuery.handleError(k,f,null,o)}if(f||l=="timeout"){c=true;var m;try{m=l!="timeout"?"success":"error";if(m!="error"){var n=jQuery.uploadHttpData(f,k.dataType);if(k.success){k.success(n,m)}if(k.global){jQuery.event.trigger("ajaxSuccess",[f,k])}}else{jQuery.handleError(k,f,m)}}catch(o){m="error";jQuery.handleError(k,f,m,o)}if(k.global){jQuery.event.trigger("ajaxComplete",[f,k])}if(k.global&&!--jQuery.active){jQuery.event.trigger("ajaxStop")}if(k.complete){k.complete(f,m)}jQuery(p).unbind();setTimeout(function(){try{jQuery(p).remove();jQuery(b).remove()}catch(q){jQuery.handleError(k,f,null,q)}},100);f=null}};if(k.timeout>0){setTimeout(function(){if(!c){d("timeout")}},k.timeout)}try{var b=jQuery("#"+j);jQuery(b).attr("action",k.url);jQuery(b).attr("method","POST");jQuery(b).attr("target",h);if(b.encoding){jQuery(b).attr("encoding","multipart/form-data")}else{jQuery(b).attr("enctype","multipart/form-data")}jQuery(b).submit()}catch(g){jQuery.handleError(k,f,null,g)}jQuery("#"+h).load(d);return{abort:function(){}}},uploadHttpData:function(r,type){var data=!type;if(!type){data=r.responseText}if(type=="xml"){data=r.responseXML}if(type=="script"){jQuery.globalEval(data)}if(type=="json"){data=r.responseText;var start=data.indexOf(">");if(start!=-1){var end=data.indexOf("<",start+1);if(end!=-1){data=data.substring(start+1,end)}}eval("data = "+data)}if(type=="html"){jQuery("<div>").html(data).evalScripts()}return data},handleError:function(b,d,a,c){if(b.error){b.error.call(b.context||b,d,a,c)}if(b.global){(b.context?jQuery(b.context):jQuery.event).trigger("ajaxError",[d,b,c])}}});