Pertanyaan Pratinjau gambar sebelum diunggah


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

Bagaimana saya bisa melakukan ini?


1177
2017-12-16 09:51


asal


Jawaban:


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

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

Anda juga bisa coba contoh ini di sini.


1941
2017-12-16 09:55



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

Inilah contohnya:

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

Anda juga bisa menggunakan FileReader.readAsDataURL () untuk mem-parsing file dari <input> Anda. Ini akan membuat string dalam memori yang berisi representasi base64 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>


233
2017-11-27 08:17



Solusi satu-liner:

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, hanyalah string pendek yang merujuk data file di- ingatan):

<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

128
2017-11-18 20:00



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, img untuk browser standar dan div untuk 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 menetapkan hal spesifik IE berikut:

CSS:

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

Dalam HTML kami menyertakan standar dan Javascript 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>

Itu pic_preview.js adalah Javascript dari jawaban LeassTaTT. Ganti $('#blah') whith the $('#preview') dan tambahkan $('#preview').show()

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

Itu benar. Berfungsi di IE7, IE8, FF, dan Chrome. Silakan uji di IE9 dan laporkan. Ide preview IE ditemukan di sini: 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



Saya telah mengedit jawaban @ Ivan untuk menampilkan gambar "Tidak Ada Pratinjau yang Tersedia", 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');
    }
}

22
2018-06-05 06:23



Ini a banyak file versi, 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 mitigasi XSS.

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


14
2017-12-14 15:30



Iya nih. 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 Live dari sini.


11
2017-07-25 11:20



Bersih dan sederhana JSfiddle

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>

7
2017-11-30 05:57



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>

6
2017-11-26 06:33



Bagaimana dengan membuat fungsi yang memuat file dan mengaktifkan peristiwa khusus. Kemudian lampirkan pendengar ke input. Dengan cara ini kami memiliki lebih banyak fleksibilitas untuk menggunakan file, bukan 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 mendapatkan intinya. Di sini Anda bisa melihat contoh


4
2017-07-29 18:41