Ceci est possible dans au moins Chrome, Firefox et Safari: Reading Files. voir associé jsfiddle
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 = _.reduce(evt.target.result,
function(sum, byte) {
return sum + ' 0x' + String(byte).charCodeAt(0).toString(16);
}, '');
document.getElementById('byte_range').textContent =
['Read bytes: ', start + 1, ' - ', stop + 1,
' of ', file.size, ' byte file'].join('');
}
};
var blob;
if (file.slice) {
blob = file.slice(start, stop + 1);
}else if (file.webkitSlice) {
blob = file.webkitSlice(start, stop + 1);
} else if (file.mozSlice) {
blob = file.mozSlice(start, stop + 1);
}
console.log('reader: ', reader);
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);
Qu'essayez-vous d'accomplir? Aperçu de l'image dans le navigateur ou ajouts de fichiers Ajax? –
L'objectif actuel est de dessiner l'image sur une toile. À l'avenir, je pense que je pourrais vouloir effectuer un téléchargement via Ajax, cependant. – Doug
Vous êtes assez limité dans ce cas. Les téléchargements de fichiers Ajax fonctionnent dans FF 3+, Safari 4+ et Chrome 2+, de sorte que vous pouvez avoir plus de chance là-bas. Pour ma part, je ne connais pas d'autre moyen d'importer des données d'image à l'intérieur d'une toile. Si vous en trouvez un, veuillez mettre à jour cette question. –