我希望能够在上传之前预览文件(图像)。预览操作应该全部在浏览器中执行,而不使用 Ajax 上传图像。
我怎样才能做到这一点?
imgInp.onchange = evt => { const [file] = imgInp.files if (file) { blah.src = URL.createObjectURL(file) } }
有几种方法可以做到这一点。最有效的方法是在 <input> 的 File 上使用 URL.createObjectURL()。将此 URL 传递给 img.src 以告诉浏览器加载提供的图像。
这是一个例子:
$(this)[0].files
> this.files
在 React 中,如果文件在你的 props 中,你可以使用:
{props.value instanceof File && (
<img src={URL.createObjectURL(props.value)}/>
)}
如何创建一个加载文件并触发自定义事件的函数。然后将侦听器附加到输入。这样我们就可以更灵活地使用文件,而不仅仅是预览图像。
/**
* @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)
可能我的代码不如某些用户好,但我想你会明白的。在这里您可以看到 example
以下是工作代码。
<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]);
}
}
尝试这个
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.目标; var div = document.createElement("div"); div.innerHTML = ""; output.insertBefore(div, null); }); picReader.readAsDataURL(file); } }); } }
这个解决方案怎么样?
只需将数据属性“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!
}));
在使用 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.");
}
});
我希望这将有所帮助。
感谢互联网,我做了一个可以在IE 7+中生成预览效果的插件,但限制很少。我将它放入 github page 以便更容易获得它
$(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;文本对齐:居中; } .preview2 > div { 显示:内联块;文本对齐:居中; } 预览
Preview2
对于多张图片上传(修改@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/
希望这可以帮助某人。
这是我的代码。支持IE[6-9]、chrome 17+、firefox、Opera 11+、Maxthon3
函数 previewImage(fileObj, imgPreviewId) { var allowExtention = ".jpg,.bmp,.gif,.png"; //允许上传文件类型 document.getElementById("hfAllowPicSuffix").value; var 扩展 = 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("不支持 Safari6.0 以下浏览器"); } } else if (browserVersion.indexOf("MSIE") > -1) { if (browserVersion.indexOf("MSIE 6") > -1) {//ie6 document.getElementById(imgPreviewId).setAttribute("src",文件对象值); } else {//ie[7-9] fileObj.select(); fileObj.blur(); var newPreview = document.getElementById(imgPreviewId); newPreview.style.border = "实心 1px #eeeeee"; newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')"; newPreview.style.display = "块"; } } else if (browserVersion.indexOf("FIREFOX") > -1) {//firefox var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1 ]); if (firefoxVersion < 7) {//firefox7 下面 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("仅支持" + allowExtention + "suffix"); fileObj.value = ""; //清除选择的文件 if (browserVersion.indexOf("MSIE") > -1) { fileObj.select(); document.selection.clear(); } } } function changeFile(elem) { //file object , preview img tag id previewImage(elem,'imagePreview') } < img src="" id="imagePreview" style="width:120px;height:80px;" alt=""/>
默认图片
@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>
如果你使用 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>
)
}
<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>
https://stackoverflow.com/a/59985954/8784402
ES2017 方式
// 将文件转换为 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); }); }; // 用于演示 const fileInput = document.createElement('input'); fileInput.type = '文件'; 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 = 等待 readURL(file); img.src = 网址; }; fileInput.addEventListener('change', preview);
这是使用纯 javascript 在上传之前预览图像的一种非常简单的方法;
//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 i.e, 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">
对于我的应用程序,使用加密的 GET url 参数,只有这个有效。我总是得到一个TypeError: $(...) is null
。取自 https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
函数 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); } }
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>
This also handles case when file with invalid type ( ex. pdf ) is choosen
input.files[0]
作为数据发送,see jQuery's doc。20H2
说evt =>
是错误的语法 :(。