Frage Sehen Sie sich ein Bild in der Vorschau an, bevor es hochgeladen wird


Ich möchte eine Datei (Bild) in der Vorschau anzeigen können, bevor sie hochgeladen wird. Die Vorschauaktion sollte alle im Browser ausgeführt werden, ohne Ajax zum Hochladen des Bildes zu verwenden.

Wie kann ich das machen?


1177
2017-12-16 09:51


Ursprung


Antworten:


Bitte sehen Sie sich den folgenden Beispielcode an:

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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
  <input type='file' id="imgInp" />
  <img id="blah" src="#" alt="your image" />
</form>

Du kannst auch Probieren Sie dieses Beispiel hier aus.


1941
2017-12-16 09:55



Es gibt verschiedene Möglichkeiten, dies zu tun. Der effizienteste Weg wäre zu verwenden URL.createObjectURL () auf der Datei von deiner <Eingabe>. Übergeben Sie diese URL an img.src dem Browser mitzuteilen, dass das bereitgestellte Bild geladen werden soll.

Hier ist ein Beispiel:

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
<script>
  var loadFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
  };
</script>

Sie können auch verwenden FileReader.readAsDataURL () um die Datei von Ihrer <Eingabe> zu analysieren. Dadurch wird eine Zeichenfolge im Speicher erstellt, die eine base64-Darstellung des Bilds enthält.

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
<script>
  var loadFile = function(event) {
    var reader = new FileReader();
    reader.onload = function(){
      var output = document.getElementById('output');
      output.src = reader.result;
    };
    reader.readAsDataURL(event.target.files[0]);
  };
</script>


233
2017-11-27 08:17



Einzeilige Lösung:

Der folgende Code verwendet Objekt-URLs, die für die Anzeige großer Bilder wesentlich effizienter sind als Daten-URLs (eine Daten-URL ist eine riesige Zeichenfolge, die alle Dateidaten enthält, während eine Objekt-URL nur eine kurze Zeichenfolge ist, die auf die Dateidaten verweist). Erinnerung):

<img id="blah" alt="your image" width="100" height="100" />

<input type="file" 
    onchange="document.getElementById('blah').src = window.URL.createObjectURL(this.files[0])">

Die generierte URL wird wie folgt aussehen:

blob:http%3A//localhost/7514bc74-65d4-4cf0-a0df-3de016824345

128
2017-11-18 20:00



Die Antwort von LeassTaTT funktioniert gut in "Standard" Browsern wie FF und Chrome. Die Lösung für IE existiert, sieht aber anders aus. Hier eine Beschreibung der browserübergreifenden Lösung:

In HTML benötigen wir zwei Vorschauelemente, img für Standardbrowser und div für IE

HTML:

<img id="preview" 
     src="" 
     alt="" 
     style="display:none; max-width: 160px; max-height: 120px; border: none;"/>

<div id="preview_ie"></div>

In CSS spezifizieren wir das folgende IE spezifische Ding:

CSS:

#preview_ie {
  FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)
}  

In HTML enthalten wir die Standard- und die IE-spezifischen Javascripte:

<script type="text/javascript">
  {% include "pic_preview.js" %}
</script>  
<!--[if gte IE 7]> 
<script type="text/javascript">
  {% include "pic_preview_ie.js" %}
</script>

Das pic_preview.js ist das Javascript aus der Antwort von LeassTaTT. Ersetze das $('#blah') mit dem $('#preview') und füge das hinzu $('#preview').show()

Jetzt das IE spezifische Javascript (pic_preview_ie.js):

function readURL (imgFile) {    
  var newPreview = document.getElementById('preview_ie');
  newPreview.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgFile.value;
  newPreview.style.width = '160px';
  newPreview.style.height = '120px';
}    

Das ist es. Funktioniert in IE7, IE8, FF und Chrome. Bitte im IE9 testen und melden. Die Idee der IE-Vorschau wurde hier gefunden: http://forums.asp.net/t/1320559.aspx

http://msdn.microsoft.com/en-us/library/ms532969(v=vs.85).aspx


41
2017-12-24 11:58



Ich habe @ Ivans Antwort bearbeitet, um das Bild "Keine Vorschau verfügbar" anzuzeigen, wenn es kein Bild ist:

