登录  /  注册

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

php中文网
发布: 2016-07-21 15:29:22
原创
775人浏览过

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 方法发送...
    智能AI问答
    PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
    来源:php中文网
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    最新问题
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习
    PHP中文网抖音号
    发现有趣的

    Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号