javascript - แสดงตัวอย่างรูปภาพก่อนที่มันจะถูกอัปโหลด

ฉันต้องการสามารถดูตัวอย่างไฟล์ (รูปภาพ) ก่อนที่จะอัปโหลดได้ การดูตัวอย่างควรทำทั้งหมดในเบราว์เซอร์โดยไม่ต้องใช้ Ajax ในการอัปโหลดรูปภาพ

ฉันสามารถทำสิ่งนี้ได้อย่างไร?

คำตอบ #1

imgInp.onchange = evt => {
  const [file] = imgInp.files
  if (file) {
    blah.src = URL.createObjectURL(file)
  }
}

<form runat="server">
  <input accept="image/*" type='file' id="imgInp" />
  <img id="blah" src="#" alt="your image" />
</form>

คำตอบ #2

มีหลายวิธีที่คุณสามารถทำสิ่งนี้ได้ วิธีที่มีประสิทธิภาพที่สุดคือการใช้ URL.createObjectURL() กับไฟล์จาก <input> ของคุณ ส่ง URL นี้ไปยัง img.src เพื่อบอกเบราว์เซอร์ให้โหลดภาพที่ให้มา

นี่คือตัวอย่าง:

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

คุณยังสามารถใช้ FileReader.readAsDataURL() เพื่อแยกวิเคราะห์ไฟล์จาก <input> ของคุณได้ ซึ่งจะสร้างสตริงในหน่วยความจำที่มีการแทนค่าภาพในรูปแบบ base64

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

คำตอบ #3

วิธีแก้แบบหนึ่งบรรทัด:

โค้ดต่อไปนี้ใช้ URL ของอ็อบเจ็กต์ ซึ่งมีประสิทธิภาพมากกว่าการใช้ URL ของข้อมูลสำหรับการดูภาพขนาดใหญ่ (URL ของข้อมูลคือสตริงขนาดใหญ่ที่มีข้อมูลไฟล์ทั้งหมด ในขณะที่ URL ของอ็อบเจ็กต์เป็นเพียงสตริงสั้น ๆ ที่อ้างอิงถึงข้อมูลไฟล์ในหน่วยความจำ)

<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 ที่สร้างขึ้นจะเป็นดังนี้:

blob:http%3A//localhost/7514bc74-65d4-4cf0-a0df-3de016824345

คำตอบ #4

ลองอันนี้

เพื่อดูภาพตัวอย่างก่อนอัปโหลดไปยังเซิร์ฟเวอร์จากเบราว์เซอร์โดยไม่ใช้ Ajax หรือฟังก์ชันซับซ้อนใด ๆ

มันต้องการเหตุการณ์ "onChange" เพื่อโหลดรูปภาพ

function preview() {
    frame.src=URL.createObjectURL(event.target.files[0]);
}

<form>
  <input type="file" onchange="preview()">
  <img id="frame" src="" width="100px" height="100px"/>
</form>

คลิกที่นี่เพื่อดูตัวอย่างหลายรูปภาพ

คำตอบ #5

คำตอบของ LeassTaTT ใช้งานได้ดีในเบราว์เซอร์ "มาตรฐาน" เช่น FF และ Chrome มีวิธีแก้ปัญหาสำหรับ IE อยู่แต่มีรูปแบบที่แตกต่าง นี่คือคำอธิบายของวิธีแก้ปัญหาข้ามเบราว์เซอร์:

ใน HTML เราต้องการองค์ประกอบตัวอย่างสองตัว, img สำหรับเบราว์เซอร์มาตรฐาน และ div สำหรับ IE

HTML :

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

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

ใน CSS เราระบุสิ่งที่เฉพาะสำหรับ IE ดังต่อไปนี้:

CSS :

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

ใน HTML เราจะรวมสคริปต์มาตรฐานและสคริปต์ของ IE:

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

pic_preview.js คือ Javascript จากคำตอบของ LeassTaTT แทนที่ $ ('#blah') ด้วย $ ('#preview') และเพิ่ม $ ('#preview').show()

ตอนนี้ Javascript เฉพาะ 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';
}    

นั่นแหละ ทำงานได้ใน IE7, IE8, FF และ Chrome กรุณาทดสอบใน IE9 และรายงาน ความคิดเรื่อง IE preview ถูกพบที่นี่: http://forums.asp.net/t/1320559.aspx

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

คำตอบ #6

สองบรรทัดสั้น

นี่คือการปรับปรุงขนาดของคำตอบ cmlevy - ลองดู

<input type=file oninput="pic.src=window.URL.createObjectURL(this.files[0])">
<img id="pic" />

คำตอบ #7

ฉันได้แก้ไขคำตอบของ @Ivan เพื่อแสดงรูปภาพ "ไม่มีตัวอย่างให้ดู" หากมันไม่ใช่รูปภาพ:

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

คำตอบ #8

นี่คือเวอร์ชัน หลายไฟล์ โดยอิงจากคำตอบของ Ivan Baev

เอชทีเอ็มแอล

<input type="file" multiple id="gallery-photo-add">
<div class="gallery"></div>

จาวาสคริปต์/เจเควรี่

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

ต้องการ jQuery 1.8 เนื่องจากการใช้งาน $.parseHTML ซึ่งควรช่วยในการลดความเสี่ยงของ XSS

นี่จะใช้งานได้ทันที และสิ่งที่ต้องพึ่งพาเดียวที่คุณต้องการคือ jQuery

คำตอบ #9

ใช่ มันเป็นไปได้

เอชทีเอ็มแอล

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

คุณสามารถรับการสาธิตสดได้จากที่นี่

คำตอบ #10

เพื่อพรีวิวหลายไฟล์ โดยใช้ jquery

$(document).ready(function(){
    $('#image').change(function(){
        $("#frames").html('');
        for (var i = 0; i < $(this)[0].files.length; i++) {
            $("#frames").append('<img src="'+window.URL.createObjectURL(this.files[i])+'" width="100px" height="100px"/>');
        }
    });
});

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <input type="file" id="image" name="image[]" multiple /><br/>
    <div id="frames"></div>
</body>

คำตอบ #11

สะอาดและเรียบง่าย JSfiddle

นี่จะมีประโยชน์เมื่อคุณต้องการให้เหตุการณ์ถูกเรียกใช้อย่างอ้อมจาก div หรือปุ่ม

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