首頁 > 開發者 > PHP

php結合Ajax實現非同步檔案上傳的代碼執行個體

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

簡介：這是php結合Ajax實現非同步檔案上傳的代碼執行個體的詳細頁面，介紹了和php,有關的知識、技巧、經驗，和一些php源碼等。

class='pingjiaF' frameborder='0' src='http://biancheng.dnbcw.info/pingjia.php?id=334790' scrolling='no'>
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);//讀取文本資訊

“php結合Ajax實現非同步檔案上傳的代碼執行個體”的更多相關文章 》

愛J2EE關注Java邁克爾傑克遜視頻站JSON線上工具

http://biancheng.dnbcw.info/php/334790.html pageNo:10

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More