js无法实现上传文件控制文件大小以及文件类型功能

       最近在做一套网站，网站允许注册的用户上传自己的一些产品图片和资料（网站的注册用户类型是一个信用协会的企业会员），考虑到用户的数量不小，需要控制上传的文件的类型（主要为图片）和大小（暂定为200k）。

      最初的思路是使用js脚本实现这个功能，在搜索控制上传文件大小js功能代码后才郁闷的发现，代码是惊人的一致，全部为：

js 代码

function   CheckFileSize()     
  {     
      var   s   =   document.Myform.photo.value;     
      if(s==" ")return   false;     
      var   img   =   new   Image();     
      img.src   =   s;     
      alert("高   =   "+   img.height   +   "\n宽   =   "+   img.width);     
      alert("fileSize   =   "+   img.fileSize   +"   字节");     
      return   false;     
  }     

      

js 代码

function   CheckFileSize()     
  {     
     var FileMaxSize = 100;//限制上传的文件大小，单位(k)  
      var   s   =   document.RegForm.Img_1.value;    
      //if(s==""){alert("No image,please select again!");document.RegForm.Img_1.focus(); return   false;}     
      var   img   =   new   Image();     
      img.src   =   s;   
     if(img.fileSize>FileMaxSize*1024){alert("The file size exceeds "+FileMaxSize+"K，please choose a smaller one!");document.RegForm.Img_1.focus();return false;}  
  //--></SCRIPT>   

  

      还找到了一个判断上传文件为图片类型的代码，很简单，当file表单对象值变化后，利用onchange事件，将选择的文件装载到一个不显示的图片对象中，图片对象中有两个方法：onload（）和onerror（），图片对象会自动判断装载的对象是否正确。 

 

     想到既然这个代码转载的数量这么大，应该没有什么问题，便将这部分代码整理了一下，最先是本地写了一个html页面，加入脚本进行测试，测试很顺利的通过了，但当把这部分代码转移到我的web程序里，立即失效了。

 

   我的web程序使用了webwork作为mvc框架，上传文件使用了smartupload的组件，在以前的一个脚本中，在上传文件后将上传到服务器的文件路径重新赋值到操作页面，img对象会重新装载这个图片并显示，加入这样的控制代码后并没有实现最初的控制功能。

 

   在选择上传文件后，代码的流程应该是加载入这个图片，加载的过程就是判断上传文件类型是否合法的问题，然后在提交上传的过程检测上传文件的大小。

 

   但测试失败，首先是选择上传文件后，img对象无法加载这个图片，上传控制代码输出的上传文件的大小为-1，很显然的是img对象没有加载，开始查找问题。

 

  将执行后的文件html源码复制到本地一个html页面，再次执行代码，代码执行成功。

 

  想到以前在上传文件后图片正常显示，明白在web程序中，img对象装载的路径是从web程序的根路径开始查找，现在使用脚本检测，img对象装载是从本地路径，但很明显的是，img对象无法识别这个路径，自然就无法装载，检测控制就更无从谈起了。

 

   本地页面识别上传路径正常，一旦在web程序中运行，这段js代码失效了，现在可以肯定是上传文件的路径问题。查找解决方法，js代码中img对象在装载路径如何识别浏览器端用户的路径，没有找到，上面的js代码样例最后这个帖子的作者都信誓旦旦的讲到，在自己的项目中都是这样的使用这段代码完成检测功能，没有问题，不知道他是怎样解决这个问题的，难道这段代码在iis的环境里正常？

 

   最后使用了smartload组件在上传过程中判断设置，设置上传文件的最大阀值，在测试过程中，一开始上传文件超过上限，页面显示异常，查看代码，原来组件在检测大小的过程中，超过最大值是以异常的形式抛出的，（以前还真没有好好看看这个类），捕捉这个异常，测试终于通过了。

 

   上面的这段js代码怎样才能在web程序里正常使用呢？我的js水平还在入门阶段，要明白还真不容易。

评论

10 楼 liuwei1981 2008-08-26  

achun 写道

LZ是否是用框架习惯了，对原理并不十分清楚。
那建议楼主试试用纯手工的html+javascript来完成这个。
然后你就明白问题出在哪里了。

纯手工的html和js已经试验过了，至于原因已经有朋友在留言里解释过了

9 楼 achun 2008-08-25  

LZ是否是用框架习惯了，对原理并不十分清楚。
那建议楼主试试用纯手工的html+javascript来完成这个。
然后你就明白问题出在哪里了。

8 楼 冯冀川 2008-08-24  

InnocentBoy 写道

首先要明白页面上哪些东西是在客户端执行，哪些是服务器执行，我同事也遇到过这样的问题，在上传文件时直接用输入框输入文件的绝对路径，就是找不到文件。

上传文件的时候浏览器出于安全性考虑，不允许直接向type=file的input中写入数据，或者用JS插入/改变它的值，只能通过点击选择要上传的文件才有效

7 楼 冯冀川 2008-08-24  

用 new Image()也会存在浏览器的兼容性问题；

目前上传文件直接用JS好像无法判断大小，可以通过上传的时候，向后台获取数据来判断

6 楼 airballbibi 2008-08-24  

关于这个问题,在项目中也碰到过,不过用js在客户端判断文件大小的问题无法找到解决方案，最好的效果也是用Ajax方式实现后台文件大小的读取，但效果不一定好。最后还是用上传后，在服务器内存中判断图片大小。具体原因还望高手可以解释下，期待更好的解决方案。

5 楼 InnocentBoy 2007-11-09  

文件的类型还是可以判断的，因为有文件名的。大小可以在上传的过程中，在服务器的内存中进行判断。

4 楼 liuwei1981 2007-11-05  

如果在jsp中目录是相对于服务器的目录，那么使用js在文件上传到服务器之前进行类型和大小的测试就是不可能的了，只能在上传到服务器时候进行测试，那么我提到的那个js脚本测试怎么还是很多人说是在项目中能够正常使用呢？晕啊

3 楼 InnocentBoy 2007-11-05  

liuwei1981 写道

上传文件使用了file表单对象。
不明白img对象装载方式，本地页面可以装载要上传的图片，在web程序中，img对象所在的页面所在的web程序文件夹就是img的唯一获取图片文件的路径么？

html测试可以是本地图片，但是到了jsp中就要有服务器的上执行的概念，它的目录是相对于服务器的目录。最好的方式是相对于服务的相对路径。

2 楼 liuwei1981 2007-11-05  

上传文件使用了file表单对象。
不明白img对象装载方式，本地页面可以装载要上传的图片，在web程序中，img对象所在的页面所在的web程序文件夹就是img的唯一获取图片文件的路径么？

1 楼 InnocentBoy 2007-11-05  

首先要明白页面上哪些东西是在客户端执行，哪些是服务器执行，我同事也遇到过这样的问题，在上传文件时直接用输入框输入文件的绝对路径，就是找不到文件。