Comment télécharger l'aperçu de l'image avant de les télécharger à l'aide de JavaScript

Je veux afficher l'aperçu d'une image avant de l'envoyer sur le serveur. J'ai écrit un peu le code, mais c'est seulement être consulté dans Internet Explorer, pas dans les autres navigateurs comme Safari, Chrome, Firefox, due à des raisons de sécurité. Est-il une solution pour afficher l'aperçu de l'image dans ces navigateurs?

    <body>
       <form name="Upload" enctype="multipart/form-data" method="post">
           Filename: <INPUT type="file" id="submit">
           <INPUT type="button" id="send" value="Upload">
       </form>
       <div 
           id="div" 
           align="center" 
           style="height: 200px;width: 500px;border-style: ridge;border-color: red">
       </div>
    </body>

    <script type="text/javascript">
        var img_id=0
        var image = new Array()
        document.getElementById('send').onclick=function()
        {
            img_id++
            var id="imgid"+img_id
            image = document.getElementById('submit').value;
            document.getElementById('div').innerHTML="<img id='"+id+"' src='"+image+"' width=500px height=200px>"
        }
    </script>
</html>

OriginalL'auteur Zain | 2010-11-04

javascript

Pour Firefox. En raison de la sécurité, il a un tronc de chemin. 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);

Ci-dessous 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 du Fichier de Liste d'objet sur MDC

Thnxs Ramiz...mais sa ne fonctionne pas dans Chrome...
Je n'ai pas le vérifier dans le navigateur Chrome. allons revenir à vous dans quelques minutes sur cette.
Ok.. thnxs...en Attendant..
la version de Chrome que vous avez.
Google Chrome 7.0.5

OriginalL'auteur Ramiz Uddin

1

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

Un peu le style des pointeurs:
- N'utilisez pas de fixe-largeur de la zone de prévisualisation, votre image sera déformée pour s'adapter à la zone
- Au lieu de document.getElementById() utiliser ceci:
  
  function $(id) { return document.getElementById(id); }
- Exemple: $('send')
Steve..vous s'il vous plaît me l'expliquer (la fonction $(id) { return document.getElementById(id); }) ..un peu..serais très reconnaissant
Il fournit un aperçu schématique de l'utilisation document.getElementById(). Il est détaillé, de sorte que le $() raccourci est utile.
Ohhh Ok EU...Thnxs Alex

OriginalL'auteur Ben
1

Il n'est pas possible de saisir un utilisateur fichier avant de le télécharger, à l'exception utiliser le nouveau Fichier API:

Exemple: affichage des vignettes de l'utilisateur sélectionné, les images

Ce ne sera pas, bien sûr, être cross-browser. Il peut également être un moyen de le faire via Flash et les données de l'Url (ou juste aperçu dans Flash), mais je préfère éviter le JavaScript <-> intégration Flash.

Merci Pradeep et theazureshadow, cependant, j'ai du mal à croire que nous ne pouvons pas ouvrir une image dans les navigateurs (FF, basé sur Webkit). Jetez un oeil à l'application web à partir de 'Mugtug" appelée chambre Noire (mugtug.com/darkroom). Cette application web permet à un utilisateur de charger une image pour plus de manipulation (Ouvrez l'icône en haut à gauche de l'application web), je suis désireux de réaliser la même fonction d'afficher une boîte de dialogue en cliquant, de sorte qu'un utilisateur peut sélectionner une image pour l'afficher. Toutes les pensées?
Comme je l'ai dit, vous pouvez le faire avec html5. C'est comment Mugtug t-il: Mugtug chambre Noire est Basée sur un Navigateur Photo Editor Alimenté Entièrement par HTML5
Yup u r rite...

OriginalL'auteur theazureshadow

juste un coup d'oeil sur le lien suivant liées au dossier de l'API, il travaille pour IE9+, j'ai vérifié il ne fonctionne pas pour IE8
il montre comment afficher un aperçu des images et des fichiers texte
http://www.xul.fr/en/html5/filereader.php
FileReader, le chargement d'une image dans une page web

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

Ceci termine la pour la sélection de fichiers local, que cette balise ne peut fournir le contenu de ce fichier dans un script sur le serveur, avec les données du formulaire.

Test de compatibilité

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

Résultat
Fichier API prises en charge.
Le code Source de l'épreuve:

<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>

OriginalL'auteur saeed

si l'entrée est du type de fichier, puis en utilisant htmlfilereader fonction pouvons-nous voir l'aperçu de la page html? à l'aide d'accepter type ="text/html"

j'ai eu la description du fichier et la taille...

<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>

au-dessus de la mention problème est lié avec local hors connexion stockées les pages html. nous pouvons voir l'aperçu de la page en utilisant des url comme-

<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

OriginalL'auteur shailendra pathak

C'est Simple il suffit d'utiliser cette

Dans votre fichier HTML utiliser

<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, il suffit d'écrire ce

<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>

OriginalL'auteur Abhijit Chakra

-1

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;
            }
        }       
    }
}

ne marche pas pour moi...

OriginalL'auteur srinivas

Vous devez vous connecter pour publier un commentaire.