Tags

,

HTML5 finally provides a standard way to interact with local files, via the File APIspecification. As example of its capabilities, the File API could be used to create a thumbnail preview of images as they’re being sent to the server, or allow an app to save a file reference while the user is offline. Additionally, you could use client-side logic to verify an upload’s mimetype matches its file extension or restrict the size of an upload.

Here is the test example,

<html>
<title>File Uploading</title>
<style>
#byte_content {
margin: 5px 0;
max-height: 500px;
overflow-y: auto;
overflow-x: hidden;
}
#byte_range { margin-top: 5px; }
</style>

<input type=”file” id=”files” name=”file” />
<span class=”readBytesButtons”>
<button>Click to display</button>
</span>

function readBlob(opt_startByte, opt_stopByte) {

var files = document.getElementById(‘files’).files;
if (!files.length) {
alert(‘Please select a file!’);
return;
}

var file = files[0];
var start = parseInt(opt_startByte) || 0;
var stop = parseInt(opt_stopByte) || file.size – 1;

var reader = new FileReader();

// If we use onloadend, we need to check the readyState.
reader.onloadend = function(evt) {
if (evt.target.readyState == FileReader.DONE) { // DONE == 2
document.getElementById(‘byte_content’).textContent = evt.target.result;
//document.getElementById(‘byte_range’).textContent =
// [‘Read bytes: ‘, start + 1, ‘ – ‘, stop + 1,
// ‘ of ‘, file.size, ‘ byte file’].join(”);
}
};

var blob = file.slice(start, stop + 1);
reader.readAsBinaryString(blob);
}

document.querySelector(‘.readBytesButtons’).addEventListener(‘click’, function(evt) {
if (evt.target.tagName.toLowerCase() == ‘button’) {
var startByte = evt.target.getAttribute(‘data-startbyte’);
var endByte = evt.target.getAttribute(‘data-endbyte’);
readBlob(startByte, endByte);
}
}, false);

</html>

 

More : http://www.html5rocks.com/en/tutorials/file/dndfiles/

 

Advertisements