对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希望以后能像这些前辈一样早发现早治疗了~

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。