`
满楼都是我的人
  • 浏览: 11730 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
sblig
文章分类
社区版块
存档分类
最新评论

php结合Ajax实现异步文件上传的代码实例

PHPAjaxChromewebkitFirefox 
阅读更多
php结合Ajax实现异步文件上传的代码实例

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

    <!doctype html >
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>html5 file and filereader</title>
    <link href="html/ui.css" _mce_href="html/ui.css" rel="stylesheet" />
    </head>
    <body>
    <style type="text/css"><!--
    .box{background:#f8f8f8;border:1px solid #ccc;padding:10px;-webkit-box-shadow:#000 0px 0px 4px;-moz-box-shadow:#000 0px 0px 4px;
    -webkit-border-radius:2px;font-family: 'segoe ui', calibri, 'myriad pro', myriad, 'trebuchet ms', helvetica, arial, sans-serif;
    }
    .bl{ font-weight:700;}
    .dl{ padding:10px; border-top:1px dotted #999;}
    .dl dd{ padding:0; margin:0;}
    .log{border:1px solid #ccc; background:#f8f8f8; width:200px; position:absolute; right:10px; top:10px;}
    .log li{border:1p dotted #ccc;word-wrap:break-word;word-break:break-all; margin:0px; padding:0;}
    .log ul{margin:0px; padding:0; list-style:none;}
    --></style><style type="text/css" _mce_bogus="1"><!--
    .box{background:#f8f8f8;border:1px solid #ccc;padding:10px;-webkit-box-shadow:#000 0px 0px 4px;-moz-box-shadow:#000 0px 0px 4px;
    -webkit-border-radius:2px;font-family: 'segoe ui', calibri, 'myriad pro', myriad, 'trebuchet ms', helvetica, arial, sans-serif;
    }
    .bl{ font-weight:700;}
    .dl{ padding:10px; border-top:1px dotted #999;}
    .dl dd{ padding:0; margin:0;}
    .log{border:1px solid #ccc; background:#f8f8f8; width:200px; position:absolute; right:10px; top:10px;}
    .log li{border:1p dotted #ccc;word-wrap:break-word;word-break:break-all; margin:0px; padding:0;}
    .log ul{margin:0px; padding:0; list-style:none;}
    --></style>
    <div class="box" id="baseinfo">
    <h2>（把图片拖拽到这里）利用 filereader 获取文件 base64 编码</h2>
    <div></div>
    </div>
    <div class="log">
    <ul id="log">
    </ul>
    </div>
    <script type="text/css" ><!--
    (function(){
    window.datavalue = 0;
    var html = ' <dl class="dl">
    <dd>filename: $filename$</dd>
    <dd>filetype: $filetype$</dd>
    <dd>filesize: $filesize$</dd>
    <dd><img src="$data$" /></dd>
    <dd>filebase64: <br/>
    <div style="width:100%; height:100px;">$filebase64$</div>
    </dd>
    </dl>
    '
    var log = function(msg){
    //console['log'](msg);
    document.getelementbyid('log').innerhtml += '<li>'+ msg +'</li>';
    }

    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; i< files.length;i++){
    var 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();
    })()
    // --></script>
    </body>
    </html>

    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);//读取文本信息


分享到：
| JavaScript实现多播事件、属性设置的方式
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    php+ajax实现图片文件上传功能实例

    目前常用的异步文件上传功能有几种，比较多见的如使用iframe框架形式，ajax功能效果，以及flash+php功能，下面介绍ajax与iframe实现异步文件上传的功能的例子。 方法一，利用jquery ajaxfileupload.js实现文件上传 ...

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

    4:完美实现 遇到的问题 目前仅有 firefox 可以正确上传文件。（chrome也可以采google.gears上传） 对于从firefox和chrome下读取到的文件数据好像不一样（不知道是否是调试工具的原因） chrome以及其他高级浏览器...

    PHP+Ajax异步带进度条上传文件实例

    主要介绍了PHP+Ajax异步带进度条上传文件实例代码,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下。

    PHP+AjaxForm异步带进度条上传文件实例代码

    在使用ajaxForm方法之前，首先需要安装form.js的插件,网上可以找到，下面通过本文重点给大家介绍PHP+AjaxForm异步带进度条上传文件实例代码，感兴趣的朋友一起看看吧

    Dropzone.js实现文件拖拽上传实例

    dropzone.js是一个开源的JavaScript库...然后，在你的upload.php中写上传代码，Dropzone官网下载的只有js代码，没有后台的上传代码，不过，此为您提供了php版的完整上传实例代码，欢迎下载源码。 资料中包含详细教程。

    PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例

    后来发现ajaxFileUpload这个插件挺不错，所以就用这个插件来做异步上传文件的效果。网上也有很多对ajaxFileUpload插件的使用的文章，不过我发现没有PHP版，所以这次服务器那边的处理就使用PHP语言来处理。 一、详解...

    +Ajax异步无刷新登录实例

    +Ajax异步无刷新登录实例 本人收藏了3年的资源 现放出 都是总结了很多系统 软件项目实施过程中的经验的 慢慢积累的

    PHP 异步验证网站验证码实例

    PHP ajax异步验证网站验证码实例,一个是test.php 一个是生产验证码PHP文件，网上参考的，面向对象的，以后网站直接拿来用，还不用你写任何代码。

    jQuery实现文件编码成base64并通过AJAX上传的方法

    本文实例讲述了jQuery实现文件编码成base64并通过AJAX上传的方法。分享给大家供大家参考，具体如下： 使用AJAX是无法直接上传文件的，一般都是新建个iframe在它里面完成表单提交的过程以达到异步上传文件的效果。 ...

    Jquery+Ajax+Php+Mysql异步刷新

    Jquery+Ajax+Php+Mysql异步刷新 表单验证

    Ajax异步上传文件实例代码分享

    具体代码如下所示： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="width=device-width" /&gt; [removed][removed] &lt;title&gt;Index&lt;/title&gt; [removed] $(function() ...

    Ajax提交Form表单及文件上传的实例代码

    前几天，发现了一些小问题。...这样我们可以先到异步的Ajax可以实现局部刷新； 废话不多说了 直接上代码； 首先是html： &lt;form id = "form_insert" method = "post"&gt; &lt;table style = "font-size: 13

    Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】

    主要介绍了Jquery+AJAX实现无刷新上传并重命名文件操作,结合实例形式分析了jQuery+ajax前台上传文件与PHP后台接收处理相关操作技巧,需要的朋友可以参考下

    纯javascript的ajax实现php异步提交表单的简单实例

    下面小编就为大家带来一篇纯javascript的ajax实现php异步提交表单的简单实例。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

    Ajax异步请求技术实例讲解

    AJAX的全称是Asynchronous ...ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页（不使用ajax）如果需要更新内容，必须重载整个网页面。 在Web应用开发过

    PHP结合AJAX开发实例

    异步 Javascript 和 XML（Asynchronous Javascript and XML，Ajax）无疑是最流行的新 Web 技术。本文中我们将完全使用 PHP 和 Simple Ajax Toolkit (Sajax) 创建一个简单的相册作为在线 Web 应用程序。我们首先用...

Magicbox
Global site tag (gtag.js) - Google Analytics