Pratinjau gambar sebelum diunggah

1615

Saya ingin dapat melihat pratinjau file (gambar) sebelum diunggah. Tindakan pratinjau harus dilakukan semua di browser tanpa menggunakan Ajax untuk mengunggah gambar.

Bagaimana saya bisa melakukan ini?

Simbian
sumber
Perhatikan bahwa kecuali Anda menggunakan Gears atau plugin lain, Anda tidak dapat memanipulasi gambar di dalam browser: code.google.com/p/chromium/issues/detail?id=32276
Steve-o
Lihatlah pendekatan JavaScript murni ini, termasuk jawabannya dan ada komentar Ray Nicholus untuk solusi terakhir: stackoverflow.com/questions/16430016/…
Jonathan Root
Inilah artikel terperinci yang bagus dengan demo langsung codepedia.info/2015/06/...
Satinder singh
8
Berikut adalah solusi sederhana yang tidak menggunakan jquery: developer.mozilla.org/en-US/docs/Web/API/FileReader/…
John Gilmer

Jawaban:

2536

Silakan lihat kode contoh di bawah ini:

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>

Anda juga dapat mencoba sampel ini di sini .

Ivan Baev
sumber
5
Anda dapat meningkatkan kinerja sedikit dengan menetapkan pembaca sekali. jsfiddle.net/LvsYc/638
Jaider
84
Mengapa menggunakan jQuery untuk `$ ('# blah'). Attr ('src', e.target.result);` ketika Anda bisa melakukannya dengan mudahdocument.getElementById('blah').src=e.target.result)
EasyBB
4
Saya membuat implementasi ReactJS ini . Bekerja seperti pesona. @ kxc Anda harus melakukan panggilan ajax dan mengirim input.files[0]sebagai data, lihat dokumen jQuery .
Sumi Straessle
@IvanBaev input.files[0]tidak memiliki path lengkap. Bagaimana FileReader menemukan file?
Pak Tua
4
Tidak masalah, kapan pun Anda tidak bisa menggunakan jquery karena kembung dan vanila akan memberi Anda hasil lebih cepat terutama jika Anda memiliki banyak skrip.
EasyBB
357

Ada beberapa cara Anda bisa melakukan ini. Cara paling efisien adalah menggunakan URL.createObjectURL () pada File dari <input> Anda . Lewati URL ini ke img.src untuk memberi tahu browser agar memuat gambar yang disediakan.

Ini sebuah contoh:

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

Anda juga dapat menggunakan FileReader.readAsDataURL () untuk mem-parsing file dari <input> Anda. Ini akan membuat string dalam memori yang berisi representasi base64 dari gambar.

<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
sumber
40
Baca dengan cermat: readAsDataURL dan createObjectURL akan men-cache gambar di browser, lalu mengembalikan string yang disandikan base64 yang merujuk lokasi gambar dalam cache. Jika cache browser dihapus, string yang disandikan base64 tidak akan lagi merujuk gambar. String base64 bukan data gambar aktual, ini adalah url referensi ke gambar, dan Anda tidak harus menyimpannya ke database berharap untuk mengambil data gambar. Saya baru-baru ini membuat kesalahan ini (sekitar 3 menit yang lalu).
tfmontague
9
untuk menghindari masalah memori, Anda harus menelepon URL.revokeObjectURLsaat Anda selesai dengan gumpalan Anda
Apolo
@Apolo tidak dalam hal ini, lihat jawaban ini: stackoverflow.com/a/49346614/2313004
grreeenn
Mencoba solusi Anda .... terima kasih
Ajay Kumar
219

Solusi satu lapis:

Kode berikut menggunakan URL objek, yang jauh lebih efisien daripada URL data untuk melihat gambar besar (URL data adalah string besar yang berisi semua data file, sedangkan URL objek, hanya string pendek yang mereferensikan data file di Penyimpanan):

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

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

URL yang dihasilkan akan seperti:

blob:http%3A//localhost/7514bc74-65d4-4cf0-a0df-3de016824345
cnlevy
sumber
2
@Raptor dan seluruh File API ... ( FileReader, input.filesdll.) URL.createObjectURLAdalah cara untuk menangani file yang dikirimkan pengguna, hanya membuat symlink di memori ke file nyata pada disk pengguna.
Kaiido
@cnlevy Bagaimana kami bisa mengakses file yang diunggah? Apakah hanya mungkin untuk mendapatkannya dari URL seperti yang Anda sebutkan? Untuk lebih spesifik, saya menggunakan termos yang sudah mendukung akses file yang diunggah. Apakah ada cara lain dengan one-liner ini?
Abhishek Singh
ini adalah jawaban terbaik yang pernah
Navid Farjad
Solusi ini tidak berhasil untuk saya. Pratinjau gambar tidak ditampilkan.
Sundaramoorthy J
Jawaban Terbaik! Terima kasih
A7madev
46

