我希望能够在上传文件(图像)之前预览它。预览操作应该在浏览器中全部执行,而不使用Ajax上传图像。
我该怎么做?
我希望能够在上传文件(图像)之前预览它。预览操作应该在浏览器中全部执行,而不使用Ajax上传图像。
我该怎么做?
当前回答
单层解决方案:
下面的代码使用对象URL,在查看大型图像时,它比数据URL更有效(数据URL是包含所有文件数据的巨大字符串,而对象URL只是引用内存中文件数据的短字符串):
<img id=“blah”alt=“your image”width=“100”height=“100”/><输入类型=“文件”onchange=“document.getElementById('blah').src=window.URL.createObjectURL(this.files[0])”>
生成的URL如下:
blob:http%3A//localhost/7514bc74-65d4-4cf0-a0df-3de016824345
其他回答
在React中,如果文件在你的props中,你可以使用:
{props.value instanceof File && (
<img src={URL.createObjectURL(props.value)}/>
)}
我编辑了@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');
}
}
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>
在使用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上的工作演示
我希望这会有所帮助。
使用jquery预览多个文件
$(文档).ready(函数){$('#image').change(function(){$(“#frames”).html(“”);对于(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[]”多个/><br/><div id=“frames”></div></body>