asp.net上传图片并能实现实时预览

最新推荐文章于 2025-05-30 12:27:19 发布

宜臶瑏芯

最新推荐文章于 2025-05-30 12:27:19 发布

阅读量3.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： html asp

本文链接：https://blog.youkuaiyun.com/qq_40182225/article/details/79085880

这篇博客介绍了如何在ASP.NET中实现图片上传并实时预览功能。通过JavaScript函数`setImagePreview()`处理文件输入元素的`onchange`事件，实现图片预览。在后台，使用`HttpPostedFile`类接收上传文件，并进行文件类型和大小的验证，将合格的图片保存到服务器。同时，文中还提到了在处理图片上传时可能导致`context.Request.Files`为NULL的常见问题及其解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前台aspx：
<script type="text/javascript">
//下面用于图片上传预览功能
function setImagePreview(avalue) {
document.getElementById("tbFile").value = document.getElementById("file").value;
var docObj = document.getElementById("file");
var imgObjPreview = document.getElementById("preview");
if (docObj.files && docObj.files[0]) {
//火狐下，直接设img属性
imgObjPreview.style.display = 'block';
//imgObjPreview.style.width = '150px';
//imgObjPreview.style.height = '180px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();

//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要以下方式
imgObjPreview.src = getObjectURL(docObj.files[0]);
}
var docObj2 = document.getElementById("file2");//第二个上传
document.getElementById("tbFileF").value = document.getElementById("file2").value;
var imgObjPreview2 = document.getElementById("preview2");
if (docObj2.files && docObj2.files[0]) {
//火狐下，直接设img属性
imgObjPreview2.style.display = 'block';
//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
imgObjPreview2.src = getObjectURL(docObj2.files[0]);
}
var docObj3 = document.getElementById("file3");//第三个上传同理
document.getElementById("tbFileQ").value = document.getElementById("file3").value;
var imgObjPreview3 = document.getElementById("preview3");
if (docObj3.files && docObj3.files[0]) {
//火狐下，直接设img属性
imgObjPreview3.style.display = 'block';
//火狐7以上版本不能