Bir görüntüyü yüklenmeden önce önizleme


1614

Bir dosyayı (resim) yüklenmeden önce önizlemek istiyorum. Görüntüyü yüklemek için Ajax kullanılmadan önizleme eyleminin tümü tarayıcıda gerçekleştirilmelidir.

Bunu nasıl yapabilirim?


Gears veya başka bir eklenti kullanmazsanız, tarayıcıdaki resmi değiştiremeyeceğinizi unutmayın: code.google.com/p/chromium/issues/detail?id=32276
Steve-o

Cevabı ve Ray Nicholus'un son çözüm için yorumu da dahil olmak üzere bu saf JavaScript yaklaşımına göz atın: stackoverflow.com/questions/16430016/…
Jonathan Root


8
İşte jquery kullanmayan basit bir çözüm: developer.mozilla.org/en-US/docs/Web/API/FileReader/…
John Gilmer

Yanıtlar:


2535

Lütfen aşağıdaki örnek koda bir göz atın:

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>

Ayrıca, bu örneği burada deneyebilirsiniz .


5
Okuyucuyu bir kez tanımlayarak biraz performansı artırabilirsiniz. jsfiddle.net/LvsYc/638
Jaider

84
Neden için kullanım jQuery `$ ( '# selam') özn ( 'src', e.target.result);` sadece yapmış olabilir zaman.document.getElementById('blah').src=e.target.result)
EasyBB

4
Bunun bir ReactJS uygulamasını yaptım . Tıkır tıkır çalışıyor. @kxc bir ajax araması yapmalı ve input.files[0]veri olarak göndermelisiniz , bkz . jQuery'nin dokümanı .
Sumi Straessle

@IvanBaev input.files[0]tam yolu yok. FileReader dosyayı nasıl bulur?
Old Geezer

4
Önemli değil, jquery'yi şişirildiği için kullanamadığınızda ve vanilya özellikle tonlarca komut dosyanız varsa daha hızlı sonuçlar verecektir.
EasyBB

356

Bunu yapmanın birkaç yolu vardır. En etkili yol , <input> öğenizden Dosya üzerinde URL.createObjectURL () yöntemini kullanmaktır . Tarayıcıya sağlanan resmi yüklemesini bildirmek için bu URL'yi img.src adresine iletin.

İşte bir örnek:

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

Dosyayı <input> öğenizden ayrıştırmak için FileReader.readAsDataURL () öğesini de kullanabilirsiniz . Bu, bellekte görüntünün base64 temsilini içeren bir dize oluşturur.

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


40
Dikkatle okuyun: readAsDataURL ve createObjectURL bir görüntüyü tarayıcıda önbelleğe alır, ardından önbellekteki görüntü konumuna başvuran base64 kodlu bir dize döndürür. Tarayıcı önbelleği temizlenirse, base64 kodlu dize artık görüntüye başvurmaz. Base64 dizesi gerçek görüntü verileri değil, görüntüye bir url referansıdır ve görüntü verilerini almayı umarak veritabanına kaydetmemelisiniz. Geçenlerde bu hatayı yaptım (yaklaşık 3 dakika önce).
tfmontague

9
URL.revokeObjectURL
Apolo

@ Bu durumda değil, şu cevaba bakınız: stackoverflow.com/a/49346614/2313004
grreeenn

Çözümünüzü deniyorum .... teşekkürler
Ajay Kumar

219

Tek katmanlı çözüm:

Aşağıdaki kod, büyük resimleri görüntülemek için veri URL'sinden çok daha verimli olan nesne URL'lerini kullanır (Veri URL'si, tüm dosya verilerini içeren büyük bir dizedir; oysa nesne URL'si, dosya verilerini içeren kısa bir dizedir. hafıza):

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

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

Oluşturulan URL şöyle olacaktır:

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

2
@Raptor ve böylece tüm Dosya API'si ... ( FileReader, input.filesvb.) URL.createObjectURLKullanıcı tarafından gönderilen dosyalar ile uğraşırken gitmenin yoludur, sadece kullanıcının diskindeki gerçek dosyaya bellek içi bir sembolik bağlantı oluşturur.
Kaiido

@cnlevy Yüklenen dosyalara nasıl erişebiliriz? URL'yi yalnızca belirttiğiniz gibi almak mümkün mü? Spesifik olarak, zaten yüklenmiş dosyalara erişimi destekleyen bir şişe kullanıyorum. Bu tek astarla başka bir yol var mı?
Abhishek Singh

Bu şimdiye kadarki en iyi cevap
Navid Farjad

Bu çözüm benim için işe yaramadı. Görüntü önizleme gösterilmiyor.
Sundaramoorthy J

En iyi cevap! Teşekkür ederim
A7madev

46

