Comment télécharger l'image d'aperçu avant de télécharger via JavaScript

Pour Firefox. En raison de sa sécurité, il a un chemin tronqué. Cependant, ils ont fourni d'autres façons de le faire:

 var img = document.createElement("IMG"); if(document.all) img.src = document.getElementById('submit').value; else // Your solution for Firefox. img.src = document.getElementById('submit').files.item(0).getAsDataURL(); document.getElementById('div').appendChild(img); 

Ce qui suit fonctionne dans Internet Explorer 7 et Firefox 3.

 <style type="text/css"> #prevImage { border: 8px solid #ccc; width: 300px; height: 200px; } </style> <script type="text/javascript"> function setImage(file) { if(document.all) document.getElementById('prevImage').src = file.value; else document.getElementById('prevImage').src = file.files.item(0).getAsDataURL(); if(document.getElementById('prevImage').src.length > 0) document.getElementById('prevImage').style.display = 'block'; } </script> <pre> IE8 needs a security settings change: internet settings, security, custom level : [] Include local directory path when uploading files to a server ( ) Disable (o) Enable </pre> <form> <input type="file" name="myImage" onchange="setImage(this);" /> </form> <img id="prevImage" style="display:none;" /> 

Documentation de l'objet File List sur MDC

Cela fonctionne bien pour moi dans FF 3.6, IE 8, Safari 4.0 et Chrome 3.195.

Quelques remarques de style cependant:

• N'utilisez pas une zone de prévisualisation à largeur fixe, votre image sera déformée pour s'adapter à la zone

• Au lieu de document.getElementById() utilisez ceci:

  function $(id) { return document.getElementById(id); }

• Exemple: $('send')

Il n'est pas possible de saisir un fichier utilisateur avant de télécharger, sauf l'utilisation de la nouvelle API de fichiers:

Exemple: Affichage des vignettes des images sélectionnées par l'utilisateur

Ce ne sera évidemment pas un navigateur croisé. Il pourrait également y avoir un moyen de le faire via Flash et les URL des données (ou simplement une prévisualisation dans Flash), mais je préfère éviter l'intégration JavaScript <-> Flash.

Jetez un coup d'oeil sur le lien suivant lié à l'API de fichiers, il fonctionne pour IE9 + i vérifié, cela ne fonctionne pas pour IE8, il montre comment prévisualiser les fichiers d'image et de texte http://www.xul.fr/fr/html5/filereader.php FileReader, chargement d'une image dans un site Web

FileReader permet d'accéder au système de fichiers local et de charger des documents avec le code JavaScript.

Ceci complète le choix du fichier local, car cette balise ne peut fournir que le contenu de ce fichier à un script sur le serveur, avec les données du formulaire.

Test de compatibilité

Le navigateur actuel le reconnaît l'API de fichier, qui comprend l'objet FileReader?

Fichier de résultat API pris en charge. Code source du test:

 <script> if (window.File && window.FileReader && window.FileList && window.Blob) document.write("<b>File API supported.</b>"); else document.write('<i>File API not supported by this browser.</i>'); </script> 

Code HTML:

 <input type="file" id="getimage"> <fieldset><legend>Your image here</legend> <div id="imgstore"></div> </fieldset> 

Code JavaScript:

 <script> function imageHandler(e2) { var store = document.getElementById('imgstore'); store.innerHTML='<img src="' + e2.target.result +'">'; } function loadimage(e1) { var filename = e1.target.files[0]; var fr = new FileReader(); fr.onload = imageHandler; fr.readAsDataURL(filename); } window.onload=function() { var x = document.getElementById("filebrowsed"); x.addEventListener('change', readfile, false); var y = document.getElementById("getimage"); y.addEventListener('change', loadimage, false); } </script> 

Si le type de saisie est le fichier, puis utilisez la fonction htmlfilereader, on peut voir l'aperçu de la page html? En utilisant accept type = "text / html"

J'ai la description et la taille du fichier …

 <script> function handleFileSelect(evt) { var files = evt.target.files; // FileList object // files is a FileList of File objects. List some properties. var output = []; for (var i = 0, f; f = files[i]; i++) { output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ', f.size, ' bytes, last modified: ', f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a', '</li>'); } document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>'; } document.getElementById('files').addEventListener('change', handleFileSelect, false); </script> 

Le problème mentionné ci-dessus est lié aux pages html stockées localement hors ligne. Nous pouvons voir l'aperçu de la page en direct en utilisant l'URL en direct,

 <html> <head> <!--[if IE]> <style> #frame { zoom: 0.2; } </style> <![endif]--> <style> #frame { width: 800px; height: 520px; border: none; -moz-transform: scale(0.2); -moz-transform-origin: 0 0; -o-transform: scale(0.2); -o-transform-origin: 0 0; -webkit-transform: scale(0.2); -webkit-transform-origin: 0 0; } </style> </head> <body> <iframe id="frame" src="http://www.bing.com"> </iframe> </body> </html 

>

C'est simple, utilisez ce

Dans votre utilisation de fichier HTML

 <div> <form id="form1" runat="server"> <input type='file' id="imgInp" /> <br> <img id="blah" src="http://i.imgur.com/zAyt4lX.jpg" alt="your image" height="100" /> </form> <div> 

Et à l'intérieur de votre fichier de script java, écrivez ceci

 <script> function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#blah').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#imgInp").change(function(){ readURL(this); }); </script> 

Cela fonctionne bien dans FF 3.6, IE 9, Safari 4.0 et Chrome 3.195.

 var reader = new FileReader(); function preview(what) { if(jQuery.browser.msie || jQuery.browser.safari || jQuery.browser.chrome) { document.getElementById("preview-photo").src=what.value; return; } else{ // array with acceptable file types var accept = ["image/png","image/jpeg","image/jpg","image/gif"]; // if we accept the first selected file type if (accept.indexOf(what.files[0].type) > -1) { if(what.files && what.files[0]){ reader.readAsDataURL(what.files[0]); document.getElementById("preview-photo").src=reader.result; } } } }