Preview gambar sebelum upload

Aku ingin dapat melihat pratinjau file (gambar) sebelum di-upload. Preview tindakan yang harus dilaksanakan semua dalam browser tanpa menggunakan Ajax untuk meng-upload gambar.

Bagaimana saya bisa melakukan ini?

Justin
Pertanyaan edit 6 September 2011 в 10:49
Pemrograman
file-upload javascript jquery
16 Desember 2010 в 9:51
192 tayangan
Mengomentari pertanyaan (6)
Larutan

Silakan lihat contoh kode 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>

  <input type='file' id="imgInp" />
  ![your image](#)

Juga, anda dapat mencoba ini contoh di sini](http://jsfiddle.net/LvsYc/).

dgknca
Jawaban edit 7 Juni 2019 в 10:57
Komentar (13)

Ada beberapa cara yang dapat anda lakukan ini. Cara yang paling efisien akan menggunakan URL.createObjectURL() pada File dari <input>. Lulus URL ini untuk img.src untuk memberitahu browser untuk memuat gambar yang disediakan.

Berikut ini's contoh:

<input type="file" accept="image/*" onchange="loadFile(event)">

<script>
  var loadFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
  };
</script>

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

<input type="file" accept="image/*" onchange="loadFile(event)">

<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>
Komentar (2)

Satu-liner solusi:

Kode berikut menggunakan objek Url, yang jauh lebih efisien dari data URL untuk melihat gambar besar (data URL yang besar adalah string yang berisi semua file data, sedangkan objek URL, singkat string referensi file data di memori):



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

Dihasilkan URL akan menjadi seperti:

blob:http%3A//localhost/7514bc74-65d4-4cf0-a0df-3de016824345
cnlevy
Jawaban edit 7 Juni 2018 в 1:21
Komentar (5)

Jawaban dari LeassTaTT bekerja dengan baik di "s" browser seperti FF dan Chrome. Solusi untuk IE ada, tetapi terlihat berbeda. Berikut keterangan dari cross-browser solusi:

Dalam HTML kita perlu dua pratinjau elemen, img untuk browser standar dan div untuk IE

HTML:



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

Dalam CSS kita tentukan sebagai berikut YAITU hal tertentu:

CSS:

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

Dalam HTML kita termasuk standar dan IE-spesifik Javascript:


<script type="text/javascript">
  {% include "pic_preview.js" %}
</script>
Komentar (0)

Saya telah diedit @Ivan's jawaban untuk tampilan "Tidak ada Pratinjau yang Tersedia" gambar, jika tidak 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');
    }
}
Komentar (0)

Berikut ini's a beberapa file versi, berdasarkan Ivan Baev's jawaban.

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('')).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 XSS mitigasi.

Ini akan bekerja out of the box, dan hanya ketergantungan yang anda butuhkan adalah jQuery.

Komentar (0)

Ya. Hal ini mungkin.

Html

<input type="file" accept="image/*"  onchange="showMyImage(this)" />
 <br/>

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 [Live Demo][1] dari sini.

Komentar (0)

Bersih dan sederhana [JSfiddle][1]

Ini akan berguna ketika anda menginginkan acara Tersebut dipicu tidak langsung dari div atau tombol.



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

UPLOAD IMAGE

<script type="text/javascript">
function HandleBrowseClick(hidden_input_image)
{
    var fileinputElement = document.getElementById(hidden_input_image);
    fileinputElement.click();
}     
</script>
Sivashanmugam Kannan
Jawaban edit 13 Desember 2017 в 1:39
Komentar (1)

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.attr('src', e.target.result);
               img.appendTo('#form1');  
            }
            reader.readAsDataURL(input.files[i]);
           }
        }
    }

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

Markup (HTML)


    <input type="file" id="imgUpload" multiple/>
AdamMcquiff
Jawaban edit 2 Mei 2017 в 12:59
Komentar (0)

Berikut adalah kode kerja.

<input type='file' onchange="readURL(this);" />

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

Bagaimana menciptakan sebuah fungsi yang memuat file dan kebakaran acara adat. Kemudian melampirkan pendengar untuk input. Dengan cara ini kita 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 saya kode isn't sebagai baik sebagai beberapa pengguna, tapi saya pikir anda akan mendapatkan titik itu. Di sini anda dapat melihat sebuah [contoh][1]

Komentar (0)

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 = "";
          output.insertBefore(div, null);
        });        
        picReader.readAsDataURL(file);
      }

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

Bagaimana dengan solusi ini?

Hanya menambahkan data atribut "data-type=editable" untuk tag gambar seperti ini:

Dan script 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
// https://stackoverflow.com/questions/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][1]

Komentar (0)

Saya telah membuat sebuah plugin yang dapat menghasilkan preview efek di IE 7+ berkat internet, tetapi memiliki beberapa keterbatasan. Aku 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>


        <input type="file" name="file1">
        <input type="file" name="file2">
        <input type="submit">
Komentar (0)

Untuk Beberapa upload gambar (Modifikasi @IvanBaev's Solusi)

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('');
          }
          reader.readAsDataURL(input.files[i]);
        }
    }
}

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

Semoga ini bisa membantu seseorang.

Komentar (0)
Default 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" })

            </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>
Komentar (0)

Dalam Bereaksi, jika file di alat peraga, anda dapat menggunakan:

bej {alat peraga.nilai instanceof File && ( <img src={URL.createObjectURL(alat peraga.nilai)}/> )}

Komentar (0)

It's my kode.Dukungan IE[6-9], chrome 17+、firefox、Opera 11+、Maxthon3

<input type="file" id="netBarBig" onchange="changeFile(ini)" /> 
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')
}
dgknca
Jawaban edit 7 Juni 2019 в 11:01
Komentar (0)

Berikut ini's solusi jika anda're 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: 
        </div>
      )}
    </div>
  )
}
Komentar (0)

melihat beberapa gambar sebelum diupload menggunakan jQuery/javascript?

Ini akan melihat beberapa file sebagai gambar kecil pada suatu waktu

Html

`` <input id="ImageMedias" beberapa="beberapa" name="ImageMedias" type="file" menerima=".jfif,.jpg,.jpeg,.png,.gif" class="custom-file-input" nilai="">

`` **Script**

$("#ImageMedias").change(function () { if (typeof (FileReader) != "undefined") { var dvPreview = $("#divImageMediaPreview"); dvPreview.html(""); $($(this)[0].file).masing-masing(fungsi () { var file = $(this); var reader = new FileReader(); pembaca.onload = function (e) { var img = $("<img />"); img.attr("style", "width: 150px; height:100px; padding: 10px"); img.attr("src", e.target.hasil); dvPreview.append(img); } pembaca.readAsDataURL(file[0]); }); } else { alert("browser Ini tidak mendukung HTML5 FileReader."); } });

Demo bekerja di Codepen

[Demo bekerja di jsfiddle][1]

Saya berharap ini akan membantu.

vishpatel73
Jawaban edit 21 Agustus 2019 в 7:18
Komentar (0)