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[0]) {
            var reader = new FileReader();
            reader.onload = function (evt) {
                prevDiv.innerHTML = ‘<img src="‘ + evt.target.result + ‘" style="max-height:80px" />‘;
            }
            reader.readAsDataURL(file.files[0]);
        }
        else {
            prevDiv.innerHTML = ‘<div class="img" style="max-height:80px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\‘‘ + file.value + ‘\‘)"></div>‘;
        }
}

时间: 2024-11-09 14:07:25

FileUpload控件预览图片的相关文章

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

1.控件下载. http://files.cnblogs.com/files/masonblog/barcodex.zip . 包含barcodex.ocx控件.barcodex帮助文档.两个winform控件的dll文件. 2.控件的注册. (1)检测控件是否注册(方法不唯一). 本例使用的是判断注册表中 HKEY_CLASSES_ROOT\TypeLib\ 是否包含barcodex.ocx的项. 如果注册了barcodex.ocx控件,则会生成对应的项. HKEY_CLASSES_ROOT\

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

FileUpload控件实现单按钮图片自动上传并带预览显示 1.实现原理: FileUpload控件默认不支持服务端的ONCHANGE事件,此时用一种变通的方法借用客户端的onchange事件,调用__doPostBack方法来用LinkButton的OnClick事件模拟一个事件触发的过程,可以在LinkButton的OnClick事件中进行图片的上传,和预览加载. 2.关键代码:      页面代码: 1 <asp:FileUpload ID="fuPhoto" onchan

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

单一图片上传——“选择”+“上传”,.NET默认模式: 1.实现原理: 采用FileUpload控件默认的使用方式,先由“选择”按钮选择图片,然后单击“上传”按钮完成上传,并可在“上传”按钮的单击事件中加载已上传图片. 2.关键代码:     页面代码: 1 <asp:FileUpload ID="FileUpload" runat="server" /> 2 <asp:Button ID="BtnUp" runat="

asp.net fileupload控件上传图片并预览图片

页面代码: <form id="form1" runat="server"> <div> <asp:FileUpload ID="FileUpload1" runat="server" /> <asp:Button ID="Button1" runat="server" Text="上传" Width="54px&q

C#.net4建设网页上传图片前客户端预览图片不能显示

搞了好半天,完全照教学资料设的javascrip脚本,但就是显示不了,后来才发觉,原来客户端要把该网站设为信任才能显示. 所以记录一下,以后备查. <script type="text/javascript">        function showphoto() {            alert(document.getElementById("FileUpload1").value);            //把所选图片的全路径+文件名以“f

模拟type=file;上传并预览图片

最近项目的会员中心,要做一个上传本地img并预览的效果.效果大概是这个样子.自己以前没做过:摸着石头过河总算完成了感觉有必要整理一下,写篇博客耍耍. 整体效果大概是这个样子的: 1.点击框框任何地方:弹出选择文件窗口: 2.选择后,再框框区域预览: 3.再次点击框框,更换图片. 下面说说整个实现的过程吧. html代码的结构大概是这样的.    <div class="imgitem secondImg">        <div class="u-add-

JavaScript - 表单提交前预览图片属性

即Preview image and its properties before upload 其实这东西网上到处都是,但并不完整. 正好我也遇到了这个问题,不仅仅是预览,还需要得到图片的属性. 于是东凑西凑整理出一个完整的版本,并根据个人的理解加上了一点点说明. (ps:感谢爆栈^^) 首先做一些准备工作,HTML方面主要是img和input标签的id:     <form>         <input type='file' id="imgFile"  />

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

再使用htm控件 <input type="file" name="file" /> 上传图片的时候,往往需要先预览图片,然后点击保存按钮,把图片上传到服务器.今天正好解决了这样一个问题,记录博文,以备后用. html 代码 <div> <input type="file" id="filePreview" /><br /> <img id="imgPhoto&q

php-文件预览功能

php-文件预览 上一篇博客是上传功能,本篇是上传后图片预览和更改: 代码如下: 1.yulan.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"