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. hdu 3721 树的直径

    思路:枚举+树的直径 #include<iostream> #include<cstring> #include<cstdio> #include<algor ...

  2. MFC设置对话框背景和边框颜色

    对于对话框,只需要重载默认的消息处理函数就行了: // 重载默认的消息处理函数,主要处理WM_MOVE WM_PAINT WM_NCPAINT WM_NCACTIVATE WM_NOTIFY这// 几 ...

  3. iOS资讯详情页实现—WebView和TableView混合使用(转)

    iOS资讯详情页实现—WebView和TableView混合使用 如果要实现一个底部带有相关推荐和评论的资讯详情页,很自然会想到WebView和TableView嵌套使用的方案. 这个方案是WebVi ...

  4. Java数据结构-------Map

    常用Map:Hashtable.HashMap.LinkedHashMap.TreeMap 类继承关系: HashMap 1)无序:  2)访问速度快:  3)key不允许重复(只允许存在一个null ...

  5. 【DirectX SDK Extra】提示缺少Qedit.h问题 (转)

    原文转自 http://blog.csdn.net/joeblackzqq/article/details/10944005 DirectX 9.0 SDK 开发包以及扩展包下载(February 2 ...

  6. JSON Web Token的使用

    定义 JSON Web Token(JWT)是一个非常轻巧的规范.这个规范允许我们使用JWT在用户和服务器之间传递安全可靠的信息. 适用场景 1.用于向Web应用传递一些非敏感信息.例如完成加好友.下 ...

  7. hdu 1576(逆元)

    A/B Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  8. (4)ASP.NET内置对象1

    一.Response 把数据从服务端发送到客户端 Response.Write() 在页面上输出数据 Response.WriteFile(@"F:\WriteFile.txt") ...

  9. JAVA基础之集合、Iterator迭代器、泛型及增强for循环

    个人理解: 对于集合,首先要明确的是最顶层的接口是Collection接口类,其包含一些基本的方法以便子类调用,不过在定义的时候最好定义好数据类型,以免遍历时还得必须进行向上转型:特别注意的是其没有关 ...

  10. 北冥有 Data,其名为鲲,鲲之大,一个 MySQL 放不下!

    千万量级的数据,用 MySQL 要怎么存? 初学者在看到这个问题的时候,可能首先想到的是 MySQL 一张表到底能存放多少条数据? 根据 MySQL 官方文档的介绍,MySQL 理论上限是 (232) ...