使用FileUpload控件上传前预览图片
<table class="blue_table" cellpadding="0" cellspacing="0" border="0">
<tr>
<th colspan="2">添加商品图片</th>
</tr>
<tr>
<td>
<div id="img_div" runat="server" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);width: 200px; height: 200px;margin:0 auto; margin-left:0px;border: 1px solid #e9ece5">
<img src="" runat="server" alt="" />
</div>
</td>
</tr>
<tr>
<td>
<asp:FileUpload ID="FileUpload1" runat="server" onchange="showimg('FileUpload1','img_div',200,200)" size="7" class="input" />
</td>
</tr>
</table>
**************************
function clearfile(file,img,width,height)
{
document.getElementById(file).parentNode.style.display="";
document.getElementById(file).parentNode.innerHTML='<input type="file" name="'+file+'" id="'+file+'" onchange="showimg(\''+file+'\',\''+img+'\')" size="7" class="input" />';
document.getElementById(img).innerHTML="<img style='width:"+width+"px;height:"+height+"px' src='' />";
}
function showimg(file,img,width,height)
{
var dFile = document.getElementById(file);
var dImg = document.getElementById(img);
if(!getPath(dFile).match(/.jpg|.gif|.png|.bmp/i))
{
alert('上传图片格式必须是以下几种之一: .jpg , .gif , .bmp 或 .png !');
clearfile(file,img);
return;
}
if(dFile.files)
{
dImg.innerHTML="<img src='"+dFile.files[0].getAsDataURL()+"' style='width:"+width+"px;height:"+height+"px'/>";
}
else
{
if(dFile.value.indexOf('\\') > -1 || dFile.value.indexOf('\/') > -1)
{
dImg.innerHTML="";
dImg.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = getPath(dFile);
}
}
}
function getPath(obj)
{
if(obj)
{
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
obj.select();
return document.selection.createRange().text;
}
else if(window.navigator.userAgent.indexOf("Firefox")>=1)
{
if(obj.files)
{
return obj.files.item(0).getAsDataURL();
}
return obj.value;
}
return obj.value;
}
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛(1)