zoukankan      html  css  js  c++  java
  • 对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希望以后能像这些前辈一样早发现早治疗了~

  • 相关阅读:
    洛谷P2805 植物大战僵尸
    洛谷P4307 球队收益
    bzoj4842 Delight for a Cat
    洛谷P2053 修车
    bzoj2561 最小生成树
    bzoj3114 LCM Pair Sum
    洛谷P4486 Kakuro
    bzoj3698 XWW的难题
    关于oracle数据库
    toString方法的用法
  • 原文地址:https://www.cnblogs.com/fuhuixiang/p/4385479.html
Copyright © 2011-2022 走看看