![](/img/trans.png)
[英]how to preview uploaded image before saving it in database in image control in asp.net
[英]How to preview uploaded image in file upload control before save using asp.net or jquery?
我想预览在保存之前使用asp.net中的文件上传控制上传的图像。
我使用filereader尝试了代码,但是在IE9中不支持IE9阅读器。
试试这个例子
HTML
<form id="form1" runat="server">
<input type='file' id="inputFile" />
<img id="image_upload_preview" src="http://placehold.it/100x100" alt="your image" />
</form>
脚本
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#image_upload_preview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#inputFile").change(function () {
readURL(this);
});
这将为您提供帮助。
在使用asp.net或jquery保存之前,如何在文件上传控件中预览上传的图像?
这将一次预览多个文件作为缩略图
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.");
}
});
我希望这将有所帮助。
@Manoj的示例可在IE 11中运行,但无需调用change函数:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#image_upload_preview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
这段代码就足够了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.