さらに
質問
アップロード前に画像をプレビューする
ファイル（画像）をアップロードする前にプレビューできるようにしたい。 画像をアップロードするためにAjaxを使用せずに、プレビューアクションはすべてブラウザ内で実行される必要があります。
どうすればいいのでしょうか？
1466
20
人気動画
この質問には 1 つの答え があり、読むには ログイン してください。
解決策・回答
以下のサンプルコードをご覧ください。
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 runat="server">
<input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" />
</form>また、【こちらのサンプルをお試しください】(
)。
これを行うには、いくつかの方法があります。 最も効率的な方法は、& lt; input& gt;のファイルでURL.createObjectURL()を使用することです。 このURLをimg.srcに渡して、ブラウザに提供された画像をロードするように指示します。
次に例を示します。
<。!-スニペットを開始:js hide:false -->。
<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><。!-終了スニペット-->。
FileReader.readAsDataURL()を使用して、& lt; input& gt;からファイルを解析することもできます。 これにより、画像のbase64表現を含む文字列がメモリに作成されます。
<。!-スニペットを開始:js hide:false -->。
<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><。!-終了スニペット-->。
ワンライナーソリューション:
次のコードは、大きな画像を表示するためにデータURLよりもはるかに効率的なオブジェクトURLを使用します(データURLはすべてのファイルデータを含む巨大な文字列ですが、オブジェクトURLは、ファイルデータをインで参照する短い文字列です。メモリ):
<。!-スニペットを開始:js hide:false -->。
<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
LeassTaTTの回答は、FFやChromeのような標準的なブラウザでうまく機能します。 IE用の解決策は存在しますが、見た目が異なります。クロスブラウザー対応については、こちらをご覧ください。
HTMLでは2つのプレビュー要素が必要で、標準ブラウザでは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では、標準のJavascriptと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><![endif]-->
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
How to Preview image before Upload
forums.asp.net
画像でない場合は、@ 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');
}
}
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');
});
});$ .parseHTMLを使用しているため、jQuery 1.8が必要です。これは、XSSの軽減に役立ちます。
これはすぐに機能し、必要なのはjQueryだけです。
はい。 可能です。
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);
}
}ここからライブデモを取得できます。
清潔でシンプル。 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>
JavaScript(jQuery)と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);
});
}マークアップ(HTML)。
<form id="form1" runat="server">
<input type="file" id="imgUpload" multiple/>
</form>
以下は作業コードです。
<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]);
}
}
ファイルをロードし、カスタムイベントを発生させる関数を作成するのはどうでしょうか。そして、入力にリスナーをアタッチします。こうすれば、画像をプレビューするためだけでなく、より柔軟にファイルを利用することができる。
/**
* @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)おそらく、私のコードは他のユーザーほど良くはないでしょうが、要点はご理解いただけると思います。ここで、例を見ることができます。
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
jsfiddle.net
これを試してみてください。
<。!-スニペットを開始:js hide:false console:true babel:false -->。
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"><。!-終了スニペット-->。
このソリューションはどうですか?
次のような画像タグにデータ属性「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!
}));
インターネットのおかげでIE 7+でプレビュー効果を生成できるプラグインを作成しましたが、制限はほとんどありません。 github pageに入れて、入手しやすくしました。
<。!-スニペットを開始:js hide:false -->。
$(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><。!-終了スニペット-->。
複数の画像のアップロード(@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]);
}
}
}これが誰かを助けることを願っています。
< div class = "form-group col-md-3">。
< label class = "control-label"> Default Iamge< / label>
@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>
それは私のコードです。サポートIE [6-9]、クロム17+、ファイアフォックス、オペラ11+、Maxthon3。
<。!-スニペットを開始:js hide:false console:true babel:false -->。 <。!-言語:lang-html -->。
< input type = "file" id = "netBarBig" onchange = "changeFile(this)" />。 < img src = "" id = "imagePreview" style = "width:120px; height:80px;" alt = "" />。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')
}<。!-終了スニペット-->。
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>
)
}
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)。 != "未定義"){。 var dvPreview = $( "#divImageMediaPreview");。 dvPreview.html( "");。 $($(this)[0] .files).each(function(){。 var file = $(this);。 varリーダー=新しいFileReader();。 reader.onload =関数(e){。 var img = $( "< img />");。 img.attr( "style"、 "width:150px; highth:100px; padding:10px");。 img.attr( "src"、e.target.result);。 dvPreview.append(img);。 }。 reader.readAsDataURL(ファイル[0]);。 });。 }その他{。 alert( "このブラウザはHTML5 FileReaderをサポートしていません。");。 }。 });。 。
これが役立つことを願っています。
関連コミュニティ
1
