jQuery插件ajaxfileupload.js源码与使用

2021-07-08 12:06
阅读：570
标签：response blog rem 系统完成 form gettime eth date
在网页应用中，一般会用到上传文件或者图片什么的到服务器，那么可以用ajaxfileupload.js，但是在使用ajaxfileupload.js时候，当服务器返回的json带有&符号的时候，返回的data数据里面所有的&被转义成了&。
下面的ajaxfileupload.js是经过修改的文件上传库。
jQuery.extend({
    /** createUploadIframe 创建上传的iframe
     * @param id 传递当前系统的时间字符串
     * @param uri 传入的json对象的一个参数
     * */
    createUploadIframe: function (id, uri) {
        //iframe添加一个id
        var frameId = ‘jUploadFrame‘ + id;
        //创建iframe元素
        var iframeHtml = ‘;
        <span>if</span> (window.ActiveXObject) {<span>//</span><span>判断浏览器是否支持ActiveX控件</span>
            <span>if</span> (<span>typeof</span> uri == ‘boolean‘<span>) {
                </span><span>//</span><span>阻止提交数据</span>
                iframeHtml += ‘ src="http://www.soscw.com/‘ + ‘javascript:false‘ + ‘"‘<span>;
            }
            </span><span>else</span> <span>if</span> (<span>typeof</span> uri == ‘string‘<span>) {
                iframeHtml </span>+= ‘ src="http://www.soscw.com/‘ + uri + ‘"‘<span>;
            }
        }
        iframeHtml </span>+= ‘ /&gt;‘<span>;
        </span><span>//</span><span>将动态iframe追加到body中</span>
<span>        jQuery(iframeHtml).appendTo(document.body);
        </span><span>//</span><span>返回iframe对象</span>
        <span>return</span> jQuery(‘#‘ + frameId).get(0<span>);
    },

    </span><span>/*</span><span>* createUploadForm 创建form
     * @param id 当前系统时间字符串
     * @param fileElementId 为页面input type=‘file‘的id
     * @param data 向服务器传递的值 如 data:{key1:value1,key2:value2}
     * </span><span>*/</span><span>
    createUploadForm: </span><span>function</span><span> (id, fileElementId, data) {
        </span><span>//</span><span>给form添加id</span>
        <span>var</span> formId = ‘jUploadForm‘ +<span> id;
        </span><span>//</span><span>给type为file的上传按钮添加id</span>
        <span>var</span> fileId = ‘jUploadFile‘ +<span> id;
        </span><span>//</span><span>创建form元素</span>
        <span>var</span> form = jQuery(‘<form action="" method="POST" name="‘ + formId + ‘" id="‘ + formId + ‘" enctype="multipart/form-data"></form>‘<span>);
        </span><span>if</span><span> (data) {
            </span><span>for</span> (<span>var</span> i <span>in</span><span> data) {
                </span><span>//</span><span>根据data提交的数据，创建隐藏域</span>
                jQuery(‘<input type="hidden" name="‘ + i + ‘" value="‘ + data[i] + ‘">‘<span>).appendTo(form);
            }
        }
        </span><span>//</span><span>得到页面中的<input type="‘file‘">对象</span>
        <span>if</span> (<span>typeof</span>(fileElementId) == ‘string‘<span>) {  
            fileElementId </span>= fileElementId.split(‘,‘<span>);
        }
        </span><span>for</span> (<span>var</span> i=0,j = fileElementId.length;i ) {
          <span>var</span> oldElement = jQuery(‘#‘ +<span> fileElementId[i]);
          </span><span>//</span><span>克隆页面中的<input type="‘file‘">对象</span>
          <span>var</span> newElement = jQuery(oldElement).clone(<span>true</span><span>);
          </span><span>//</span><span>修改原对象的id</span>
          jQuery(oldElement).attr(‘id‘<span>, fileId);
          </span><span>//</span><span>在原对象前插入克隆对象</span>
<span>          jQuery(oldElement).before(newElement);
          </span><span>//</span><span>把原对象插入到动态form的结尾处</span>
<span>          jQuery(oldElement).appendTo(form);
        }
       
        </span><span>//</span><span>给动态form添加样式</span>
        jQuery(form).css(‘position‘, ‘absolute‘<span>);
        jQuery(form).css(</span>‘top‘, ‘-1200px‘<span>);
        jQuery(form).css(</span>‘left‘, ‘-1200px‘<span>);
        jQuery(form).appendTo(</span>‘body‘<span>);
        </span><span>return</span><span> form;
    },

    </span><span>/*</span><span>* ajaxFileUpload ajax上传请求
     * @param s 传入一些ajax的参数
     * </span><span>*/</span><span>
    ajaxFileUpload: </span><span>function</span><span> (s) {
        s </span>=<span> jQuery.extend({}, jQuery.ajaxSettings, s);
        </span><span>var</span> id = <span>new</span><span> Date().getTime();
        </span><span>//</span><span>创建动态form</span>
        <span>var</span> form = jQuery.createUploadForm(id, s.fileElementId, (<span>typeof</span> (s.data) == ‘undefined‘ ? <span>false</span><span> : s.data));
        </span><span>//</span><span>创建动态iframe s.secureuri 是否需要安全协议，一般置为false</span>
        <span>var</span> io =<span> jQuery.createUploadIframe(id, s.secureuri);
        </span><span>//</span><span>动态iframe的id</span>
        <span>var</span> frameId = ‘jUploadFrame‘ +<span> id;
        </span><span>//</span><span>动态form的id</span>
        <span>var</span> formId = ‘jUploadForm‘ +<span> id;

        </span><span>//</span><span>当jQuery开始一个ajax请求时发生，global表示是否触发全局ajax事件，默认是true；</span>
        <span>if</span> (s.global &amp;&amp; !jQuery.active++<span>) {
            </span><span>//</span><span>触发ajaxStart方法</span>
            jQuery.event.trigger("ajaxStart"<span>);
        }
        </span><span>//</span><span>请求完成标志</span>
        <span>var</span> requestDone = <span>false</span><span>;
        </span><span>//</span><span> 创建请求对象</span>
        <span>var</span> xml =<span> {};
        </span><span>if</span><span> (s.global){
            </span><span>//</span><span>触发ajaxSend方法</span>
            jQuery.event.trigger("ajaxSend"<span>, [xml, s]);
        }

        </span><span>//</span><span>回调函数</span>
        <span>var</span> uploadCallback = <span>function</span><span> (isTimeout) {
            </span><span>//</span><span>得到iframe对象</span>
            <span>var</span> io =<span> document.getElementById(frameId);
            </span><span>try</span><span> {
                </span><span>//</span><span>动态iframe所在窗口对象是否存在</span>
                <span>if</span><span> (io.contentWindow) {
                    </span><span>if</span>(s.dataType==‘text‘<span>){
                         xml.responseText </span>= io.contentWindow.document.body ? io.contentWindow.document.body.textContent : <span>null</span><span>;
                     }</span><span>else</span><span>{
                         xml.responseText </span>= io.contentWindow.document.body ? io.contentWindow.document.body.innerHTML : <span>null</span><span>;
                     }
                   
                    xml.responseXML </span>= io.contentWindow.document.XMLDocument ?<span> io.contentWindow.document.XMLDocument : io.contentWindow.document;
                }
                </span><span>//</span><span>动态iframe的文档对象是否存在</span>
                <span>else</span> <span>if</span><span> (io.contentDocument) {
                    </span><span>if</span>(s.dataType==‘text‘<span>){
                          xml.responseText </span>= io.contentDocument.document.body ? io.contentDocument.document.body.textContent : <span>null</span><span>;
                     }</span><span>else</span><span>{
                         xml.responseText </span>= io.contentDocument.document.body ? io.contentDocument.document.body.innerHTML : <span>null</span><span>;
                     }
                    xml.responseText </span>= io.contentDocument.document.body ? io.contentDocument.document.body.innerHTML : <span>null</span><span>;
                    xml.responseXML </span>= io.contentDocument.document.XMLDocument ?<span> io.contentDocument.document.XMLDocument : io.contentDocument.document;
                }
            } </span><span>catch</span><span> (e) {
                jQuery.handleError(s, xml, </span><span>null</span><span>, e);
            }

            </span><span>//</span><span>xml变量被赋值或者isTimeout == "timeout"都表示请求发出，并且有响应</span>
            <span>if</span> (xml || isTimeout == "timeout"<span>) {
                </span><span>//</span><span>请求完成</span>
                requestDone = <span>true</span><span>;
                </span><span>var</span><span> status;
                </span><span>try</span><span> {
                    </span><span>//</span><span>如果不是“超时”，表示请求成功</span>
                    status = isTimeout != "timeout" ? "success" : "error"<span>;
                    </span><span>//</span><span> Make sure that the request was successful or notmodified</span>
                    <span>if</span> (status != "error"<span>) {
                        </span><span>//</span><span> process the data (runs the xml through httpData regardless of callback)</span>
                        <span>var</span> data =<span> jQuery.uploadHttpData(xml, s.dataType);
                        </span><span>//</span><span> If a local callback was specified, fire it and pass it the data</span>
                        <span>if</span><span> (s.success){
                            </span><span>//</span><span>执行上传成功的操作</span>
<span>                            s.success(data, status);
                        }
                        </span><span>//</span><span> Fire the global callback</span>
                        <span>if</span><span> (s.global){
                            jQuery.event.trigger(</span>"ajaxSuccess"<span>, [xml, s]);
                        }

                    } </span><span>else</span><span>{
                        jQuery.handleError(s, xml, status);
                    }
                }
                </span><span>catch</span><span> (e) {
                    status </span>= "error"<span>;
                    jQuery.handleError(s, xml, status, e);
                }
                </span><span>if</span><span> (s.global){
                    </span><span>//</span><span> The request was completed</span>
                    jQuery.event.trigger("ajaxComplete"<span>, [xml, s]);
                }
                </span><span>if</span> (s.global &amp;&amp; ! --<span>jQuery.active){
                    jQuery.event.trigger(</span>"ajaxStop"<span>);
                }
                </span><span>if</span><span> (s.complete){
                    s.complete(xml, status);
                }
                </span><span>//</span><span>移除iframe的事件处理程序</span>
<span>                jQuery(io).unbind();
                setTimeout(</span><span>function</span> () {<span>//</span><span>设置超时时间</span>
                    <span>try</span><span> {
                        </span><span>//</span><span>移除动态iframe与动态form</span>
<span>                        jQuery(io).remove();
                        jQuery(form).remove();
                    }</span><span>catch</span><span> (e) {
                        jQuery.handleError(s, xml, </span><span>null</span><span>, e);
                    }
                }, </span>100<span>)
                xml </span>= <span>null</span><span>
            }
        }

        </span><span>//</span><span>超时检测</span>
        <span>if</span> (s.timeout &gt; 0<span>) {
            setTimeout(</span><span>function</span><span> () {
                </span><span>//</span><span>如果请求仍未完成，就发送超时信号</span>
                <span>if</span> (!requestDone) uploadCallback("timeout"<span>);
            }, s.timeout);
        }
        </span><span>try</span><span> {
            </span><span>var</span> form = jQuery(‘#‘ +<span> formId);
            jQuery(form).attr(</span>‘action‘, s.url);<span>//</span><span>传入的ajax页面导向url</span>
            jQuery(form).attr(‘method‘, ‘POST‘);<span>//</span><span>设置提交表单方式</span>
            jQuery(form).attr(‘target‘, frameId);<span>//</span><span>返回的目标iframe，就是创建的动态iframe</span>
            <span>if</span><span> (form.encoding) {
                </span><span>//</span><span>选择编码方式</span>
                jQuery(form).attr(‘encoding‘, ‘multipart/form-data‘<span>);
            }</span><span>else</span><span> {
                jQuery(form).attr(</span>‘enctype‘, ‘multipart/form-data‘<span>);
            }

            jQuery(form).submit();</span><span>//</span><span>提交form表单</span>
<span>
        }</span><span>catch</span><span> (e) {
            jQuery.handleError(s, xml, </span><span>null</span><span>, e);
        }
        jQuery(</span>‘#‘ + frameId).load(uploadCallback); <span>//</span><span>ajax 请求从服务器加载数据，同时传入回调函数</span>
        <span>return</span> { abort: <span>function</span><span> () { } };
    },

    uploadHttpData: </span><span>function</span><span> (r, type) {
        </span><span>var</span> data = !<span>type;
        </span><span>//</span><span> If the type is "script", eval it in global context</span>
        data = type == "xml" || data ?<span> r.responseXML : r.responseText;
        </span><span>if</span> (type == "script"<span>){
            jQuery.globalEval(data);
        }
        </span><span>//</span><span> Get the JavaScript object, if JSON is used.</span>
        <span>if</span> (type == "json"<span>){
            eval(</span>"data = " +<span> data);
        }
        </span><span>if</span> (type == "html"<span>){
            jQuery(</span>"<div>"<span>).html(data).evalScripts();
        }
        </span><span>return</span><span> data;
    },
    handleError: </span><span>function</span><span>( s, xhr, status, e ){
        </span><span>//</span><span> If a local callback was specified, fire it</span>
        <span>if</span><span> ( s.error ) {
            s.error.call( s.context </span>||<span> s, xhr, status, e );
        }
        </span><span>//</span><span> Fire the global callback</span>
        <span>if</span><span> ( s.global ) {
            (s.context </span>? jQuery(s.context) : jQuery.event).trigger( "ajaxError"<span>, [xhr, s, e] );
        }
    }
})</span>
</div>
<p>下面是调用方式：</p>
<div>
<pre><span>$.ajaxFileUpload({
    url: </span>‘ps.php‘<span>,
    </span><span>//</span><span>一般设置为false</span>
    secureuri: <span>false</span><span>,           
    data:{
        email:email
    },
    </span><span>//</span><span>文件上传控件的id属性</span>
    fileElementId: $("input#xxx").attr("id"<span>), 
    </span><span>//</span><span>返回值类型 一般设置为json,但是如果返回的数据有&amp;等特殊符号，这儿改成text</span>
    dataType: ‘text‘<span>,
    success: </span><span>function</span><span> (data, status)  {
        </span><span>//</span><span>如果dataType为text，那么这儿需要把返回的字符串转成对象</span>
        data =<span> JSON.parse(data);
    },
    error: </span><span>function</span><span> (data, status, e){
        console.log(e);
    }
 })</span></pre>
</div>
<p>注：如果有&amp;符号返回，这dataType改成text，然后把返回的data字符串通过JSON.parse()处理。<br>参考地址：http://www.oschina.net/code/snippet_105637_50057</p>
<p>jQuery插件ajaxfileupload.js源码与使用</p>
<p>标签：response   blog   rem   系统   完成   form   gettime   eth   date   </p>
<p>原文地址：http://www.cnblogs.com/moqiutao/p/7097208.html</p>
上一篇：jquery请求json数据
下一篇：ASP.NET MVC Bundling and RequireJS
文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：jQuery插件ajaxfileupload.js源码与使用
文章链接：http://soscw.com/essay/102369.html
亲，登录后才可以留言！
jQuery插件ajaxfileupload.js源码与使用

评论

热门文章

推荐文章

最新文章

置顶文章
