Code666 (代码贴、代码片段)

[JavaScript] 读取input:file的路径并显示本地图片的方法 →→→→→进入此内容的聊天室

来自 , 2019-03-29, 写在 JavaScript, 查看 111 次.
URL http://www.code666.cn/view/e4a6222c
  1.    
  2. <style>
  3.   .imagePreview {
  4.             width: 160px;
  5.             height: 120px;
  6.             filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
  7.         }
  8. </style>
  9. <script type="text/javascript">
  10.         var loadImageFile = (function (obj,img) {
  11.             //非IE
  12.             if (window.FileReader) {
  13.                 var oPreviewImg = null, oFReader = new window.FileReader(),
  14.                 rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
  15.  
  16.                 oFReader.onload = function (oFREvent) {
  17.                     if (!oPreviewImg) {
  18.                         var newPreview = document.getElementById(img);
  19.                         oPreviewImg = new Image();
  20.                         oPreviewImg.style.width = (newPreview.offsetWidth).toString() + "px";
  21.                         oPreviewImg.style.height = (newPreview.offsetHeight).toString() + "px";
  22.                         newPreview.appendChild(oPreviewImg);
  23.                     }
  24.                     oPreviewImg.src = oFREvent.target.result;
  25.                 };
  26.  
  27.                 return function () {
  28.                     var aFiles = obj.files;
  29.                     if (aFiles.length === 0) { return; }
  30.                     if (!rFilter.test(aFiles[0].type)) { alert("图片格式不正确,请选择图片格式的文件!"); return; }
  31.                     oFReader.readAsDataURL(aFiles[0]);
  32.                 }
  33.  
  34.             }
  35.            //IE
  36.             if (navigator.appName === "Microsoft Internet Explorer") {
  37.                 return function (obj,img) {
  38.                     alert(obj.value);
  39.                     var ext = obj.value.split(".")[1];
  40.                     if (!(/^(jpg|jpeg|JPG|JPEG|png|PNG|pdf)$/.test(ext))) {
  41.                         alert('图片格式不正确,请选择图片格式的文件!');
  42.                         return;
  43.                     }
  44.                    
  45.                     document.getElementById(img).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = obj.value;
  46.  
  47.                 }
  48.             }
  49.         })();
  50.     </script>
  51.  
  52.  <div id="imgHouseholdBoy" class="imagePreview">
  53.                     </div>
  54.                     <div>
  55.                         <asp:FileUpload ID="FileUpload1" runat="server" CssClass="file" onchange="loadImageFile(this,'imgHouseholdBoy');" />
  56.                     </div>

回复 "读取input:file的路径并显示本地图片的方法"

这儿你可以回复上面这条便签

captcha

贴代码片段 - Code666