이미지를 업로드하기 전에 미리보기

질문자 :Simbian

파일(이미지)을 업로드하기 전에 미리 볼 수 있기를 원합니다. 미리보기 작업은 Ajax를 사용하여 이미지를 업로드하지 않고 브라우저에서 모두 실행되어야 합니다.

어떻게 해야 하나요?

 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>

Ivan Baev

이 작업을 수행할 수 있는 몇 가지 방법이 있습니다. 가장 효율적인 방법은 <input> 의 파일 에서 URL.createObjectURL() 을 사용하는 것입니다. 이 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>

nkron

원 라이너 솔루션:

다음 코드는 큰 이미지를 볼 때 데이터 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

cnlevy

이것은 가장 간단한 방법입니다

---

Ajax나 복잡한 기능을 사용하지 않고 브라우저에서 SERVER로 이미지를 업로드하기 전에 이미지를 미리 보려면.

---

이미지를 로드하려면 " 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>

여러 이미지를 미리 보려면 여기를 클릭하세요.

Merrin K

LeassTaTT의 답변은 FF 및 Chrome과 같은 "표준" 브라우저에서 잘 작동합니다. IE에 대한 솔루션이 존재하지만 다르게 보입니다. 브라우저 간 솔루션에 대한 설명은 다음과 같습니다.

HTML에서는 두 개의 미리보기 요소가 필요합니다. 표준 브라우저용 img 와 IE 용 div

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 전용 Javascript가 포함됩니다.

 <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 는 LeassTaTT 답변의 Javascript입니다. $('#blah') $('#preview') 로 바꾸고 $('#preview').show()

이제 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'; }

그거야. IE7, IE8, FF 및 Chrome에서 작동합니다. IE9에서 테스트 후 보고해주세요. IE 미리보기에 대한 아이디어는 여기에서 찾을 수 있습니다. http://forums.asp.net/t/1320559.aspx

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

Dmitri Dmitri

이미지가 아닌 경우 "미리보기를 사용할 수 없음" 이미지를 표시하도록 @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'); } }

Sachin Prasad

다음은 Ivan Baev의 답변을 기반으로 한 여러 파일 버전입니다.

HTML

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

XSS 완화에 도움이 되는 $.parseHTML 사용으로 인해 jQuery 1.8이 필요합니다.

이것은 기본적으로 작동하며 필요한 유일한 종속성은 jQuery입니다.

The Onin

예. 것이 가능하다.

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

여기에서 라이브 데모 를 받을 수 있습니다.

Md. Rahman

cmlevy 답변 의 크기 개선입니다.

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

Kamil Kiełczewski

깨끗하고 간단한 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>

Siva Kannan

JavaScript(jQuery) 및 HTML5를 사용하는 여러 이미지의 예

자바스크립트(제이쿼리)

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

마크업(HTML)

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

Ratan Paul

React에서 파일이 소품에 있으면 다음을 사용할 수 있습니다.

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

Melle

파일을 로드하고 사용자 지정 이벤트를 발생시키는 함수를 만드는 것은 어떻습니까? 그런 다음 리스너를 입력에 연결합니다. 이렇게 하면 이미지를 미리보기할 때뿐만 아니라 파일을 더 유연하게 사용할 수 있습니다.

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

아마도 내 코드는 일부 사용자만큼 좋지는 않지만 요점을 알 수 있을 것이라고 생각합니다. 여기에서 예를 볼 수 있습니다

Community Wiki

다음은 작업 코드입니다.

 <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

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>

Merrin K

이 시도

 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

이 솔루션은 어떻습니까?

다음과 같이 이미지 태그에 데이터 속성 "data-type=editable"을 추가하기만 하면 됩니다.

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

그리고 프로젝트에 대한 스크립트는 물론 ...

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

JSFiddle에서 데모 보기

Rodolpho Brock

인터넷 덕분에 IE 7+에서 미리보기 효과를 생성할 수 있는 플러그인을 만들었지만 몇 가지 제한 사항이 있습니다. 나는 그것을 더 쉽게 얻을 수 있도록 github 페이지에 넣었다.

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

다중 이미지 업로드의 경우(@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/

이것이 누군가를 돕기를 바랍니다.

Keyur

내 코드입니다. IE[6-9] 지원, 크롬 17 이상, 파이어폭스, 오페라 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

기본 이미지

 @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

React를 사용하는 경우 솔루션은 다음과 같습니다.

 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

jQuery/javascript를 사용하여 업로드하기 전에 여러 이미지를 미리 보시겠습니까?

여러 파일을 한 번에 축소판 이미지로 미리 봅니다.

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>

스크립트

 $("#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에 대한 작업 데모

jsfiddle에 대한 작업 데모

이것이 도움이 되기를 바랍니다.

vishpatel73

<img id="blah" alt="your image" width="100" height="100" /> <input type="file" name="photo" id="fileinput" /> <script> $('#fileinput').change(function() { var url = window.URL.createObjectURL(this.files[0]); $('#blah').attr('src',url); }); </script>

Rachit Vohera

https://stackoverflow.com/a/59985954/8784402

ES2017 방법

 // convert file to a base64 url const readURL = file => { return new Promise((res, rej) => { const reader = new FileReader(); reader.onload = e => res(e.target.result); reader.onerror = e => rej(e); reader.readAsDataURL(file); }); }; // for demo const fileInput = document.createElement('input'); fileInput.type = 'file'; const img = document.createElement('img'); img.attributeStyleMap.set('max-width', '320px'); document.body.appendChild(fileInput); document.body.appendChild(img); const preview = async event => { const file = event.target.files[0]; const url = await readURL(file); img.src = url; }; fileInput.addEventListener('change', preview);

nkitku

내 앱의 경우 암호화된 GET url 매개변수가 있는 경우에만 작동했습니다. 나는 항상 TypeError: $(...) is null 있습니다. 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

다음은 순수 자바스크립트를 사용하여 업로드하기 전에 이미지를 미리 보는 훨씬 쉬운 방법입니다.

 //profile_change is the id of the input field where we choose an image document.getElementById("profile_change").addEventListener("change", function() { //Here we select the first file among the selected files. const file = this.files[0]; /*here i used a label for the input field which is an image and this image will represent the photo selected and profile_label is the id of this label */ const profile_label = document.getElementById("profile_label"); //Here we check if a file is selected if(file) { //Here we bring in the FileReader which reads the file info. const reader = new FileReader(); /*After reader loads we change the src attribute of the label to the url of the new image selected*/ reader.addEventListener("load", function() { dp_label.setAttribute("src", this.result); }) /*Here we are reading the file as a url ie, we try to get the location of the file to set that as the src of the label which we did above*/ reader.readAsDataURL(file); }else { //Here we simply set the src as default, whatever you want if no file is selected. dp_label.setAttribute("src", "as_you_want") } });

그리고 여기에 HTML이 있습니다.

 <label for="profile_change"> <img title="Change Profile Photo" id="profile_label" src="as_you_want" alt="DP" style="height: 150px; width: 150px; border-radius: 50%;" > </label> <input style="display: none;" id="profile_change" name="DP" type="file" class="detail form-control">

Irfan wani

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>

이것은 또한 유효하지 않은 유형의 파일(예: pdf)이 선택된 경우를 처리합니다.

Jinu Joseph Daniel

출처 : http:www.stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded