对Ajax连接的认识~为毛不能上传文件！！！

标签：

        最近做毕设的时候需要用到上传图片的功能，但是我的毕设全部的传输都是基于ajax的请求，百度了一圈发现TMD居然说ajax不能上传文件！！当时我就不乐意了啊，那难道其他人都用的是黑科技吗？！又来网上的大牛告诉说用jquery的一个插件就可以完成，百度了一下原来叫--ajaxfileupload.js

         这又是个什么鬼！（╯‵□′）╯︵┴─┴为毛要用插件，来来来~ajax咋俩聊聊，你为毛不能上传文件来着？

         对于ajax是如何实现的我想大家都很清楚了，首先得到XmlHttpRequest对象实例的一个引用，可以创建一个新的XmlHttpRequest的实例。然后告诉XmlHttpRequest对象,那个函数回处理XmlHttpRequest对象的状态的改变.为此要把对象的 onreadystatechange属性设置为指向JavaScript的指针.接着指定请求属性.XmlHttpRequest对象的Open()方法会指定将发送的请求.最后将请求发送给服务器.XmlHttpRequest对象的send()方法将请求发送到目标资源。下面是我在某前辈的博客里找到的图片，这样更直观一些，谢谢~

        属性ajax的人肯定对XmlHttpRequest 对象不陌生吧，度娘告诉我说ajax的核心就是这个对象，那么我们就来看看XmlHttpRequest对象是如何上传数据的吧~

// 首先我们先创建一个对象咯
var xmlHttp;
    function createXMLHttpRequest(){
        if(window.ActiveXObject){
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    else if(window.XMLHttpRequest){

            xmlHttp = new XMLHttpRequest();
        }
    }
// 接着我们定义发送请求的方法
function AddNumber(){
    createXMLHttpRequest();
    var url= "AddHandler.ashx?num1="+document.getElementById("num1").value+
                "&num2="+document.getElementById("num2").value;
    xmlHttp.open("GET",url,true);
    xmlHttp.onreadystatechange=ShowResult;
    xmlHttp.send(null);
}

      当然，ajax还有很多可说的，但是今天在这里单纯的是讨论一下在ajax中数据到底是如何发送到后台的呢？看过很多前辈的博客和文档上都说其实ajax发送的是字符类型的对象，那这样就很好理解为什么无法上传文件这样二进制的东西了~比较不能把二进制转成字符串发吧…..（说不定真能额…..）但是又看到又说现在的HTML5可以原生的上传文件了，不过目前不是所有浏览器都支持的呀~那还不能算是彻彻底底的解决方案咯~

      既然不能上传二进制文件，那之前的神器--ajaxfileupload.js又是如何完成这个看似“不可能”的任务的呢？

      打开ajaxfileupload.js就会很明白的看懂里面说的啦~这样引用一位前辈的博客http://blog.csdn.net/it_man/article/details/43800957这里面有对这个js很详细的说明了，说白了~原来这个神器也不是通过ajax的方式上传的呀~其实，这个插件的原理就是动态的生成一个隐藏的iframe来提交的数据，在数据提交完成后再悄悄的删除掉，可是在我实际的使用中发现这个插件一次只能上传一个文件额，对于有多文件上传需求的我来说很不和谐额（╯‵□′）╯︵┴─┴

       那我们就来改造改造这个插件吧~为什么一次只能上传一个呢？是因为在插件中作者一次只取了一个元素的ID，那么我们就让它一次多取几个ID吧~

//var oldElement = jQuery(‘#‘ + fileElementId);
//var newElement = jQuery(oldElement).clone();
//jQuery(oldElement).attr(‘id‘, fileId);
//jQuery(oldElement).before(newElement);
//jQuery(oldElement).appendTo(form);

 if(typeof(fileElementId) == ‘string‘){
         fileElementId = [fileElementId];
 }
 for(var i in fileElementId){
         var oldElement = jQuery(‘#‘ + fileElementId[i]);
         var newElement = jQuery(oldElement).clone();
         jQuery(oldElement).attr(‘id‘, fileId);
          jQuery(oldElement).before(newElement);
          jQuery(oldElement).appendTo(form);
 }

      下面被我注释掉的地方就是作者原来写的，而我在下面从新改的是首先判断传人的值是否是一个字符串，如果是字符串那么就继续按照以前的方式来处理，而当上传多个文件的时候就通过循环来一个个的取出添加，这样既保持了原理的写法，也同时兼容了多个ID的传人。

fileElementId: ‘fileID‘,//这是原始的使用方法，一次传人一个值


fileElementId:[‘file1‘,‘file2‘,‘file3‘],//这个是新的写法，一个数组的形式

        这样就完成了我们的需求啦~那么今天的记录就到这里了~其实这些都已经是烂大街的东西了，很多地方都有说明了，我在这里记录的并不仅仅是如何去使用，而且我踩坑的这次过程，如何思考，如何去想解决办法~o(╯□╰)o希望以后能像这些前辈一样早发现早治疗了~

对Ajax连接的认识~为毛不能上传文件！！！

标签：

原文地址：http://www.cnblogs.com/fuhuixiang/p/4385479.html