JQuery插件ajaxFileUpload.js

更多知识：
http://blog.csdn.net/cckevincyh/article/details/70198470
https://www.cnblogs.com/wkrbky/p/6228779.html
###iframe 标签

1. iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
2. iframe元素也就是文档中的文档。

###window 对象
**浏览器会在其打开一个 HTML 文档时创建一个对应的 window 对象。**但是，如果一个文档定义了一个或多个框架(即，包含一个或多个 frame 或 iframe 标签)，浏览器就会为原始文档创建一个 window 对象，再为每个框架创建额外的 window 对象。这些额外的对象是原始窗口的 子窗口，可能被原始窗口中发生的事件所影响。例如，关闭原始窗口将导致关闭全部子窗口。如果想要创建新窗口(以及对应的 window 对象)，可以使用像 open, showModalDialog 和 showModelessDialog 这样的方法。

###IFrame对象的contentWindow 属性

1. 定义：该属性返回的是iframe的window对象，所以后面可以接着调用document方法，再接着调用getElementByTagName。那么就可以对iframe里面的元素进行操作了。
2. 语法：iframeObject.contentWindow
3. 所有主要浏览器都支持 contentWindow 属性。
   更多知识：http://blog.csdn.net/skydar/article/details/51207110

###Iframe对象的contentDocument 属性

1. 定义：contentDocument 属性能够以 HTML 对象来返回 iframe 中的文档。
2. 语法：iframeObject.contentDocument

###各浏览器Iframe对contentWindow、contentDocument、document属性测试

更多知识：http://blog.csdn.net/xiaofanku/article/details/10202129

###pre标签

1. 用途：可定义预格式化的文本，用来表示计算机的源代码 。
2. 具体：被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
3. pre 元素中允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。当把其他标签(比如 < a > 标签)放到 < pre > 块中时，就像放在 HTML/XHTML 文档的其他部分中一样即可。
4. 提示:在 W3School 中，非常多页面中的源代码实例都是通过 < pre > 标签定义的，您可以参考这些页面，学习如何使用该标签。我们甚至把 < pre > 标签与 < code > 标签结合起来使用，以获得更加精确的语义。

###jQuery的最核心的函数
$(expression,[context])\ast \ast API文档中说了：默认情况下,如果没有指定context参数，$()将在当前的 HTML document中查找 DOM 元素；如果指定了 context 参数，如一个 DOM元素集或jQuery对象**，那就会在这个 context 中查找。在jQuery 1.3.2以后，其返回的元素顺序等同于在context中出现的先后顺序。

###jQuery ajax - ajaxError() 方法
ajaxError() 方法在 AJAX 请求发生错误时执行函数。它是一个 Ajax 事件。
语法：$(selector).ajaxError(function(event,xhr,options,exc))
event - 包含 event 对象
xhr - 包含 XMLHttpRequest 对象
options - 包含 AJAX 请求中使用的选项
exc - 包含 JavaScript exception

###在jQuery中，$相当于jQuery
$(“input”)相当于jQuery(“input”)

###jQuery 事件 - trigger() 方法
5. 语法：$(selector).trigger(event,[param1,param2,...])
6. 触发 input 元素的 myfunction 事件：
$("button").click(function(){ $("input").trigger("myfunction"); });

###src= javascript:false 是什么意思?
可能就是在进行加载的时候,把返回值设置为false,后面的操作就不再进行了。

###JavaScript eval() 函数
eval(String) 函数可计算某个字符串，并执行其中的的 JavaScript 代码。

###jQuery.extend()函数
5. 简介：是Jquery的扩展方法。
6. extend(dest,src1,src2,src3...);
它的含义是将src1,src2,src3…合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后，是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构，可以如下使用：

var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数。

3.$.extend(src)
上述的extend方法原型中的dest参数是可以省略的，如果省略了，则该方法就只能有一个src参数，而且是将该src合并到调用extend方法的对象中去。

$.extend({
  hello:function(){alert('hello');}
  });

更多知识：http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html

###jquery 如何定义全局变量
7. 在函数外部：var xxx='全局变量';
8. 在函数内部：var window.xxx='全局变量';
9. window["ss"]="a"; window["hh"]="b";

###JS中的call()和apply()方法
1.call方法:
语法：obj.error.call([thisObj[,arg1[, arg2[, [,.argN]]]]])
**定义：调用一个对象（比如obj）的一个方法（比如error），以另一个对象thisObj替换当前对象（obj）。 **

