Zeigen Sie eine Vorschau eines Bildes an, bevor es hochgeladen wird

1614

Ich möchte eine Vorschau einer Datei (eines Bildes) anzeigen können, bevor sie hochgeladen wird. Die Vorschau-Aktion sollte alle im Browser ausgeführt werden, ohne dass Ajax zum Hochladen des Bildes verwendet wird.

Wie kann ich das machen?

Simbian
quelle
Beachten Sie, dass Sie das Bild im Browser nicht bearbeiten
Steve-o
Schauen Sie sich diesen reinen JavaScript-Ansatz an, einschließlich seiner Antwort und des Kommentars von Ray Nicholus für die endgültige Lösung: stackoverflow.com/questions/16430016/…
Jonathan Root
Hier ist ein schöner ausführlicher Artikel mit Live-Demo codepedia.info/2015/06/…
Satinder singh
8
Hier ist eine einfache Lösung, die jquery nicht verwendet: developer.mozilla.org/en-US/docs/Web/API/FileReader/…
John Gilmer

Antworten:

2535

Bitte schauen 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]); // convert to base64 string
  }
}

$("#imgInp").change(function() {
  readURL(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form runat="server">
  <input type='file' id="imgInp" />
  <img id="blah" src="#" alt="your image" />
</form>

Sie können dieses Beispiel auch hier ausprobieren .

Ivan Baev
quelle
5
Sie können die Leistung ein wenig verbessern, indem Sie den Reader einmal definieren. jsfiddle.net/LvsYc/638
Jaider
84
Warum jQuery für $ ('# blah'). Attr ('src', e.target.result) verwenden; `wenn Sie es einfach hätten tun könnendocument.getElementById('blah').src=e.target.result)
EasyBB
4
Ich habe eine ReactJS-Implementierung davon gemacht . Klappt wunderbar. @kxc Sie sollten einen Ajax-Anruf tätigen und input.files[0]als Daten senden , siehe jQuerys Dokument .
Sumi Straessle
@IvanBaev input.files[0]hat nicht den vollständigen Pfad. Wie findet FileReader die Datei?
Old Geezer
4
Es spielt keine Rolle, wann immer Sie jquery nicht verwenden können, da es aufgebläht ist und Vanille Ihnen schnellere Ergebnisse liefert, insbesondere wenn Sie Tonnen von Skripten haben.
EasyBB
357

Es gibt verschiedene Möglichkeiten, dies zu tun. Am effizientesten wäre es, URL.createObjectURL () für die Datei von Ihrem <Eingang> aus zu verwenden . Übergeben Sie diese URL an img.src , um den Browser anzuweisen , das bereitgestellte Bild zu laden.

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]);
    output.onload = function() {
      URL.revokeObjectURL(output.src) // free memory
    }
  };
</script>

Sie können auch FileReader.readAsDataURL () verwenden , um die Datei von Ihrem <Eingang> aus zu analysieren. Dadurch wird eine Zeichenfolge im Speicher erstellt, die eine base64-Darstellung des Bildes 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>

nkron
quelle
40
Lesen Sie sorgfältig: readAsDataURL und createObjectURL speichern ein Bild im Browser zwischen und geben dann eine Base64-codierte Zeichenfolge zurück, die auf den Bildspeicherort im Cache verweist. Wenn der Browser-Cache geleert wird, verweist die Base64-codierte Zeichenfolge nicht mehr auf das Bild. Die base64-Zeichenfolge ist keine tatsächliche Bilddaten, sondern ein URL-Verweis auf das Bild. Sie sollten sie nicht in einer Datenbank speichern, um Bilddaten abzurufen. Ich habe diesen Fehler kürzlich gemacht (vor ungefähr 3 Minuten).
Montag,
9
Um Speicherprobleme zu vermeiden, sollten Sie anrufen, URL.revokeObjectURLwenn Sie mit Ihrem Blob fertig sind
Apolo
@Apolo nicht in diesem Fall, siehe diese Antwort: stackoverflow.com/a/49346614/2313004
grreeenn
Versuchen Sie Ihre Lösung ... danke
Ajay Kumar
219

Einzeilerlösung:

Der folgende Code verwendet Objekt-URLs, die für die Anzeige großer Bilder viel effizienter sind als Daten-URLs. (Eine Daten-URL ist eine große Zeichenfolge, die alle Dateidaten enthält, während eine Objekt-URL nur eine kurze Zeichenfolge ist, die auf die Dateidaten in 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 lautet wie folgt:

blob:http%3A//localhost/7514bc74-65d4-4cf0-a0df-3de016824345
cnlevy
quelle
2
@Raptor und so ist die ganze File API ... ( FileReader, input.filesetc.) URL.createObjectURList der Weg zu gehen , wenn sie mit Benutzern hochgeladenen Dateien zu tun, schafft es nur ein im Speicher Symlink auf die reale Datei auf der Festplatte des Benutzers.
Kaiido
@cnlevy Wie können wir auf die hochgeladenen Dateien zugreifen? Ist es nur möglich, es von der URL zu erhalten, wie Sie es erwähnt haben? Um genau zu sein, verwende ich eine Flasche, die bereits den Zugriff auf hochgeladene Dateien unterstützt. Gibt es einen anderen Weg mit diesem Einzeiler?
Abhishek Singh
Dies ist die beste Antwort aller Zeiten
Navid Farjad
Diese Lösung hat bei mir nicht funktioniert. Bildvorschau wird nicht angezeigt.
Sundaramoorthy J
Beste Antwort! Vielen Dank
A7madev
46

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 Beschreibung der browserübergreifenden Lösung:

In HTML benötigen wir zwei Vorschauelemente, imgfür Standardbrowser und divfü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 geben wir die folgende IE-spezifische Sache an:

CSS:

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

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

<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.jsist die Javascript aus dem LeassTaTT Antwort. Ersetzen Sie das mit $('#blah')dem $('#preview')und fügen Sie das hinzu$('#preview').show()

Nun 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. Funktioniert in IE7, IE8, FF und Chrome. Bitte in 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

Dmitri Dmitri
quelle
24

Ich habe die Antwort von @ Ivan bearbeitet, um das Bild "Keine Vorschau verfügbar" anzuzeigen, wenn es sich nicht um ein Bild handelt:

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');
    }
}
Sachin Prasad
quelle
19

Hier ist eine Version mit mehreren Dateien , basierend auf der Antwort von Ivan Baev.

Der HTML

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

Erfordert jQuery 1.8 aufgrund der Verwendung von $ .parseHTML, was bei der XSS-Minderung helfen sollte.

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

Nino Škopac
quelle
16

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

Sie können Live-Demo von hier erhalten.

Md. Rahman
quelle
11

Saubere und einfache JSfiddle

Dies ist nützlich, wenn das Ereignis indirekt von einem div oder einer Schaltfläche ausgelöst werden soll.

<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>
Sivashanmugam Kannan
quelle
Nur eine Anmerkung: Ich kann das nicht gutschreiben, aber Sie können <label>Javascript verwenden und vermeiden, um den Klick auf die Schaltfläche insgesamt zu handhaben. Dateieingabe mit reinem HTML / CSS auslösen. und es ist überhaupt nicht hacky.
Regular Joe
7

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>
Ratan Paul
quelle
5

Wie wäre es mit einer Funktion, die die Datei lädt und ein benutzerdefiniertes Ereignis auslöst? Schließen Sie dann einen Listener an den Eingang an. Auf diese Weise haben wir mehr Flexibilität bei der Verwendung der Datei, nicht nur für die Vorschau von Bildern.

/**
 * @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 es verstehen. Hier sehen Sie ein Beispiel

Ajorquera
quelle
5

Es folgt 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]);
        }
    }
Muhammad Awais
quelle
4

Wenn sich die Datei in React in Ihren Requisiten befindet, können Sie Folgendes verwenden:

{props.value instanceof File && (
    <img src={URL.createObjectURL(props.value)}/>
)}
Melle
quelle
1
Das hat mir das Leben gerettet! Viel einfacher als die React-Lösung mit FileReader
Jonathan
2

Was ist mit dieser Lösung?

Fügen Sie einfach das Datenattribut "data-type = editable" zu einem Bild-Tag wie folgt hinzu:

<img data-type="editable" id="companyLogo" src="http://www.coventrywebgraphicdesign.co.uk/wp-content/uploads/logo-here.jpg" height="300px" width="300px" />

Und das Skript zu Ihrem Projekt natürlich ...

function init() {
    $("img[data-type=editable]").each(function (i, e) {
        var _inputFile = $('<input/>')
            .attr('type', 'file')
            .attr('hidden', 'hidden')
            .attr('onchange', 'readImage()')
            .attr('data-image-placeholder', e.id);

        $(e.parentElement).append(_inputFile);

        $(e).on("click", _inputFile, triggerClick);
    });
}

function triggerClick(e) {
    e.data.click();
}

Element.prototype.readImage = function () {
    var _inputFile = this;
    if (_inputFile && _inputFile.files && _inputFile.files[0]) {
        var _fileReader = new FileReader();
        _fileReader.onload = function (e) {
            var _imagePlaceholder = _inputFile.attributes.getNamedItem("data-image-placeholder").value;
            var _img = $("#" + _imagePlaceholder);
            _img.attr("src", e.target.result);
        };
        _fileReader.readAsDataURL(_inputFile.files[0]);
    }
};

// 
// IIFE - Immediately Invoked Function Expression
// /programming/18307078/jquery-best-practises-in-case-of-document-ready
(

function (yourcode) {
    "use strict";
    // The global jQuery object is passed as a parameter
    yourcode(window.jQuery, window, document);
}(

function ($, window, document) {
    "use strict";
    // The $ is now locally scoped 
    $(function () {
        // The DOM is ready!
        init();
    });

    // The rest of your code goes here!
}));

Siehe Demo bei JSFiddle

Rodolpho Brock
quelle
2

Versuche dies

window.onload = function() {
  if (window.File && window.FileList && window.FileReader) {
    var filesInput = document.getElementById("uploadImage");
    filesInput.addEventListener("change", function(event) {
      var files = event.target.files;
      var output = document.getElementById("result");
      for (var i = 0; i < files.length; i++) {
        var file = files[i];
        if (!file.type.match('image'))
          continue;
        var picReader = new FileReader();
        picReader.addEventListener("load", function(event) {
          var picFile = event.target;
          var div = document.createElement("div");
          div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +
            "title='" + picFile.name + "'/>";
          output.insertBefore(div, null);
        });        
        picReader.readAsDataURL(file);
      }

    });
  }
}
<input type="file" id="uploadImage" name="termek_file" class="file_input" multiple/>
<div id="result" class="uploadPreview">

Nisal Edu
quelle
2

Vorschau mehrerer Bilder, bevor sie mit jQuery / Javascript hochgeladen werden?

Dadurch werden mehrere Dateien gleichzeitig als Miniaturbilder in der Vorschau angezeigt

Html

<input id="ImageMedias" multiple="multiple" name="ImageMedias" type="file"
accept=".jfif,.jpg,.jpeg,.png,.gif" class="custom-file-input"  value="">                                    
<div id="divImageMediaPreview"></div>

Skript

$("#ImageMedias").change(function () {
    if (typeof (FileReader) != "undefined") {
        var dvPreview = $("#divImageMediaPreview");
        dvPreview.html("");            
        $($(this)[0].files).each(function () {
            var file = $(this);                
                var reader = new FileReader();
                reader.onload = function (e) {
                    var img = $("<img />");
                    img.attr("style", "width: 150px; height:100px; padding: 10px");
                    img.attr("src", e.target.result);
                    dvPreview.append(img);
                }
                reader.readAsDataURL(file[0]);                
        });
    } else {
        alert("This browser does not support HTML5 FileReader.");
    }
});

Arbeitsdemo auf Codepen

Arbeitsdemo auf jsfiddle

Ich hoffe das wird helfen.

vishpatel73
quelle
1

Ich habe ein Plugin erstellt, das dank des Internets den Vorschaueffekt in IE 7+ erzeugen kann, aber nur wenige Einschränkungen aufweist. Ich habe es in eine Github-Seite eingefügt, damit es einfacher zu bekommen ist

$(function () {
		$("input[name=file1]").previewimage({
			div: ".preview",
			imgwidth: 180,
			imgheight: 120
		});
		$("input[name=file2]").previewimage({
			div: ".preview2",
			imgwidth: 90,
			imgheight: 90
		});
	});
.preview > div {
  display: inline-block;
  text-align:center;
}

.preview2 > div {
  display: inline-block; 
  text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://rawgit.com/andrewng330/PreviewImage/master/preview.image.min.js"></script>
	Preview
	<div class="preview"></div>
	Preview2
	<div class="preview2"></div>

	<form action="#" method="POST" enctype="multipart/form-data">
		<input type="file" name="file1">
		<input type="file" name="file2">
		<input type="submit">
	</form>

Andrew
quelle
1

Für das Hochladen mehrerer Bilder (Änderung der @ IvanBaev-Lösung)

function readURL(input) {
    if (input.files && input.files[0]) {
        var i;
        for (i = 0; i < input.files.length; ++i) {
          var reader = new FileReader();
          reader.onload = function (e) {
              $('#form1').append('<img src="'+e.target.result+'">');
          }
          reader.readAsDataURL(input.files[i]);
        }
    }
}

http://jsfiddle.net/LvsYc/12330/

Hoffe das hilft jemandem.

Keyur
quelle
1

Es ist mein Code. Support IE [6-9] 、 Chrome 17 + 、 Firefox 、 Opera 11 + 、 Maxthon3

   
function previewImage(fileObj, imgPreviewId) {
    var allowExtention = ".jpg,.bmp,.gif,.png";  //allowed to upload file type
    document.getElementById("hfAllowPicSuffix").value;
    var extention = fileObj.value.substring(fileObj.value.lastIndexOf(".") + 1).toLowerCase();
    var browserVersion = window.navigator.userAgent.toUpperCase();
    if (allowExtention.indexOf(extention) > -1) {
        if (fileObj.files) {
            if (window.FileReader) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    document.getElementById(imgPreviewId).setAttribute("src", e.target.result);
                };
                reader.readAsDataURL(fileObj.files[0]);
            } else if (browserVersion.indexOf("SAFARI") > -1) {
                alert("don't support  Safari6.0 below broswer");
            }
        } else if (browserVersion.indexOf("MSIE") > -1) {
            if (browserVersion.indexOf("MSIE 6") > -1) {//ie6
                document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
            } else {//ie[7-9]
                fileObj.select();
                fileObj.blur(); 
                var newPreview = document.getElementById(imgPreviewId);

                newPreview.style.border = "solid 1px #eeeeee";
                newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";
                newPreview.style.display = "block";

            }
        } else if (browserVersion.indexOf("FIREFOX") > -1) {//firefox
            var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
            if (firefoxVersion < 7) {//firefox7 below
                document.getElementById(imgPreviewId).setAttribute("src", fileObj.files[0].getAsDataURL());
            } else {//firefox7.0+ 
                document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(fileObj.files[0]));
            }
        } else {
            document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
        }
    } else {
        alert("only support" + allowExtention + "suffix");
        fileObj.value = ""; //clear Selected file
        if (browserVersion.indexOf("MSIE") > -1) {
            fileObj.select();
            document.selection.clear();
        }

    }
}
function changeFile(elem) {
    //file object , preview img tag id
    previewImage(elem,'imagePreview')
}
<input type="file"  id="netBarBig"  onchange="changeFile(this)"  />
<img  src="" id="imagePreview" style="width:120px;height:80px;" alt=""/>

Steve Jiang
quelle
1

Standard Iamge

                @Html.TextBoxFor(x => x.productModels.DefaultImage, new {@type = "file", @class = "form-control", onchange = "openFile(event)", @name = "DefaultImage", @id = "DefaultImage" })
                @Html.ValidationMessageFor(model => model.productModels.DefaultImage, "", new { @class = "text-danger" })
                    <img src="~/img/ApHandler.png"  style="height:125px; width:125px" id="DefaultImagePreview"/>
            </div>

 <script>
    var openFile = function (event) {
        var input = event.target;

        var reader = new FileReader();
        reader.onload = function () {
            var dataURL = reader.result;
            var output = document.getElementById('DefaultImagePreview');
            output.src = dataURL;
        };
        reader.readAsDataURL(input.files[0]);
    };
</script>
SHUBHASIS MAHATA
quelle
0

Hier ist eine Lösung, wenn Sie React verwenden:

import * as React from 'react'
import { useDropzone } from 'react-dropzone'

function imageDropper() {
  const [imageUrl, setImageUrl] = React.useState()
  const [imageFile, setImageFile] = React.useState()

  const onDrop = React.useCallback(
    acceptedFiles => {
      const file = acceptedFiles[0]
      setImageFile(file)

      // convert file to data: url
      const reader = new FileReader()
      reader.addEventListener('load', () => setImageUrl(String(reader.result)), false)
      reader.readAsDataURL(file)
    },
    [setImageFile, setImageUrl]
  )
  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })

  return (
    <div>
      <div {...getRootProps()}>
        {imageFile ? imageFile.name : ''}
        {isDragActive ? <p>Drop files here...</p> : <p>Select image file...</p>}
        <input {...getInputProps()} />
      </div>
      {imageUrl && (
        <div>
          Your image: <img src={imageUrl} />
        </div>
      )}
    </div>
  )
}
Wooster
quelle
0

Dies ist die einfachste Methode, um eine Vorschau des Bildes anzuzeigen, bevor es vom Browser auf den Server hochgeladen wird, ohne Ajax oder komplizierte Funktionen zu verwenden. Zum Laden des Bildes ist ein "onchange" -Ereignis erforderlich.

<body>
  <input type="file" onchange="preview()">
  <img id="frame" src="" width="100px" height="100px"/>
</body>
<script>
    function preview() {
      frame.src=URL.createObjectURL(event.target.files[0]);
    }
</script>

Das Bild wird sofort nach Auswahl geladen.

Klicken Sie auf diesen Link, um zu sehen, wie es funktioniert https://youtu.be/7_lGhrYZJWw

Merrin K.
quelle
-2

Für meine App mit verschlüsselten GET-URL-Parametern funktionierte nur dies. Ich habe immer eine TypeError: $(...) is null. Entnommen aus https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.addEventListener("load", function () {
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

Robert TheSim
quelle
-2
function assignFilePreviews() {
    $('input[data-previewable=\"true\"]').change(function() {
        var prvCnt = $(this).attr('data-preview-container');
        if (prvCnt) {
            if (this.files && this.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    var img = $('<img>');
                    img.attr('src', e.target.result);
                    img.error(function() {
                        $(prvCnt).html('');
                    });
                    $(prvCnt).html('');
                    img.appendTo(prvCnt);
                }
                reader.readAsDataURL(this.files[0]);
            }
        }
    });
}
$(document).ready(function() {
    assignFilePreviews();
});

HTML

<input type="file" data-previewable="true" data-preview-container=".prd-img-prv" />
<div class = "prd-img-prv"></div>

Dies behandelt auch den Fall, wenn eine Datei mit einem ungültigen Typ (z. B. PDF) ausgewählt wird

Jinu Joseph Daniel
quelle