파일 업로드 컨트롤을 사용하여 이미지를 검색하고 선택할 때(업로드를 누르지 않고) 이미지를 동시에 표시하는 방법 다음 코드를 사용하면 됩니다.
나는 이것을 오랫동안 찾고 있었습니다. 다시 시도해 볼 수 있습니다.
J 부분:
<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>
본문 부분:
<img id="PreviewImg2" alt="" src="" width="140px" height="115px" /> <asp:FileUpload ID="FileUpload1" runat="server" onchange="ShowImg(this)" />
이 방법은 제가 직접 테스트한 방법이므로 도움이 되셨으면 좋겠습니다! 효과가 있다면 좋아요를 누르는 것을 잊지 마세요! ! !
코드는 다음과 같습니다:
3f1c4e4b6b16bbbd69b2ee476dc4f83a$(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; } }); } ); 2cacc6d41bbb37262a98f745aa00fbf0
위 내용은 파일 제어 선택 그림 예제 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!