我希望能够在上传文件(图像)之前预览它。预览操作应该在浏览器中全部执行,而不使用Ajax上传图像。
我该怎么做?
我希望能够在上传文件(图像)之前预览它。预览操作应该在浏览器中全部执行,而不使用Ajax上传图像。
我该怎么做?
当前回答
这是一个基于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。
其他回答
https://stackoverflow.com/a/59985954/8784402
ES2017方式
//将文件转换为base64 url常量readURL=文件=>{return new Promise((res,rej)=>{const reader=新文件读取器();reader.onload=e=>res(e.target.result);reader.oneror=e=>rej(e);reader.readAsDataURL(文件);});};//用于演示const fileInput=document.createElement('input');fileInput.type=“文件”;const img=document.createElement('img');img.attributeStyleMap.set(“最大宽度”,“320px”);document.body.appendChild(fileInput);document.body.appendChild(img);常量预览=异步事件=>{const file=event.target.files[0];const-url=等待读取url(文件);img.src=url;};fileInput.addEventListener('change',预览);
有几种方法可以做到这一点。最有效的方法是在<input>的文件上使用URL.createObjectURL()。将此URL传递给img.src,告诉浏览器加载提供的图像。
下面是一个示例:
<input-type=“file”accept=“image/*”onchange=“loadFile(event)”><img id=“output”/><脚本>var loadFile=函数(事件){var output=document.getElementById('output');output.src=URL.createObjectURL(event.target.files[0]);output.onload=函数(){URL.revokeObjectURL(output.src)//释放内存}};</script>
您还可以使用FileReader.readAsDataURL()从<input>解析文件。这将在内存中创建一个字符串,其中包含图像的base64表示。
<input-type=“file”accept=“image/*”onchange=“loadFile(event)”><img id=“output”/><脚本>var loadFile=函数(事件){var reader=新文件读取器();reader.onload=函数(){var output=document.getElementById('output');output.src=读取结果;};reader.readAsDataURL(event.target.files[0]);};</script>
imgInp.oncange=evt=>{const[file]=imgInp.fileif(文件){blah.src=URL.createObjectURL(文件)}}<form runat=“server”><input accept=“image/*”type='file'id=“imgInp”/><img id=“blah”src=“#”alt=“your image”/></form>
使用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>
我编辑了@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');
}
}