多文件上传组件FineUploader使用心得

原文 多文件上传组件FineUploader使用心得

做Web开发的童鞋都知道，需要经常从客户端上传文件到服务端，当然，你可以使用<input type="file"/>来上传文件，这是Asp.Net默认的上传文件元素。但是，受到系统的限制，如果要更改file元素的样式，让他看起来 美观一些，这就比较费劲了，当然可能是本人css功夫没到家吧，总之试了几次，也没能达到想要的效果。最终，就决定用第三方插件吧。由于项目组成员之前都 用的是FileUploader，所以就毫不犹豫的拿来用了一下。

         先附上一张整体的布局以及FileUpload呈现的效果。

      脚本引进来之后，就可以创建FileUploader对象了。本文主要说这次使用过程中遇到的问题，具体用法就不细说了。具体用法这位哥儿们说的非常详细了，Fine Uploader。

      在上传过程中，我发现一个非常奇怪的现象，上传较小一点的文件，一点问题都没有，非常顺利，可是在我偶然上传了一个稍微大一点的文件（50M），这时候就 出现问题了，这时候会一直在那里转圈，进度一直都是0%，这样反复了几次，我发现当上传不超过24M左右的文件时，都没有问题，可是一旦超过了，就出现上 述的问题，上传就中止了。由于上传文件只是大小不一样导致的问题，所以肯定是哪里做了限制导致了这个问题。检查了一遍程序，发现有两个地方对文件的大小做 了限制，一个是配置文件中做了如下的配置：

 <httpRuntime requestValidationMode="2.0" executionTimeout="90" maxRequestLength="2147483" useFullyQualifiedRedirectUrl="false" minFreeThreads="8" minLocalRequestFreeThreads="4" appRequestQueueLimit="100" />

       可是配置文件此处文件大小是以K为单位的，意思就是此处限制的大小为2147483/1024=2097M,约为2个G，远远大于24M，所以应该不是 此处引起的问题。然后我又看了一下脚本中上传文件时的限制，FineUploader本身也可以对文件的后缀和文件的大小做限制，通过如下配置：

  validation:   {  
allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'], 
sizeLimit: 1048576 // 100 M = 100 * 1024 bytes*1024   
}

      在这里对大小做了100M的控制，所以分析了一下也不可能是这里引起的问题，那么会使哪里引起的问题呢？

      我再次拿了一个50M的文件试了一下，仍然上传不成功，这次我打开了Chrome的调试工具，看了一下Request信息和Response信息，注意，这里有些CHrome版本可能看不到此错误信息。"HTTP Error 404.13 - Not Found“，对，居然是404！我们都知道404错误是未找到请求的页面，那么这里怎么会报这个错误呢？于是Google了一下，原来很多人出现过这个问题：原因就是上传文件过大。这是原帖，有兴趣的童鞋可以看一下。既然知道了出错的原因，那么解决起来也就不难了，在Web Config里添加如下的配置：

<system.webServer>
   <modules runAllManagedModulesForAllRequests="true"/>         <security>
 <requestFiltering> 
<requestLimits maxAllowedContentLength="512000"></requestLimits> 
</requestFiltering>
 </security> 
</system.webServer> 

      至此，问题解决。写这篇文章的目的有两个：一，如果你遇到了这个问题，可以很快的帮你解决问题；二，希望大家能一起学习，学习解决问题的能力！说到这里，想起了他人的一句名言：方法总比问题多！只要肯思考，总会有解决的办法的！