Wyświetl podgląd obrazu przed przesłaniem

1611

Chcę mieć możliwość podglądu pliku (obrazu) przed przesłaniem. Podgląd powinien zostać wykonany w przeglądarce bez użycia Ajaxa do przesłania obrazu.

W jaki sposób mogę to zrobić?

Simbian
źródło
Pamiętaj, że dopóki nie użyjesz wtyczki Gears lub innej wtyczki, nie możesz manipulować obrazem w przeglądarce: code.google.com/p/chromium/issues/detail?id=32276
Steve-o
Sprawdź to podejście oparte na czystym JavaScript, w tym jego odpowiedź, a tam komentarz Raya Nicholusa do ostatecznego rozwiązania: stackoverflow.com/questions/16430016/...
Jonathan Root
Oto ładny szczegółowy artykuł z demo na żywo codepedia.info/2015/06/…
Satinder singh
8
Oto proste rozwiązanie, które nie korzysta z jquery: developer.mozilla.org/en-US/docs/Web/API/FileReader/…
John Gilmer

Odpowiedzi:

2533

Spójrz na przykładowy kod poniżej:

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>

Możesz także wypróbować tę próbkę tutaj .

Ivan Baev
źródło
5
Możesz nieco poprawić wydajność, określając raz czytnik. jsfiddle.net/LvsYc/638
Jaider
84
Po co używać jQuery dla `$ ('# blah'). Attr ('src', e.target.result);` `kiedy można po prostu zrobićdocument.getElementById('blah').src=e.target.result)
EasyBB
4
Zrobiłem to ReactJS tego . Działa jak marzenie. @ kxc powinieneś wykonać wywołanie ajax i wysłać je input.files[0]jako dane, patrz dokument jQuery .
Sumi Straessle,
@IvanBaev input.files[0]nie ma pełnej ścieżki. Jak FileReader lokalizuje plik?
Old Geezer
4
Nie ma znaczenia, ilekroć nie możesz użyć jquery, ponieważ jest ona rozdęta, a wanilia da Ci szybsze wyniki, szczególnie jeśli masz mnóstwo skryptów.
EasyBB,
355

Można to zrobić na kilka sposobów. Najbardziej wydajnym sposobem byłoby użycie URL.createObjectURL () w pliku z <wejścia> . Przekaż ten adres URL do img.src, aby poinformować przeglądarkę o załadowaniu dostarczonego obrazu.

Oto przykład:

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

Możesz także użyć FileReader.readAsDataURL () do parsowania pliku z <wejścia>. Spowoduje to utworzenie ciągu w pamięci zawierającego reprezentację base64 obrazu.

<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
źródło
40
Przeczytaj uważnie: readAsDataURL i createObjectURL buforują obraz w przeglądarce, a następnie zwracają ciąg zakodowany w standardzie base64, który odwołuje się do lokalizacji obrazu w pamięci podręcznej. Jeśli pamięć podręczna przeglądarki zostanie wyczyszczona, ciąg zakodowany w standardzie base64 nie będzie już odnosił się do obrazu. Ciąg base64 nie jest rzeczywistymi danymi obrazu, jest referencją do obrazu i nie należy zapisywać go w bazie danych, mając nadzieję na odzyskanie danych obrazu. Niedawno popełniłem ten błąd (około 3 minut temu).
tfmontague
8
aby uniknąć problemów z pamięcią, powinieneś zadzwonić, URL.revokeObjectURLgdy skończysz z blobem
Apolo,
@Apolo nie w tym przypadku, zobacz tę odpowiedź: stackoverflow.com/a/49346614/2313004
grreeenn
Wypróbowanie rozwiązania .... dzięki
Ajay Kumar
219

Rozwiązanie jednowarstwowe:

Poniższy kod używa URL-i obiektu, który jest znacznie bardziej wydajny niż URL danych do przeglądania dużych obrazów (URL danych to ogromny ciąg zawierający wszystkie dane pliku, podczas gdy URL obiektu to tylko krótki ciąg odwołujący się do danych pliku pamięć):

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

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

Wygenerowany adres URL będzie wyglądał następująco:

blob:http%3A//localhost/7514bc74-65d4-4cf0-a0df-3de016824345
cnlevy
źródło
2
@Raptor i tak jest cały File API ... ( FileReader, input.filesetc.) URL.createObjectURLjest do zrobienia przy rozpatrywaniu użytkowników złożone pliki, a jedynie tworzy dowiązania w pamięci realnej pliku na dysku użytkownika.
Kaiido,
@cnlevy Jak możemy uzyskać dostęp do przesłanych plików? Czy można to zrobić tylko z adresu URL, o którym wspominałeś? Mówiąc konkretnie, używam kolby, która już obsługuje dostęp do przesłanych plików. Czy jest jakiś inny sposób z tym linkiem?
Abhishek Singh,
to najlepsza odpowiedź w historii
Navid Farjad,
To rozwiązanie nie działało dla mnie. Podgląd obrazu nie jest wyświetlany.
Sundaramoorthy J
Najlepsza odpowiedź! Dziękuję
A7madev
46

Odpowiedź LeassTaTT działa dobrze w „standardowych” przeglądarkach takich jak FF i Chrome. Rozwiązanie dla IE istnieje, ale wygląda inaczej. Oto opis rozwiązania dla różnych przeglądarek:

W HTML potrzebujemy dwóch elementów podglądu, imgdla standardowych przeglądarek i divdla IE

HTML:

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

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

W CSS określamy następującą rzecz specyficzną dla IE:

CSS:

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

W HTML dołączamy standardowe i specyficzne dla IE Javascripts:

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

Jest pic_preview.jsto JavaScript z odpowiedzi LeassTaTT. Wymień $('#blah')whith $('#preview')i dodaj$('#preview').show()

Teraz JavaScript specyficzny dla IE (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';
}    

To jest. Działa w IE7, IE8, FF i Chrome. Przetestuj w IE9 i zgłoś. Pomysł podglądu IE został znaleziony tutaj: http://forums.asp.net/t/1320559.aspx

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

Dmitri Dmitri
źródło
24

Zredagowałem odpowiedź @ Ivan, aby wyświetlić obraz „Brak podglądu”, jeśli nie jest to obraz:

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
źródło
19

Oto wersja z wieloma plikami , oparta na odpowiedzi Ivana Baeva.

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

Wymaga jQuery 1.8 ze względu na użycie $ .parseHTML, co powinno pomóc w łagodzeniu XSS.

Działa to natychmiast po wyjęciu z pudełka, a jedyną potrzebną zależnością jest jQuery.

Nino Škopac
źródło
16

Tak. To jest możliwe.

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

Tutaj możesz pobrać wersję demonstracyjną na żywo .

Md. Rahman
źródło
11

Czysty i prosty JSfiddle

Będzie to przydatne, gdy chcesz Zdarzenie wyzwalane pośrednio z div lub przycisku.

<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
źródło
Tylko uwaga: nie mogę tego przypisać, ale możesz używać <label>javascript do unikania obsługi kliknięcia przycisku i unikać go. Uruchom wejście pliku z czystym HTML / CSS. i wcale nie jest hacking.
Zwykły Joe,
7

Przykład z wieloma obrazami przy użyciu JavaScript (jQuery) i 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);
    });
}

Znaczniki (HTML)

<form id="form1" runat="server">
    <input type="file" id="imgUpload" multiple/>
</form>
Ratan Paul
źródło
5

Co powiesz na utworzenie funkcji, która ładuje plik i uruchamia niestandardowe zdarzenie. Następnie dołącz odbiornik do wejścia. W ten sposób mamy większą elastyczność w korzystaniu z pliku, nie tylko do podglądu obrazów.

/**
 * @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)

Prawdopodobnie mój kod nie jest tak dobry, jak niektórzy użytkownicy, ale myślę, że zrozumiesz. Tutaj możesz zobaczyć przykład

ajorquera
źródło
5

Poniżej znajduje się działający kod.

<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
źródło
4

W React, jeśli plik znajduje się w twoich rekwizytach, możesz użyć:

{props.value instanceof File && (
    <img src={URL.createObjectURL(props.value)}/>
)}
Melle
źródło
1
To uratowało mi życie! Znacznie prostsze niż rozwiązanie React przy użyciu FileReadera
Jonathan
2

Co z tym rozwiązaniem?

Wystarczy dodać atrybut danych „data-type = editable” do tagu graficznego takiego jak ten:

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

Oczywiście skrypt do twojego projektu ...

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

Zobacz demo na JSFiddle

Rodolpho Brock
źródło
2

Spróbuj tego

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
źródło
2

Czy wyświetlić podgląd wielu zdjęć przed przesłaniem przy użyciu jQuery / javascript?

Spowoduje to wyświetlenie podglądu wielu plików jako miniatur

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>

Scenariusz

$("#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.");
    }
});

Demo robocze na Codepen

Działa demo na jsfiddle

Mam nadzieję, że to pomoże.

vishpatel73
źródło
1

Zrobiłem wtyczkę, która może generować efekt podglądu w IE 7+ dzięki Internetowi, ale ma kilka ograniczeń. Umieściłem go na stronie github, aby łatwiej było go zdobyć

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

Andrzej
źródło
1

W przypadku przesyłania wielu zdjęć (modyfikacja rozwiązania @ IvanBaev)

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/

Mam nadzieję, że to komuś pomoże.

Keyur
źródło
1

To mój kod. Obsługa 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
źródło
1

Domyślnie 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
źródło
0

Oto rozwiązanie, jeśli używasz React:

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
źródło
0

Oto jedna prosta metoda podglądu obrazu przed przesłaniem go na serwer z przeglądarki bez użycia Ajax lub jakichkolwiek skomplikowanych funkcji. Potrzebuje zdarzenia „onchange”, aby załadować obraz.

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

Obraz zostanie natychmiast załadowany po wybraniu.

Kliknij ten link, aby zobaczyć, jak to działa https://youtu.be/7_lGhrYZJWw

Merrin K.
źródło
-2

w mojej aplikacji z zakodowanymi parametrami GET url tylko to działało. Zawsze mamTypeError: $(...) is null . Zaczerpnięte z 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
źródło
-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>

Dotyczy to również przypadku, gdy zostanie wybrany plik nieprawidłowego typu (np. Pdf)

Jinu Joseph Daniel
źródło