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); // m.survivalescaperooms.com base 64 編碼
- return; //開源代碼Vevb.com
- },
- 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);//讀取文本信息
新聞熱點
疑難解答