Jawaban LeassTaTT bekerja dengan baik di peramban "standar" seperti FF dan Chrome. Solusi untuk IE ada tetapi terlihat berbeda. Berikut deskripsi solusi lintas-browser:

Dalam HTML kita membutuhkan dua elemen pratinjau, imguntuk browser standar dan divuntuk IE

HTML:

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

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

Dalam CSS kami menentukan hal spesifik IE berikut:

CSS:

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

Dalam HTML kami menyertakan standar dan Javascripts khusus IE:

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

Ini pic_preview.jsadalah Javascript dari jawaban LeassTaTT. Ganti $('#blah')whith the $('#preview')dan tambahkan$('#preview').show()

Sekarang Javascript khusus 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';
}    

Yaitu. Bekerja di IE7, IE8, FF dan Chrome. Silakan uji di IE9 dan laporkan. Gagasan pratinjau IE ditemukan di sini: http://forums.asp.net/t/1320559.aspx

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

Dmitri Dmitri
sumber
24

Saya telah mengedit jawaban @ Ivan untuk menampilkan gambar "Tidak Ada Pratinjau", jika itu bukan gambar:

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

Ini versi beberapa file , berdasarkan jawaban Ivan Baev.

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

Membutuhkan jQuery 1.8 karena penggunaan $ .parseHTML, yang seharusnya membantu dengan mitigasi XSS.

Ini akan bekerja di luar kotak, dan satu-satunya ketergantungan yang Anda butuhkan adalah jQuery.

Nino Škopac
sumber
16

Iya. Itu mungkin.

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

Anda bisa mendapatkan Demo Langsung dari sini.

Ny. Rahman
sumber
11

JSfiddle bersih dan sederhana

Ini akan berguna ketika Anda ingin acara dipicu secara tidak langsung dari div atau tombol.

<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
sumber
Hanya sebuah catatan: Saya tidak dapat mengambil kredit untuk ini tetapi Anda dapat menggunakan <label>dan menghindari javascript untuk menangani klik tombol sama sekali. Memicu input file dengan HTML / CSS murni. , dan itu sama sekali tidak rusak.
Reguler Joe
7

Contoh dengan beberapa gambar menggunakan JavaScript (jQuery) dan 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
sumber
5

Bagaimana dengan membuat fungsi yang memuat file dan menjalankan acara khusus. Kemudian lampirkan pendengar ke input. Dengan cara ini kami memiliki lebih banyak fleksibilitas untuk menggunakan file, tidak hanya untuk melihat pratinjau gambar.

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

Mungkin kode saya tidak sebagus beberapa pengguna tetapi saya pikir Anda akan mengerti maksudnya. Di sini Anda dapat melihat contohnya

ajorquera
sumber
5

Berikut ini adalah kode kerjanya.

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

Di Bereaksi, jika file ada di properti Anda, Anda dapat menggunakan:

{props.value instanceof File && (
    <img src={URL.createObjectURL(props.value)}/>
)}
Melle
sumber
1
Ini menyelamatkan hidupku! Jauh lebih sederhana daripada solusi Bereaksi menggunakan FileReader
Jonathan
2

Bagaimana dengan solusi ini?

Cukup tambahkan atribut data "tipe-data = dapat diedit" ke tag gambar seperti ini:

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

Dan skrip untuk proyek Anda tentunya ...

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

Lihat demo di JSFiddle

Rodolpho Brock
sumber
2

Coba ini

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

Pratinjau beberapa gambar sebelum diunggah menggunakan jQuery / javascript?

Ini akan mempratinjau beberapa file sebagai gambar kecil pada satu waktu

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>

Naskah

$("#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 Bekerja pada Codepen

Demo Bekerja di jsfiddle

Saya harap ini akan membantu.

vishpatel73
sumber
1

Saya telah membuat plugin yang dapat menghasilkan efek pratinjau di IE 7+ berkat internet, tetapi memiliki beberapa keterbatasan. Saya memasukkannya ke halaman github sehingga lebih mudah untuk mendapatkannya

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

Untuk mengunggah banyak gambar (Modifikasi ke Solusi @ 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/

Semoga ini bisa membantu seseorang.

Keyur
sumber
1

Ini kode saya. Mendukung 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
sumber
1

Iamge default

                @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
sumber
0

Ini solusinya jika Anda menggunakan Bereaksi:

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

Ini adalah metode paling sederhana untuk melihat pratinjau gambar sebelum mengunggahnya ke server dari browser tanpa menggunakan Ajax atau fungsi yang rumit. Perlu acara "onchange" untuk memuat gambar.

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

Gambar akan segera dimuat setelah memilihnya.

Merrin K
sumber
-2

untuk aplikasi saya, dengan parameter url GET terenkripsi, hanya ini yang berfungsi. Saya selalu mendapat TypeError: $(...) is null. Diambil dari 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
sumber
-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>

Ini juga menangani kasus ketika file dengan jenis yang tidak valid (mis. Pdf) dipilih

Jinu Joseph Daniel
sumber