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

时间:2023-03-09 01:41:48
多文件上传组件FineUploader使用心得

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

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

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

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

脚本引进来之后,就可以创建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里添加如下的配置:

多文件上传组件FineUploader使用心得
<system.webServer>
<modules runAllManagedModulesForAllRequests="true"/> <security>
<requestFiltering>
<requestLimits maxAllowedContentLength=""></requestLimits>
</requestFiltering>
</security>
</system.webServer>
多文件上传组件FineUploader使用心得

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