Fichier de données à partir de l'élément d'entrée

Dans Firefox 3, il est possible d'accéder au contenu d'un <input type="file"> élément comme suit.

Assumer un formulaire avec l'élément suivant:

<input type="file" id="myinput">

Maintenant, les données du fichier sélectionné peut être consulté à:

//Get the file's data as a data: URL
document.getElementById('myinput').files[0].getAsDataURL()

Est là une manière de croix-navigateur pour accomplir la même chose?

Firefox documentation de cette fonction:

Qu'essayez-vous de réaliser? Aperçu de l'Image dans le navigateur ou Ajax upload de fichiers?
L'objectif actuel est de dessiner l'image sur une toile. Dans l'avenir, je pense que je souhaiterez peut-être effectuer un téléchargement via Ajax.
Vous êtes assez limité dans ce cas. Ajax upload de fichiers de travail dans FF 3+, Safari 4+ et google Chrome 2+, donc vous pouvez avoir plus de chance là-dedans. Pour ma part, je ne connais pas d'autre façon d'importer des données d'image à l'intérieur d'une toile. Si vous en trouvez un, veuillez mettre à jour cette question.
ce lien a été vraiment utile pour moi : html5rocks.com/en/tutorials/file/dndfiles

OriginalL'auteur Doug | 2009-06-02

  1. 8

    C'est possible au moins de Chrome, Firefox et Safari: La Lecture De Fichiers.
    voir associés 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);
    le jsFiddle code ne semble pas fonctionner dans Chrome maintenant.
    Merci pour cette remarque, j'ai mis à jour le violon. Il semble que l'API a été finalisé et le Chrome est maintenant à l'aide .slice() à la place de l'ancienne .webkitSlice().

    OriginalL'auteur Paul