FileUpload控件预览图片
HTML代码:
<tr>
<td class="auto-style1">上传图片:</td>
<td>
<asp:FileUpload ID="FileUpload1" runat="server" onchange="chgImg(this)"/>
<div>
<img src="" id="Photo" runat="server" style="max-height:80px"/>
<div>
<div id="preview"></div>
<p>图片路径:<asp:Label ID="lalimageUrl" runat="server" Text=""></asp:Label></p>
</td>
</tr>
JS 代码:
function chgImg(file){ //img控件预览图片 var FileUpload1=$("#FileUpload1").val(); $("#Photo").attr("src","file:///" +FileUpload1);
//div预览图片(兼容模式)
var prevDiv=document.getElementById('preview');
if(file.files && file.files[]){
var reader=new FileReader();
reader.onload=function(evt){
prevDiv.innerHTML='<img src="'+evt.target.result+'" style="max-height:80px"/>';
}
reader.readAsDataURL(file.files[]);
}
else
{
prevDiv.innerHTML='<div class ="img" style="max-height:80px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\''+file.value+'\')"></div>';
}
}
FileUpload控件预览图片的更多相关文章
- winform使用Barcodex控件预览和打印一维码
1.控件下载. http://files.cnblogs.com/files/masonblog/barcodex.zip . 包含barcodex.ocx控件.barcodex帮助文档.两个winf ...
- FileUpload控件实现单按钮图片自动上传并带预览显示
FileUpload控件实现单按钮图片自动上传并带预览显示 1.实现原理: FileUpload控件默认不支持服务端的ONCHANGE事件,此时用一种变通的方法借用客户端的onchange事件,调 ...
- Asp.net中FileUpload控件实现图片上传并带预览显示
单一图片上传——“选择”+“上传”,.NET默认模式: 1.实现原理: 采用FileUpload控件默认的使用方式,先由“选择”按钮选择图片,然后单击“上传”按钮完成上传,并可在“上传”按钮的 ...
- [.ashx檔?泛型处理例程?]基础入门#2....FileUpload上传前,预览图片(两种作法--ashx与JavaScript)
原文出處 http://www.dotblogs.com.tw/mis2000lab/archive/2013/08/20/ashx_beginner_02_fileupload_picture_p ...
- 微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比
在做微信公众号或者企业微信开发业务应用的时候,我们常常会涉及到图片预览.上传等的处理,往往业务需求不止一张图片,因此相对来说,需要考虑的全面一些,用户还需要对图片进行预览和相应的处理,在开始的时候我使 ...
- 本地预览图片html和js例子
本地预览图片html和js例子,直接上代码吧. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...
- javascript预览图片——IT轮子系列(九)
再使用htm控件 <input type="file" name="file" /> 上传图片的时候,往往需要先预览图片,然后点击保存按钮,把图片上 ...
- FileUpload控件使用初步
FileUpload控件使用初步 FileUpload控件使用初步: 1.实现文件上传 protected void btnSubmit_click(object sender, EventArg ...
- webform FileUpload控件实例应用 上传图片
首先在根目录下建一个"images"文件: HTML: <form id="form1" runat="server"> < ...
随机推荐
- topK问题解法
topK问题的最佳解法是堆排,下面介绍用堆排来解决该问题. 堆排解决topK问题的思路,取出前K个数,最重要的就是要减少比较的次数,用堆排维护一个K大小的堆,比如一个小顶堆,则堆顶为堆中最小的值,将堆 ...
- [LVS] 用keepalived实现LVS NAT模式高可用性
默认前提是LVS已经可以正常工作了. 因为是NAT模式,RS的路由要指向LVS的接口地址,所以需要一个统一的后台浮动地址,使得RS都指向这个浮动IP.否则在切换时,会导致RS回包到DOWN掉的LVS上 ...
- vue.js单文件组件中非父子组件的传值
最近在研究vue.js,总体来说还算可以,但是在web开发群里有一些人问在单文件组件开发模式中非父子组件如何传值的问题,今天在这里讲讲,希望对大家有所帮助! 在官网api中的这段讲解很少,也很模糊:官 ...
- 幸运数字(bzoj 1853)
Description 在中国,很多人都把6和8视为是幸运数字!lxhgww也这样认为,于是他定义自己的“幸运号码”是十进制表示中只包含数字6和8的那些号码,比如68,666,888都是“幸运号码”! ...
- 【HDOJ5996】dingyeye loves stone(Nim游戏)
题意:dingyeye喜欢和你玩石子游戏.dingyeye有一棵n个节点的有根树,节点编号为0到n−1,根为0号节点. 游戏开始时,第i个节点上有a[i]个石子.两位玩家轮流操作,每次操作玩家可以选择 ...
- *UOJ#223. 【NOI2016】国王饮水记
$n \leq 8000$的数列,问不超过$m \leq 1e9$次操作后第一个数字最大是多少.操作:选一些数,把他们变成他们的平均值.需要保留$p \leq 3000$位小数,提供了一个小数高精度库 ...
- div两侧的boder断开 消失 奇怪
原文发布时间为:2009-11-06 -- 来源于本人的百度文章 [由搬家工具导入] 解决方法: 设定外层DIV的宽度即可,如 width:99% ========================== ...
- os模块 文件操作
下面的方法可以在python程序里直接生成文件到系统路径(windows环境下测试): <<<<<<要注意字符串前面要加字母r>>>>> ...
- linux创建和查看用户命令
1.创建一个叫做hadoop的用户,用户的目录是/home/hadoop useradd -d /home/hadoop hadoop 2.输入密码 passwd hadoop 3.删除用户 user ...
- 使用p6spy格式化日志输出
P6Spy 是针对数据库访问操作的动态监测框架(为开源项目,项目首 页:www.p6spy.com)它使得数据库数据可无缝截取和操纵,而不必对现有应用程序的代码作任何修改.P6Spy 分发包包括P6L ...