file控件选择图片实例教程

来源：宝捱科技网

怎样FileUpload控件浏览选择图片的时候在img上同时显示出来(不用按上传) 下面代码能实现:
这个我也找过很长时间，我把我的给你你再试一下吧。
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控件选择图片实例教程