file控件选择图片实例教程
程序员文章站
2022-04-21 16:10:57
...
怎样FileUpload控件浏览选择图片的时候在img上同时显示出来(不用按上传) 下面代码能实现:
这个我也找过很长时间, 我把我的给你你再试一下吧。
Js部分:
这个我也找过很长时间, 我把我的给你你再试一下吧。
Js部分:
<script type="text/javascript"> function ShowImg(obj) { var AllowExt = ".jpg|.gif|.bmp|.png|"; var FileExt = obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase(); if (AllowExt != 0 && AllowExt.indexOf(FileExt + "|") == -1) //判断文件类型是否允许上传 { alert("您上传的不是图片!"); } else { var newPreview = document.getElementById("PreviewImg2"); newPreview.src = obj.value; } } </script>
Body部分内容:
<img id="PreviewImg2" alt="" src="" width="140px" height="115px" /> <asp:FileUpload ID="FileUpload1" runat="server" onchange="ShowImg(this)" />
这个方法是我亲自测试的,可以使用,希望对你有帮助!如果可行别忘了点 赞 哦!!!
代码如下:
<script>$(function() { $("#Book_Fiel").change(function() {var $file = $(this);var fileObj = $file[0];var windowURL = window.URL || window.webkitURL;var dataURL;var $img = $("#Book_Picture");if (fileObj && fileObj.files && fileObj.files[0]) { dataURL = windowURL.createObjectURL(fileObj.files[0]); $img.attr('src', dataURL); } else { dataURL = $file.val();var imgObj = document.getElementById("preview");// 两个坑:// 1、在设置filter属性时,元素必须已经存在在DOM树中,动态创建的Node,也需要在设置属性前加入到DOM中,先设置属性在加入,无效;// 2、src属性需要像下面的方式添加,上面的两种方式添加,无效;imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL; } }); } ); </script>
以上就是file控件选择图片实例教程的详细内容,更多请关注其它相关文章!
推荐阅读
-
判断file框选择的是否为图片
-
jQuery中:file选择器用法实例教程
-
input type=file 选择图片并且实现预览效果的实例
-
File文件控件,选中文件(图片,flash,视频)即立即预览显示
-
利用file控件实现点击图片更改并回显
-
制作一个漂亮的file文件上传控件样式的实例教程
-
input type=file 选择图片并且实现预览效果详解
-
手机网站如何上传图片?为什么input type='file'控件在windons phone 下面根本出不来文件选框?
-
file控件选择上传文件确定后触发的js事件是哪个_javascript技巧
-
手机网站如何上传图片?为什么input type='file'控件在windons phone 下面根本出不来文件选框?