Heim > Backend-Entwicklung > PHP-Tutorial > php中通过Ajax如何实现异步文件上传的代码实例_PHP教程

php中通过Ajax如何实现异步文件上传的代码实例_PHP教程

WBOY
Freigeben: 2016-07-21 15:29:22
Original
966 Leute haben es durchsucht

1:取得file对象
2:读取2进制数据
3:模拟http请求,把数据发送出去(这里通常比较麻烦)
在forefox下使用 xmlhttprequest 对象的 sendasbinary 方法发送数据;
4:完美实现
遇到的问题
目前仅有 firefox 可以正确上传文件。(chrome也可以采google.gears上传)
对于从firefox和chrome下读取到的文件数据好像不一样(不知道是否是调试工具的原因)
chrome以及其他高级浏览器没有 sendasbinary 方法 只能使用 send 方法发送数据,有可能是上面的原因导致无法正确上传。(经过测试普通文本文件可以正确上传)

复制代码 代码如下:





html5 file and filereader





(把图片拖拽到这里)利用 filereader 获取文件 base64 编码











'
var log = function(msg){
//console['log'](msg);
document.getelementbyid('log').innerhtml += '
  • '+ msg +'
  • ';
    }
    var dp = function(){
    var defconfig = {
    dropwrap : window
    }
    this.init.apply(this, [defconfig]);
    this.file = null;
    }
    dp.prototype = {
    init:function(args){
    var dropwrap = args.dropwrap;
    var _this = this;
    dropwrap.addeventlistener("dragenter", this._dragenter, false);
    dropwrap.addeventlistener("dragover", this._dragover, false);
    dropwrap.addeventlistener('drop', function(e){_this.readfile.call(_this,e)} , false);
    log('window drop bind--ok');
    },
    _dragenter:function(e){e.stoppropagation();e.preventdefault();},
    _dragover:function(e){e.stoppropagation();e.preventdefault();},
    readfile:function(e){
    e.stoppropagation();
    e.preventdefault();
    var dt = e.datatransfer;
    var files = dt.files;
    for(var i = 0; ivar html = html.slice();
    html = this.writeheader(files[i], html);
    this.read(files[i], html);
    }
    },
    read:function(file, h){
    var type = file.type;
    var reader = new filereader();
    reader.onprogress = function(e){
    if (e.lengthcomputable){
    log('progress: ' + math.ceil(100*e.loaded/file.size) +'%')
    }
    };
    reader.onloadstart = function(e){
    log('onloadstart: ok');
    };
    reader.onloadend = function(e){
    var _result = e.target.result;
    //console['log'](e.target);
    log('data uri--ok');
    var d = document.createelement('div');
    h = h.replace('$filebase64$', _result);
    if(/image/.test(file.type)){
    h = h.replace('$data$',_result);
    }
    d.innerhtml = h;
    document.getelementbyid('baseinfo').appendchild(d);
    };
    reader.readasdataurl(file); // www.3ppt.com base 64 编码
    return;
    },
    writeheader:function(file, h){
    log(file.filename + '+' + (file.size/1024));
    return h.replace('$filename$', file.filename).replace("$filesize$",(file.size/1024)+'kb').replace("$filetype$",file.type);
    }
    }
    new dp();
    })()
    // -->


    filereader对象
    var filereader = new filereader();
    filereader.onloadend = function(){
    console.log(this.readystate); // 这个时候 应该是 2
    console.log(this.result); 读取完成回调函数,数据保存在result中
    }
    filereader.readasbinarystring(file);// 开始读取2进制数据 异步 参数为file 对象
    //filereader.readasdataurl(file); // 读取base64
    //filereader.readastext(file);//读取文本信息

    www.bkjia.comtruehttp://www.bkjia.com/PHPjc/323389.htmlTechArticle1:取得file对象 2:读取2进制数据 3:模拟http请求,把数据发送出去(这里通常比较麻烦) 在forefox下使用 xmlhttprequest 对象的 sendasbinary 方法发送...
    Quelle:php.cn
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage