html5檔案 上傳

表單提交檔案是最常見的場景，使用者選擇檔案後，觸發了檔案選擇框的change事件，通過訪問檔案選擇框元素的files屬性可以拿到選定的檔案列表。

如果檔案選擇框指定了multiple，則乙個檔案選擇框可以同時選擇多個檔案，files包含了所有選擇的檔案物件；如果沒有指定，則只能選擇乙個檔案，files[0]就是所選擇的檔案物件。

function

fileselect1(e) 
document
.getelementbyid(
'list1'
).innerhtml = html.join(
'');  //
檔案物件的屬性 name size type
}

document.getelementbyid('file1').onchange = fileselect1;

或者

$("#file1").change(function(e))

2. 拖拽 + 預覽（html5拖拽和預覽）

html5 file api提供了乙個slice方法，允許分片讀取檔案內容。

function

readblob(start, end) 
var file = files[0],
start = parseint(start, 10) || 0,
end = parseint(end, 10) || (file.size - 1);
var r = document.getelementbyid('range'),
c = document.getelementbyid('content');
var reader = new filereader();
reader.onloadend = function(e) 
};var blob;
if(file.webkitslice)  else
if(file.mozslice)  else
if(file.slice) 
reader.readasbinarystring(blob);
};document.getelementbyid('file5').onchange = function()

那分段讀取乙個大檔案時，如何監控整個檔案的讀取進度呢？

這種情況下，因為我們呼叫了多次filereader的檔案讀取方法，跟上文一次性把乙個檔案讀到記憶體中的情況不大相同，不能用onprogress來監控。

我們可以監聽onload事件，每次onload代表每個片段讀取完畢，我們只需要在onload中計算已讀取的百分比就可以了！

var bar2 = document.getelementbyid('progress-bar2');

var progress2 = document.getelementbyid('progress2');
var input6 = document.getelementbyid('file6');
var block = 1 * 1024 * 1024; // 每次讀取1m
// 當前檔案物件
var file;
// 當前已讀取大小
var fileloaded;
// 檔案總大小
var filesize;
// 每次讀取乙個block
function
readblob2()  else
if(file.mozslice)  else
if(file.slice)  else 
reader.readasbinarystring(blob);
}// 每個blob讀取完畢時呼叫
function
loadhandler2(e)  else 
percent = math.ceil(percent * 100) + '%';
progress2.innerhtml = percent;
progress2.style.width = percent;
}function
fileselect6(e) 
fileloaded = 0;
filesize = file.size;
bar2.style.display = 'block';
// 開始讀取
readblob2();
}var reader = new filereader();
// 只需監聽onload事件
reader.onload = loadhandler2;
input6.onchange = fileselect6

HTML5 檔案上傳

源 function getobjecturl file var url null if window.createobjecturl undefined else if window.url undefined else if window.webkiturl undefined return u...

html5 檔案拖拽上傳

本文首先發表在 碼蜂筆記 html5 檔案拖拽上傳是個老話題了，網上有很多例子，我一開始的 也是網上找來改的，只是踩了幾個坑之後就想把過程記錄下來。下面主要介紹從瀏覽器外拖拽檔案到瀏覽器進行上傳的實現。首先會介紹一些必須的基礎。拖拽事件有下面這些 拖拽物件用來傳遞資料的媒介，通過拖拽事件的event...

HTML5 檔案讀取

檔案讀取 title head body input type file class file multiple img src alt id img script 由於 檔案的src屬性，可以通過採用網路位址或base64的方式顯示，因此我們可以利用readasdataurl實現對的預覽。獲取檔案...