###JavaScript global 属性

1. 语法RegExpObject.global
2. 定义和用法
   global 属性用于返回正则表达式是否具有标志 “g”。
   它声明了给定的正则表达式是否执行全局匹配。
   如果 g 标志被设置，则该属性为 true，否则为 false。

###JavaScript attachEvent()函数

1. 语法：obj.attachEvent(事件类型, 处理函数);
2. 用于HTML内代码层和UI层分离。
3. 比如，给一个按钮增加一个单击事件

myBtn.attachEvent("onclick", myEvent); 
function myEvent(e){  alert("点击了一下");  }

###JavaScript addEventListener()函数

1. 语法：obj.addEventListener(事件类型, 处理函数,参数值);
2. 具体作用与attachEvent()函数一样。

###ajaxStart和ajaxStop
是一种全局的配置。通常用来侦测页面中异步请求的发送/结束。

###(window.ActiveXObject)的作用
用来判断浏览器是否支持ActiveX控件。
ActiveX 控件是用于互联网的很小的程序，有时称为插件程序。它们会允许播放动画，或帮助执行任务，如在 Microsoft Update 安装安全更新，因此可以增强您的浏览体验。
ActiveX是Microsoft对于一系列策略性面向对象程序技术和工具的称呼，其中主要的技术是组件对象模型(COM)。在有目录和其它支持的网络中，COM变成了分布式COM(DCOM)。

###正则表达式