LeassTaTT'nin cevabı, FF ve Chrome gibi "standart" tarayıcılarda iyi çalışır. IE için çözüm var ama farklı görünüyor. Çapraz tarayıcı çözümünün açıklaması:

HTML'de iki önizleme elemanları, gerek imgstandart tarayıcılar için ve diviçin IE

HTML:

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

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

CSS'de şu IE'ye özgü şeyi belirtiriz:

CSS:

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

HTML'ye standart ve IE'ye özgü Javascripts ekliyoruz:

<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.jsLeassTaTT cevabı Javascript olduğunu. $('#blah')Whith'i değiştirin $('#preview')ve$('#preview').show()

Şimdi IE'ye özgü 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';
}    

Öyle. IE7, IE8, FF ve Chrome'da çalışır. Lütfen IE9'da test edin ve rapor edin. IE önizleme fikri burada bulundu: http://forums.asp.net/t/1320559.aspx

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


24

Bir görüntü değilse, @ Ivan'ın yanıtını "Önizleme Yok" görüntüsünü görüntülemek için düzenledim:

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

19

İşte Ivan Baev'in cevabına dayanan çoklu dosya sürümü.

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

XSS azaltılmasında yardımcı olması gereken $ .parseHTML kullanımı nedeniyle jQuery 1.8 gerektirir.

Bu kutudan çıkacak ve ihtiyacınız olan tek bağımlılık jQuery.


16

Evet. Bu mümkün.

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

Buradan Canlı Demo alabilirsiniz .


11

Temiz ve basit JSfiddle

Bu, bir div veya düğmeden dolaylı olarak tetiklenmesini istediğinizde yararlı olacaktır.

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

Sadece bir not: Bunun için kredi alamıyorum ama <label>düğmeyi tamamen ele almak için javascript kullanabilir ve önleyebilirsiniz. Saf HTML / CSS ile dosya girişini tetikleyin. ve bu hiç de çirkin değil.
Düzenli Joe

7

JavaScript (jQuery) ve HTML5 kullanan birden çok görüntüye örnek

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

İşaretleme (HTML)

<form id="form1" runat="server">
    <input type="file" id="imgUpload" multiple/>
</form>

5

Dosyayı yükleyen ve özel bir olayı başlatan bir işlev oluşturmaya ne dersiniz? Ardından girişe bir dinleyici ekleyin. Bu şekilde, yalnızca görüntüleri önizlemek için değil, dosyayı kullanma konusunda da daha fazla esnekliğe sahibiz.

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

Muhtemelen benim kodum bazı kullanıcılar kadar iyi değil ama bence bu konuda olsun. Burada bir örnek görebilirsiniz


5

Çalışma kodu aşağıdadır.

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

4

React uygulamasında, dosya desteklerinizdeyse şunları kullanabilirsiniz:

{props.value instanceof File && (
    <img src={URL.createObjectURL(props.value)}/>
)}

1
Bu hayatımı kurtardı! FileReader kullanarak React çözümünden çok daha basit
Jonathan

2

Bu çözüm ne olacak?

Bunun gibi bir resim etiketine "data-type = editable" veri özelliğini eklemeniz yeterlidir:

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

Ve projenizin senaryo dışı dersleri ...

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

Demoyu JSFiddle'da görün


2

Bunu dene

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


2

Birden fazla görüntüyü jQuery / javascript kullanılarak yüklenmeden önce önizleme?

Bu, aynı anda birden fazla dosyayı küçük resim olarak önizleyecektir

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>

Senaryo

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

Codepen Üzerinde Çalışma Demosu

Jsfiddle üzerinde Çalışma Demosu

Umarım bu yardımcı olacak.


1

İnternet sayesinde IE 7 + 'da önizleme efekti oluşturabilecek bir eklenti yaptım, ancak birkaç sınırlama var. Bir github sayfasına koydum, böylece elde etmek daha kolay

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


1

Çoklu görüntü yükleme için (@ IvanBaev'in Çözümünde Değişiklik)

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/

Umarım bu birine yardımcı olur.


1

Bu benim kodum. IE desteği [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=""/>


1

Varsayılan 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>

0

React kullanıyorsanız bir çözüm:

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

0

Bu, Ajax veya herhangi bir karmaşık işlev kullanmadan tarayıcıdan sunucuya yüklenmeden önce görüntüyü önizlemenin en basit yöntemidir. Görüntüyü yüklemek için bir "onchange" olayı gerekir.

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

Görüntü seçildikten hemen sonra yüklenecektir.

Nasıl çalıştığını izlemek için bu bağlantıyı tıklayın https://youtu.be/7_lGhrYZJWw


-2

benim app için, şifreli GET url parametreleri ile, sadece bu çalıştı. Her zaman bir TypeError: $(...) is null. Alındığı 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...">


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

Bu, geçersiz türdeki (ör. Pdf) bir dosya seçildiğinde de durumu ele alır

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.