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"> < ...
 
随机推荐
- webpack-dev-server版本
			
webpack1.x webpack 1.13.2-1.13.3 webpack-dev-server 1.15.0-1.16.0
 - E-card
			
E-card 题目描述 两个人各有n张牌 第一个人有n-1张平民和1张皇帝 第二个人有n-1张平民和1张奴隶 每次选择一张牌 进行对决 如果都是平民则平局 皇帝赢平民 奴隶赢皇帝 平民赢奴隶(显然只会 ...
 - 【bzoj3585】mex 线段树 mex,sg
			
Description 有一个长度为n的数组{a1,a2,…,an}.m次询问,每次询问一个区间内最小没有出现过的自然数. Input 第一行n,m. 第二行为n个数. 从第三行开始,每行一个询问l, ...
 - 一个html5视频播放器
			
具有播放视频,拖拽,自定义右键菜单,上传头像的功能 <!DOCTYPE html><html lang="en"> <head> <met ...
 - webpack-dev-server 支持其他设备访问配置
			
webpack-dev-server 打开的服务默认是只能localhost访问的,当有时候需要让别人访问的时候可以配置 --host 192.168.84 这样在同一个局域网下面就可以通过该ip来访 ...
 - Eclipse 无法查看第三方jar包文件源代码解决方法
			
1.打开第三方依赖包,源文件的快捷键:ctrl + mouseClick 2.由于我们下载的第三方jar 包,如Spring等相关的依赖包时,并没有附加下载相应的源文件,所以经常出现如图的这种问题. ...
 - BZOJ 3940: [Usaco2015 Feb]Censoring
			
3940: [Usaco2015 Feb]Censoring Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 367 Solved: 173[Subm ...
 - JQuery基础 学习的一些例子以及手册
			
原文发布时间为:2009-12-23 -- 来源于本人的百度文章 [由搬家工具导入] 不多说,直接下载。。。 下载:http://www.xmaspx.com/Services/FileAttachm ...
 - 【Reship】use of tangible T4 template engine
			
1.first of all 之前在 “使用T4模板生成代码 – 初探” 文章简单的使用了T4模板的生成功能,但对于一个模板生成多个实例文件,如何实现这个方式呢?无意发现一个解决方案 “Multipl ...
 - Windows下C++多线程同步与互斥简单运用(转)
			
1. 互斥量,Mutex #include <Windows.h> #include <iostream> using namespace std; DWORD WINAPI ...