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控件预览图片的更多相关文章

  1. winform使用Barcodex控件预览和打印一维码

    1.控件下载. http://files.cnblogs.com/files/masonblog/barcodex.zip . 包含barcodex.ocx控件.barcodex帮助文档.两个winf ...

  2. FileUpload控件实现单按钮图片自动上传并带预览显示

    FileUpload控件实现单按钮图片自动上传并带预览显示 1.实现原理:   FileUpload控件默认不支持服务端的ONCHANGE事件,此时用一种变通的方法借用客户端的onchange事件,调 ...

  3. Asp.net中FileUpload控件实现图片上传并带预览显示

    单一图片上传——“选择”+“上传”,.NET默认模式: 1.实现原理:     采用FileUpload控件默认的使用方式,先由“选择”按钮选择图片,然后单击“上传”按钮完成上传,并可在“上传”按钮的 ...

  4. [.ashx檔?泛型处理例程?]基础入门#2....FileUpload上传前,预览图片(两种作法--ashx与JavaScript)

    原文出處  http://www.dotblogs.com.tw/mis2000lab/archive/2013/08/20/ashx_beginner_02_fileupload_picture_p ...

  5. 微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比

    在做微信公众号或者企业微信开发业务应用的时候,我们常常会涉及到图片预览.上传等的处理,往往业务需求不止一张图片,因此相对来说,需要考虑的全面一些,用户还需要对图片进行预览和相应的处理,在开始的时候我使 ...

  6. 本地预览图片html和js例子

    本地预览图片html和js例子,直接上代码吧. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...

  7. javascript预览图片——IT轮子系列(九)

    再使用htm控件 <input type="file" name="file" /> 上传图片的时候,往往需要先预览图片,然后点击保存按钮,把图片上 ...

  8. FileUpload控件使用初步

    FileUpload控件使用初步   FileUpload控件使用初步: 1.实现文件上传 protected void btnSubmit_click(object sender, EventArg ...

  9. webform FileUpload控件实例应用 上传图片

    首先在根目录下建一个"images"文件: HTML: <form id="form1" runat="server"> < ...

随机推荐

  1. [暑假集训--数论]hdu2136 Largest prime factor

    Everybody knows any number can be combined by the prime number. Now, your task is telling me what po ...

  2. 【09】node 之 fs流读写

    前面我们已经学习了如何使用fs模块中的readFile方法.readFileSync方法读取文件中内容,及如何使用fs模块中的writeFile方法.writeFileSync方法向一个文件写入内容. ...

  3. 传送带(bzoj 1857)

    Description 在一个2维平面上有两条传送带,每一条传送带可以看成是一条线段.两条传送带分别为线段AB和线段CD.lxhgww在AB上的移动速度为P,在CD上的移动速度为Q,在平面上的移动速度 ...

  4. Fence(codeforces 232D)

    题意: 对于给定的a[1..n],定义区间[s,t]和[x,y]"匹配"当且仅当下列条件同时满足:1. t-s=y-x,即长度相同.3. t<x或s>y,即两区间没有交 ...

  5. 洛谷 [P3623] 免费道路

    有 k 条特殊边的生成树 我们发现有一些边是必须的,如果把所有的水泥路都加入并查集,再枚举鹅卵石路,如果这条路能再次加入并查集,说明这条路是必须的 水泥路同样 这样就把必需边求出来了,剩下就可以随意加 ...

  6. 多核cpu的特殊中断

    cpu可以向其他cpu发送中断,也可以向单独某一个cpu发送中断 每个 cpu 都有一个时钟中断源

  7. 【BZOJ4476&JSOI2015】送礼物(二分,RMQ)

    ANS明显是有二分性的 二分答案,设二分值为b M(i,j)−m(i,j)j−i+k>b 显然当l<长度<r时,一端是最小值,一端是最大值. 等于l或r的时候因为可能不满足以上性质, ...

  8. Bazinga 题解

    第十四届浙江财经大学程序设计竞赛重现赛-B题 https://www.nowcoder.com/acm/contest/89/B 可能最近,脑子有问题,看见数论题都是秒,学弟问我这题怎么做,结果我沉思 ...

  9. [SaltStack] Minion-conf自动更新

    minion-conf配置文件自动更新, 加载 minion-conf是每个minion自身以来的配置, 为了方便我们在中心管控机上(Master)统一配置, 然后下发文件, 进而使得Minion能够 ...

  10. C#将图片进行马赛克处理

    /// <summary> /// 马赛克处理 /// </summary> /// <param name="bitmap"></par ...