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"> < ...
随机推荐
- 关于python的整形(int)自动转长整形(long)的问题
有时需要访问某个接口,其中传入的整形参数可能比较长就会变成long,这时如果用str()的话‘L’就会被转化到字符串中,导致接口不能识别: 这种情况下应该优先使用json来转译,可以完美保持翻译pyt ...
- javaScript 笔记(5) --- jQuery(上)
这节整理整理 iquery.js 相关的内容... 目录 --- jQuery 语法 --- 文档就绪事件 --- jQuery 选择器 --- jQuery 事件 --- jQuery 效果 jQu ...
- 适配IPhone X的技巧
#define TabbarHeight ([[UIApplication sharedApplication] statusBarFrame].size.height>20?83:49) // ...
- python大数据挖掘系列之基础知识入门
preface Python在大数据行业非常火爆近两年,as a pythonic,所以也得涉足下大数据分析,下面就聊聊它们. Python数据分析与挖掘技术概述 所谓数据分析,即对已知的数据进行分析 ...
- HDU 4388 Stone Game II {博弈||找规律}
Stone Game II Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Tot ...
- VS扩展工具
原文发布时间为:2011-03-09 -- 来源于本人的百度文章 [由搬家工具导入] http://visualstudiogallery.msdn.microsoft.com/site/search ...
- c#中使用事务
原文发布时间为:2009-04-14 -- 来源于本人的百度文章 [由搬家工具导入] 问:为什么要用事务? 答:事务保证要么一组操作执行成功,要么全不执行。。。。 /// <summary> ...
- Dependency Injection in ASP.NET Web API 2
What is Dependency Injection? A dependency is any object that another object requires. For example, ...
- Web安全-XSS-SQL注入-CSRF
一.XSS 跨站脚本攻击(Cross Site Scripting): 1.指攻击者在网页中嵌入客户端脚本(例如JavaScript), 当用户浏览此网页时,脚本就会在用户的浏览器上执行,从而达到攻击 ...
- LeetCode OJ-- Pow(x, n) **@
https://oj.leetcode.com/problems/powx-n/ 二分法 class Solution { public: double pow(double x, int n) { ...