Fileupload控件点击“浏览”按钮,选择图片后需要立即显示所选择的图片
2014-05-10 18:37
381 查看
function showimg()
{
document.getElementById("<%=Image1.ClientID %>").src=document.getElementById("<%=File1.UniqueID %>").value;
}
</script>HTML:
<asp:Image ID="Image1" runat="server" Width="150px" Height="200px"></asp:Image>
<input id="File1" style="width: 489px; height: 22px" onfocus="showimg()" type="file" name="File1" runat="server" />
经过测试,在一些机器上能立即显示图片,但有些机器上却不显示图片。我不知道是不是跟浏览器的安全设置有关。怎么解决?
问题是家里是ie6可以的,当公司也是IE6就是显示不出来。而且我右键图片->属性,显示的文件名也是我Fileupload控件所选中的图片名
<input id="File1" style="width: 489px; height: 22px" onfocus="showimg()" type="file" name="File1" runat="server" /> 函数用的有问题吧??你第一次获取焦点时为空,当然无法显示图片了
<script>function PreviewImg(imgFile){ var ext = imgFile.value.toLowerCase().substring(imgFile.value.length-3,imgFile.value.length); if(ext=="jpg"||ext=="png"||ext=="gif"||ext=="bmp") { var newPreview = document.getElementById("newPreview"); newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value; newPreview.style.width = "120px"; newPreview.style.height = "90px"; }}</script><div id="newPreview"></div><input type="file" onchange="PreviewImg(this)" id="upimg" runat="server" />
<style type="text/css"><!--#newPreview {FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)}--></style>少了这个css样式
楼上的方法测试成功!不过,我原本之所以放了个asp:Image ,是因为页面(是编辑页面)装载的时候,Image 需要从数据库读取一个URL,并显示。然后用户可以点击Fileupload控件选取其他图片,按楼上的方法,我这边实现不是很方便。有方法解决吗?
再加一个div,js函数里,隐藏掉div就可以了。
<div id="newPreview"> </div> <div id="oldPreview"> </div> <input type="file" onchange="PreviewImg(this)" id="upimg" runat="server" /> js函数if块里增加一句document.getElementById("oldPreview").style.display = "none";应该可以的呢.
复制过来的效果不好:原文地址:http://www.debugease.com/aspdotnet/612817.html
我自己的核心代码
css代码
js代码
{
document.getElementById("<%=Image1.ClientID %>").src=document.getElementById("<%=File1.UniqueID %>").value;
}
</script>HTML:
<asp:Image ID="Image1" runat="server" Width="150px" Height="200px"></asp:Image>
<input id="File1" style="width: 489px; height: 22px" onfocus="showimg()" type="file" name="File1" runat="server" />
经过测试,在一些机器上能立即显示图片,但有些机器上却不显示图片。我不知道是不是跟浏览器的安全设置有关。怎么解决?
解决方案 »
问题是家里是ie6可以的,当公司也是IE6就是显示不出来。而且我右键图片->属性,显示的文件名也是我Fileupload控件所选中的图片名<input id="File1" style="width: 489px; height: 22px" onfocus="showimg()" type="file" name="File1" runat="server" /> 函数用的有问题吧??你第一次获取焦点时为空,当然无法显示图片了
<script>function PreviewImg(imgFile){ var ext = imgFile.value.toLowerCase().substring(imgFile.value.length-3,imgFile.value.length); if(ext=="jpg"||ext=="png"||ext=="gif"||ext=="bmp") { var newPreview = document.getElementById("newPreview"); newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value; newPreview.style.width = "120px"; newPreview.style.height = "90px"; }}</script><div id="newPreview"></div><input type="file" onchange="PreviewImg(this)" id="upimg" runat="server" />
<style type="text/css"><!--#newPreview {FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)}--></style>少了这个css样式
楼上的方法测试成功!不过,我原本之所以放了个asp:Image ,是因为页面(是编辑页面)装载的时候,Image 需要从数据库读取一个URL,并显示。然后用户可以点击Fileupload控件选取其他图片,按楼上的方法,我这边实现不是很方便。有方法解决吗?
再加一个div,js函数里,隐藏掉div就可以了。
<div id="newPreview"> </div> <div id="oldPreview"> </div> <input type="file" onchange="PreviewImg(this)" id="upimg" runat="server" /> js函数if块里增加一句document.getElementById("oldPreview").style.display = "none";应该可以的呢.
复制过来的效果不好:原文地址:http://www.debugease.com/aspdotnet/612817.html
我自己的核心代码
<asp:Image ID="Image1" runat="server" Height="181px" Width="221px" BorderColor="#000001" ImageUrl="~/admin/UserPhoto/201404272323258370.jpg"/> <div id="newPreview"></div> <asp:FileUpload ID="FileUpload1" runat="server" onchange="previewPic()" />
css代码
#newPreview {FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)}
js代码
function previewPic() { var filePath = $("#FileUpload1"); var picPath = $("#Image1"); //if (!filePath || !filePath.value || !picPath) return; var extensionName = /\.jpg$|\.jpeg$|\.png$|\.gif$/i; if (extensionName.test(filePath.val())) { var newPreview = document.getElementById("newPreview"); newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = filePath.val(); newPreview.style.width = "120px"; newPreview.style.height = "90px"; $("#Image1").remove(); } else { alert("您选择的似乎不是图像文件。"); } }
相关文章推荐
- FileUpload控件“浏览。。”按钮显示的“浏览。。”用图片显示
- 上传图片的问题,点击浏览选择图片后就可以在image框显示图片,不要再点击上传
- js 实现点击浏览图片按钮时同时显示图片
- FileUpload上传图片直接浏览显示(没有上传按钮如何上传)
- 在vc控件中显示图片,点击按钮变换图片
- listview中有按钮、图片等需要不同点击处理的控件如何处理
- android 点击一个按钮,选择一张图片,获取路径,然后显示在屏幕
- FileUpload控件实现单按钮图片自动上传并带预览显示
- 点击FileUpload控件时,显示图片
- 点击进入相册 选择照片并 获取返回值 显示图片
- File文件控件,选中文件(图片,flash,视频)即立即预览显示
- layUI中点击按钮选择图片(不自动上传),然后点击上传按钮,上传图片(可以上传多个文件)
- Android Studio 新建编辑条 点击按钮显示控件中的内容
- 点击按钮显示对应的图片
- asp.net 浏览按钮 asp.net C# 如何点击按钮弹出选择文件对话框
- asp.net 使用FileUpload控件上传并显示图片
- File文件控件,选中文件(图片,flash,视频)即立即预览显示
- android 点击按钮实现页面跳转并显示以选择信息
- ecshop 点击商品图片弹出带关闭按钮的遮罩层 显示商品库存
- iOS 8 图标上的提醒数字需要用户点击选择才可以显示