function readURL(input) {
    var url = input.value;
    var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
    if (input.files && input.files[0]&& (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('.imagepreview').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }else{
         $('.imagepreview').attr('src', '/assets/no_preview.png');
    }
}

22
2018-06-05 06:23



Hier ist ein mehrere Dateien Version, basierend auf Ivan Baevs Antwort.

Der HTML-Code

<input type="file" multiple id="gallery-photo-add">
<div class="gallery"></div>

JavaScript / jQuery

$(function() {
    // Multiple images preview in browser
    var imagesPreview = function(input, placeToInsertImagePreview) {

        if (input.files) {
            var filesAmount = input.files.length;

            for (i = 0; i < filesAmount; i++) {
                var reader = new FileReader();

                reader.onload = function(event) {
                    $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                }

                reader.readAsDataURL(input.files[i]);
            }
        }

    };

    $('#gallery-photo-add').on('change', function() {
        imagesPreview(this, 'div.gallery');
    });
});

Benötigt jQuery 1.8 aufgrund der Verwendung von $ .parseHTML, was bei der Minderung von XSS helfen sollte.

Dies funktioniert sofort und die einzige Abhängigkeit, die Sie benötigen, ist jQuery.


14
2017-12-14 15:30



Ja. Es ist möglich.

Html

<input type="file" accept="image/*"  onchange="showMyImage(this)" />
 <br/>
<img id="thumbnil" style="width:20%; margin-top:10px;"  src="" alt="image"/>

JS

 function showMyImage(fileInput) {
        var files = fileInput.files;
        for (var i = 0; i < files.length; i++) {           
            var file = files[i];
            var imageType = /image.*/;     
            if (!file.type.match(imageType)) {
                continue;
            }           
            var img=document.getElementById("thumbnil");            
            img.file = file;    
            var reader = new FileReader();
            reader.onload = (function(aImg) { 
                return function(e) { 
                    aImg.src = e.target.result; 
                }; 
            })(img);
            reader.readAsDataURL(file);
        }    
    }

Du kannst bekommen Live-Demo von hier.


11
2017-07-25 11:20



Sauber und einfach JSFiddle

Dies ist nützlich, wenn Sie möchten, dass das Ereignis indirekt von einem div oder einer Schaltfläche ausgelöst wird.

<img id="image-preview"  style="height:100px; width:100px;"  src="" >

<input style="display:none" id="input-image-hidden" onchange="document.getElementById('image-preview').src = window.URL.createObjectURL(this.files[0])" type="file" accept="image/jpeg, image/png">

<button  onclick="HandleBrowseClick('input-image-hidden');" >UPLOAD IMAGE</button>


<script type="text/javascript">
function HandleBrowseClick(hidden_input_image)
{
    var fileinputElement = document.getElementById(hidden_input_image);
    fileinputElement.click();
}     
</script>

7
2017-11-30 05:57



Beispiel mit mehreren Bildern mit JavaScript (jQuery) und HTML5

JavaScript (jQuery)

function readURL(input) {
     for(var i =0; i< input.files.length; i++){
         if (input.files[i]) {
            var reader = new FileReader();

            reader.onload = function (e) {
               var img = $('<img id="dynamic">');
               img.attr('src', e.target.result);
               img.appendTo('#form1');  
            }
            reader.readAsDataURL(input.files[i]);
           }
        }
    }

    $("#imgUpload").change(function(){
        readURL(this);
    });
}

Markup (HTML)

<form id="form1" runat="server">
    <input type="file" id="imgUpload" multiple/>
</form>

6
2017-11-26 06:33



Wie wäre es mit dem Erstellen einer Funktion, die die Datei lädt und ein benutzerdefiniertes Ereignis auslöst? Fügen Sie dann einen Listener an die Eingabe an. Auf diese Weise haben wir mehr Flexibilität, um die Datei nicht nur für die Vorschau von Bildern zu verwenden.

/**
 * @param {domElement} input - The input element
 * @param {string} typeData - The type of data to be return in the event object. 
 */
function loadFileFromInput(input,typeData) {
    var reader,
        fileLoadedEvent,
        files = input.files;

    if (files && files[0]) {
        reader = new FileReader();

        reader.onload = function (e) {
            fileLoadedEvent = new CustomEvent('fileLoaded',{
                detail:{
                    data:reader.result,
                    file:files[0]  
                },
                bubbles:true,
                cancelable:true
            });
            input.dispatchEvent(fileLoadedEvent);
        }
        switch(typeData) {
            case 'arraybuffer':
                reader.readAsArrayBuffer(files[0]);
                break;
            case 'dataurl':
                reader.readAsDataURL(files[0]);
                break;
            case 'binarystring':
                reader.readAsBinaryString(files[0]);
                break;
            case 'text':
                reader.readAsText(files[0]);
                break;
        }
    }
}
function fileHandler (e) {
    var data = e.detail.data,
        fileInfo = e.detail.file;

    img.src = data;
}
var input = document.getElementById('inputId'),
    img = document.getElementById('imgId');

input.onchange = function (e) {
    loadFileFromInput(e.target,'dataurl');
};

input.addEventListener('fileLoaded',fileHandler)

Wahrscheinlich ist mein Code nicht so gut wie einige Benutzer, aber ich denke, Sie werden den Punkt verstehen. Hier können Sie eine sehen Beispiel


4
2017-07-29 18:41



Folgendes ist der Arbeitscode.

<input type='file' onchange="readURL(this);" /> 
<img id="ShowImage" src="#" />

Javascript:

 function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#ShowImage')
                    .attr('src', e.target.result)
                    .width(150)
                    .height(200);
            };

            reader.readAsDataURL(input.files[0]);
        }
    }

3
2018-01-06 16:19