特别字符	描述
.	匹配除换行符 \n 之外的任何单字符
?	匹配前面的子表达式零次或一次，或指明一个非贪婪限定符，等价于 限定符{0,1}
+	匹配前面的子表达式一次或多次,等价于 限定符{1,}
$	匹配输入字符串的结尾位置。如果设置了 RegExp 对象的 Multiline 属性，则 $ 也匹配 ‘\n’ 或 ‘\r’ ，
[	标记一个中括号表达式的开始，如 /Chapter [1-9][0-9]*/
\	将下一个字符标记为或特殊字符、或原义字符、或向后引用、或八进制转义符。例如， ‘n’ 匹配字符 ‘n’。’\n’ 匹配换行符。序列 '\ ’ 匹配 “”，而 ‘\ (’ 则匹配 “(”
{	标记限定符表达式的开始

---

限定符	描述
{n,}	n 是一个非负整数。至少匹配n 次。例如，‘o{2,}’ 不能匹配 “Bob” 中的 ‘o’，但能匹配 “foooood” 中的所有 o。‘o{1,}’ 等价于 ‘o+’。‘o{0,}’ 则等价于 ‘o*’
{n,m}	m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次。例如，“o{1,3}” 将匹配 “fooooood” 中的前三个 o。‘o{0,1}’ 等价于 ‘o?’。请注意在逗号和两个数之间不能有空格

*、+限定符都是贪婪的，因为它们会尽可能多的匹配文字，只有在它们的后面加上一个?就可以实现非贪婪或最小匹配。
更多内容：http://www.runoob.com/regexp/regexp-syntax.html ###jQuery.extend({});

---

###JavaScript RegExp 对象

1. 定义：RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。
2. 直接量语法：/pattern/attributes
3. 创建 RegExp 对象的语法：new RegExp(pattern, attributes);
4. 参数：参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。
   参数 attributes 是一个可选的字符串，包含属性 “g”、“i” 和 “m”，分别用于指定全局匹配、区分大小写的匹配和多行匹配。

###JavaScript exec() 方法
1.定义： exec() 方法用于检索字符串中的正则表达式的匹配。
2. 语法：RegExpObject.exec(string)
3. 参数：string必需。是要检索的字符串。
4. 返回值：返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

###JavaScript test() 方法

1. 定义：一般用于校验文件的格式
2. 语法：正则表达式.test(String)
3. 参数：string必需。是要检索的字符串。
4. 返回值：返回一个布尔值。

###ajaxFileUpload.js解析

jQuery.extend({
   
	handleError : function(req, res, status, exception) {
		console.log("请求失败！执行方法：handleError : function(req, res, status, exception)");
        //如果req.error是存在的，则用新的req取代旧的req
        if (req.error) {
        	req.error.call(req.context || req, res, status, exception);
        }

        // Fire the global callback
        if (req.global) {
            (req.context ? jQuery(req.context) : jQuery.event).trigger(
                    "ajaxError", [ res, req, exception ]);
            console.log("执行ajaxError()方法");
        }
    },

    
    
    
    //id为当前系统时间字符串，secureuri是外部传入的json对象的一个参数secureuri
    createUploadIframe: function(id, secureuri)
    {
    	console.log("创建不可见的iframe标签");
        var frameId = 'jUploadFrame' + id; //给iframe添加一个独一无二的id
        if(window.ActiveXObject) {//判断浏览器是否支持ActiveX控件
            var iframe = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');
            if(typeof secureuri== 'boolean'){
            	iframe.src = 'javascript:false';
            }
            else if(typeof secureuri== 'string'){
            	iframe.src = secureuri;
            }
        }
        else {
            var iframe = document.createElement('iframe');
            iframe.id = frameId;
            iframe.name = frameId;
        }
        //不可见的iframe
        iframe.style.position = 'absolute';
        iframe.style.top = '-1000px';
        iframe.style.left = '-1000px';
     
        document.body.appendChild(iframe); //将动态iframe追加到body中
        return iframe;
    },
    
    
    
    //id为当前系统时间字符串，fileElementId为页面<input type='file' />的id
    createUploadForm: function(id, fileElementId)
    {
    	console.log("创建不可见的form标签");
        var formId = 'jUploadForm' + id;
        var fileId = 'jUploadFile' + id;
        var form = $('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
        var oldElement = $('#' + fileElementId); //得到页面中的<input type='file' />对象
        var newElement = $(oldElement).clone(); //克隆页面中的<input type='file' />对象
        $(oldElement).attr('id', fileId); //修改原对象的id
        $(oldElement).before(newElement); //在原对象前插入克隆对象
        $(oldElement).appendTo(form); //把原对象插入到动态form的结尾处
        //不可见
        $(form).css('position', 'absolute'); //给动态form添加样式，使其浮动起来，
        $(form).css('top', '-1200px');
        $(form).css('left', '-1200px');
        $(form).appendTo('body');  //把动态form插入到body中
        return form;
    },
    
    addOtherRequestsToForm: function(form,data)
    {
        console.log("添加新的请求数据data到表单中");
        // add extra parameter
        var originalElement = $('<input type="hidden" name="" value="">');
        for (var key in data) {
            name = key;
            value = data[key];
            var cloneElement = originalElement.clone();
            cloneElement.attr({'name':name,'value':value});
            $(cloneElement).appendTo(form);
        }
        return form;
    },
    
    //这里req是个json对象，传入一些ajax的参数
    ajaxFileUpload: function(req) {
    	console.log("开始执行ajaxFileUpload(req),req是个json对象，传入一些ajax的参数");
    	req = jQuery.extend({}, jQuery.ajaxSettings, req); //此时的s对象是由jQuery.ajaxSettings和原s对象扩展后的对象
        var id = new Date().getTime(); //取当前系统时间，目的是得到一个独一无二的数字     
        var form = jQuery.createUploadForm(id, req.fileElementId);//创建动态form
        if ( req.data ) form = jQuery.addOtherRequestsToForm(form,req.data);//如果还有其他参数，则将req.data添加到表单中  
        var iframe = jQuery.createUploadIframe(id, req.secureuri); //创建动态iframe
        var frameId = 'jUploadFrame' + id; //动态iframe的id
        var formId = 'jUploadForm' + id; //动态form的id
        
        
        
        //监视req
        if ( req.global && ! jQuery.active++ )
        { //当jQuery开始发送一个ajax请求之前，触发ajaxStart()方法
            jQuery.event.trigger( "ajaxStart" );
            console.log("在 AJAX 请求发送前执行ajaxStart()方法");
        }
        
        
        var requestDone = false; //表示“请求完成”的一个标志
        
        
        var res = {};  
        
        
        console.log("创建一个response对象：var res={}");
        
        if ( req.global ){  //当 AJAX请求即将发送时，触发ajaxSend方法
            jQuery.event.trigger("ajaxSend", [res, req]);
        }    
        
        
               
        //回调函数，监视并获取响应
        var uploadCallback = function(isTimeout)
        {
            var iframe = document.getElementById(frameId);  //得到iframe对象
            try
            {
                if(iframe.contentWindow)
                {   //动态iframe所在窗口对象是否存在//pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体
                	res.responseText = iframe.contentWindow.document.body?iframe.contentWindow.document.body.innerHTML:null; //判断iframe的       body   是否是    定义状态，若为undefined，则xml.responseText赋值为null              
                    res.responseXML = iframe.contentWindow.document.XMLDocument?iframe.contentWindow.document.XMLDocument:iframe.contentWindow.document; //判断iframe的      XMLDocument    是否是     定义状态，若为undefined，则xml.responseXML赋值为iframe的document对象

                }else if(iframe.contentDocument)
                {  //动态iframe的文档对象是否存在
                	res.responseText = iframe.contentDocument.document.body?iframe.contentDocument.document.body.innerHTML:null;
                	res.responseXML = iframe.contentDocument.document.XMLDocument?iframe.contentDocument.document.XMLDocument:iframe.contentDocument.document;
                }
            }catch(exception)
            { 
                jQuery.handleError(req, res, null, exception);
            }
            if ( res || isTimeout == "timeout")//xml变量被赋值或者isTimeout == "timeout"都表示请求发出，并且有响应
            {
                requestDone = true; //请求完成
                var status; //状态“超时”或“不超时”
                try {
                    status = isTimeout != "timeout" ? "success" : "error"; //如果不是“超时”，表示请求成功
                    if ( status != "error" )
                    {
                    	console.log("将json对象从<pre></pre>中取出来");
                    	var data = jQuery.getDataByDataType(res,req.dataType ); //根据传送的type类型，返回json对象，此时返回的data就是后台操作后的返回结果
                        if ( req.success )
                        	req.success( data, status ); //执行上传成功的操作
                        if( req.global )
                            jQuery.event.trigger( "ajaxSuccess", [res, req] ); //触发ajaxSuccess()函数
                    } else
                        jQuery.handleError(req, res, status); //触发handleError()方法
                } catch(exception)
                {
                    status = "error";
                    jQuery.handleError(req, res, status, exception);
                }
                // The request was completed
                if( req.global )
                    jQuery.event.trigger( "ajaxComplete", [res, req] );
                // Handle the global AJAX counter
                if ( req.global && ! --jQuery.active )
                    jQuery.event.trigger( "ajaxStop" );
                // Process result
                if ( req.complete )
                	req.complete(res, status);
                jQuery(iframe).unbind(); //移除iframe的事件处理程序
                setTimeout(function(){ //设置超时时间
                    try
                    {
                        $(iframe).remove(); //移除动态iframe
                        $(form).remove(); //移除动态form

                    } catch(exception)
                    {
                        jQuery.handleError(req, res, null, exception);
                    }

                }, 100);

                res = null;

            }
        }; 
        
        

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

        } catch(exception)
        {
            jQuery.handleError(req, res, null, exception);
        }
        //调用onload()或load()函数加载uploadCallback方法
        if(window.attachEvent){
            document.getElementById(frameId).attachEvent('onload', uploadCallback);
        }
        else{ //如果没有执行window.attachEvent
            document.getElementById(frameId).addEventListener('load', uploadCallback, false);  //ajax 请求从服务器加载数据，同时传入回调函数
        }
        return {abort: function () {}}; //abort意为终止，此处终止该函数

    },

    getDataByDataType: function(res, dataType ) {
        var data="0"; //初始化data
        data = dataType == "xml" || data ? res.responseXML : res.responseText;
        // If the type is "script", eval it in global context
        if ( dataType == "script" )
            jQuery.globalEval(data);//全局变量
        // Get the JavaScript object, if JSON is used.
        if ( dataType == "json" )
        {
            // If you add mimetype in your response,
            // you have to delete the '<pre></pre>' tag.
            // The pre tag in Chrome has attribute, so have to use regex to remove
            var data = res.responseText; //res.responseText
            var rx = new RegExp("<pre.*?>(.*?)</pre>","i"); console.log("正则表达式:"+rx);
            var am = rx.exec(data); console.log("data中与正则表达式匹配的数据："+am);
            //this is the desired data extracted
            var data = (am) ? am[1] : ""; //the only submatch or empty
            console.log(am[1]);
            eval( "data = " + data );
            //data = jQuery.parseJSON(jQuery(data).text());
        }
        if ( dataType == "html" )
            jQuery("<div>").html(data).evalScripts();
        return data;
    }
});