zoukankan      html  css  js  c++  java
  • 上传图片客户端预览及大小判断,支持IE火狐

        做web开发的哥们都会遇到批量上传图片的需求,相信大家都会遇到这样的问题,当选择好要上传的图片,提交服务器后,发现有图片的大小超过了系统允许的范围。从而不得不返回来重新上传过;就算是那些没有超过大小的也要重新在选择一遍。上传一张还好,要是批量上传10、或者20等等,而只因为其中一张图片的大小超过了系统允许的范围,结果就又要重新选择,这个时候人的心情就可想而知了,——这真是“一颗老鼠屎坏了一锅粥”。而且也严重影响了用户体验!

         难道就没有一个好的方法吗?能在客户端就能验证用户上传的图片的大小,使用户每选择一个要上传的图片,就能知道该图片是否符合,能让用户及时地“知错能改”!这样就可以把“错误”扼杀在“萌芽”状态。这样是不是用户体验也更上一层楼了啊!好了,废话不说了,直接切入主题吧!

       客户端验证图片的大小,大家可能会想到js中的FileSystemObject 对象,诚然,该对象可以对本地文件系统进行访问。

    代码如下(假设要访问的图片地址为C:\\picture.jpg):

    var fso = new ActiveXObject("Scripting.FileSystemObject");
    var file = fso.GetFile("C:\\picture.jpg");  // 获得文件对象
    alert("文件大小=" + file.Size);  // 输出图片的大小(单位为字节)

          但此段代码,只能在IE中执行,在火狐中却不起作用,原因是火狐中不存在FileSystemObject 对象。而且在IE中通过此段代码去获得文件信息的时候,IE总会弹出一个脚本安全提示的框,让用户去选择。这样的话,虽然在客户端获得了上传的图片的大小,但却每次执行此段代码的时候都会弹出一个框,用户体验是不是会更糟啊!想想要是上传10个的话,那不是用户要点击“确定”10次啊!这样的话,岂不是“捡了芝麻丢了西瓜”嘛!而且还与火狐不兼容!难到就没有其他方法了吗? 在此,在下就介绍自己总结的一种能兼容IE和火狐的方法。

    大家可以拷这段代码到本地测试一下(本人在IE7和火狐3.0上通过,此段代码还有预览图像的功能哦)。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>上传图片客户端预览及大小判断,支持IE火狐</title>
    </head>

    <body>
    系统允许的大小:<input type="text" size="4" value="800" name="fileSizeLimit" id="fileSizeLimit"/> K
    <input type="file" name="file1" id="file1" size="40" onchange="changeSrc(this)"/>
    <img src="about:blank" id="fileChecker" alt="test"  height="180"/>  <!--巧妙之处-->

    <script type="text/javascript">
     
    var oFileChecker = document.getElementById("fileChecker");
       
    function changeSrc(filePicker)
    {
     if(window.addEventListener){ // FF


        oFileChecker.src = document.getElementById('file1').files[0].getAsDataURL();
        oFileChecker.addEventListener('load', function(){isFFCompleted(document.getElementById('file1').files[0]);}, false);
       
      }else{ // IE


       oFileChecker.src = filePicker.value;
       oFileChecker.attachEvent("onreadystatechange", function(){isIECompleted(oFileChecker);});
      }
    }

    function isIECompleted(fileObj){
     
     if (oFileChecker.readyState == "complete")
      {
          checkSize(fileObj);
      }
    }

    function isFFCompleted(fileObj){
     
      if ( oFileChecker.complete )
     {
      checkSize(fileObj);
     }
     
    }
       
    function checkSize(fileObj)
    {
       
         var limit  = document.getElementById("fileSizeLimit").value * 1024;
       
         if (fileObj.fileSize > limit)
         {
            alert("文件太大");
           
         }
         else
         {
            alert("文件正确");
         }
    }
    </script>
    </body>
    </html>

    本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/rj042/archive/2009/08/15/4448298.aspx

  • 相关阅读:
    net start mongodb 提示:发生系统错误 5,拒绝访问。
    jquery下载所有版本
    国内优秀开源镜像站汇总
    bootstrap导航条报错 Uncaught TypeError: Cannot convert object to primitive value
    null的坑 和 比较运算符、相等运算符的隐式转换问题 (在javascript中,null>=0 为真,null<=0 为真,null==0却为假,null到底是什么?)
    关于 圣杯布局(双飞翼布局)的一些想法
    如何制作图标字体(如何将svg转换为css可用的图标字体)
    VirtualBox-虚拟硬盘扩容-win7
    前端JS导出表格
    JS判断是否是IE浏览器
  • 原文地址:https://www.cnblogs.com/zxjyuan/p/1690057.html
Copyright © 2011-2022 走看看