js清空FileUpload中的路径+显示、校验图片

最新推荐文章于 2022-07-08 16:52:04 发布

置顶 xycnjx

最新推荐文章于 2022-07-08 16:52:04 发布

阅读量1.8k

点赞数 1

分类专栏：网站前台文章标签： function firefox 照片 file image input

本文链接：https://blog.csdn.net/xycnjx/article/details/6637399

版权

网站前台专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<html>
<head>
<title>
验证了上传的是否是图片(不是判断后缀名，此法没保证)，获取了图片宽、高。并且能预览图片
</title>
          <script>
　　// 获取本地上传的照片路径
　　function getPath(obj) {
              if (obj) {
                  //ie
                  if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
                      obj.select();
                      // IE下取得图片的本地路径
                      return document.selection.createRange().text;
                  }
                  //firefox
                  else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
                      if (obj.files) {
                          // Firefox下取得的是图片的数据
                          return obj.files.item(0).getAsDataURL();
                      }
                      return obj.value;
                  }
                  return obj.value;
              }
          }
          //预览照片
    //所需参数：photo_select 文件上传ID
          function previewPhoto(){
               var picsrc=getPath(document.getElementById("photo_select"));
               var picpreview=document.getElementById("preview");
               if(!picsrc){
                return
               }
               if(window.navigator.userAgent.indexOf("MSIE") >= 1) {
                    if(picpreview) {
                     try{
                            picpreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = picsrc;
                           }catch(ex){
                      alert("只能上传图片格式文件，请重新选择！") ;
       clearInputFile(document.getElementById("photo_select"));
                      return false;
                     }
                }else{
                   picpreview.innerHTML="<img src='"+picsrc+"' />";
                }
              }
          }
          //校验图片大小
    //所需传参：photo_select：文件上传ID
          function checkPhoto(){
     //获取文件本地路径
              var photo = getPath(document.getElementById("photo_select"));
     var fileName=photo.substring(photo.lastIndexOf("\\") + 1,photo.lastIndexOf("."));
     var fileNameSuffix=photo.toLowerCase();

     //名称正则,验证了空格\s、特殊字符、中文
    //\w 匹配包括下划线的任何单词字符。等价于'[A-Za-z0-9_]'。
     //\W 匹配任何非单词字符。等价于 '[^A-Za-z0-9_]'。

     var regName = /^[^\`~!@#$%\s^&*()=|\\||\u4e00-\u9fa5]*$/;
     //后缀正则
     var regSuffix = /(\.jpg|\.gif){1}$/;

     flagName=regName.test(fileName);
     flagSuffix= regSuffix.test(fileNameSuffix);
              if(!photo){
                  alert("请选择一个本地图片文件！");
      clearInputFile(document.getElementById("photo_select"));
                  return;
              }else if(!flagName){
    alert("文件名包含中文或特殊字符");
    clearInputFile(document.getElementById("photo_select"));
     }else if(!flagSuffix){
      alert("只能上传jpg、gif格式的文件");
      clearInputFile(document.getElementById("photo_select"));
     }
              var imgObj = new Image();
              imgObj.src = photo;
     //alert(imgObj.src);
     var pictureSize = Math.round(imgObj.fileSize/1024*100)/100;//获取图片大小KB
              var width = imgObj.width;   //获取到图片宽
              var height = imgObj.height;//获取到图片高
              ///获取正确的图片尺寸大小，兼容ie6、7、8
              try{
                  if((typeof width=="undefined" || width==0) && (typeof height=="undefined" || height==0)){
                     var picpreview=document.getElementById("preview");
                     if(picpreview && picpreview.filters && picpreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src) {
                        var tempDiv=document.createElement("div");
                       picpreview.appendChild(tempDiv);
                       tempDiv.style.width="10px";
                       tempDiv.style.height="10px";
                       tempDiv.style.diplay="none";
                        tempDiv.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);";
                        tempDiv.ID="previewTemp";
                        var url=picpreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src;
                        tempDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=url;
                       width=tempDiv.offsetWidth;
                       height=tempDiv.offsetHeight;
                       picpreview.removeChild(tempDiv);
                       }
                    }
                }
                catch(e){
                }

             if(photo.toLowerCase().indexOf("http://") > - 1){
             alert("必须提供本机硬盘上的图片上传！");
             return false;
            }

            alert("照片宽："+width+"像素 \n照片高："+height+"像素"+"\n图片大小："+pictureSize+"KB");

        }

  //动态清除浏览的文件
   function clearInputFile(file) {
    var parentNode = file.parentNode;
    //var newOuterHTML = file.outerHTML.replace(/value=\"(.[^\"]*)\"/,"");
    var newFile = document.createElement(file.outerHTML);
    parentNode.insertBefore(newFile,file);
    parentNode.removeChild(file);
   }
    </script>
</head>

<body>

<div id="preview" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); width:160px;height:180px;border:solid 1px black;">
</div>
<p>预览图片
<input id="photo_select" type="file" οnchange="previewPhoto();" />
</p>
<p>图片校验
<input type="button" value="size" οnclick="checkPhoto()" />
</p>
<lu>
<p>功能描述：</p>
<li>图片预览 </li>
<li>判断是否为图片 </li>
<li>获取图片的尺寸：宽、高 </li>
<li>获取图片的大小：KB </li>
<li>在是图片格式的情况下再判断是否为jgp、gif格式的文件 </li>
<li>校验文件名是否含有中文、特殊字符和空格\s </li>
<li>如果不是所需则清除上传文件中的内容，使onchange()函数对同一错误文件有效 </li>

</lu>
<P>
两个参数，
第一要替换的字符串，后面是替换成的字符串
<p>
String.prototype.replaceAll = function(s1,s2){
return this.replace(new RegExp(s1,"gm"),s2);
}
</body>

</html>

xycnjx

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js清空FileUpload中的路径+显示、校验图片

验证了上传的是否是图片(不是判断后缀名，此法没保证)，获取了图片宽、高。并且能预览图片　　// 获取本地上传的照片路径　　function getPath(obj) { if (obj) {
复制链接

扫一扫