zoukankan      html  css  js  c++  java
  • 多文件上传组件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" />
    View Code

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

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

          在这里对大小做了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> 
    View Code

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

  • 相关阅读:
    LeetCode Single Number
    Leetcode Populating Next Right Pointers in Each Node
    LeetCode Permutations
    Leetcode Sum Root to Leaf Numbers
    LeetCode Candy
    LeetCode Sort List
    LeetCode Remove Duplicates from Sorted List II
    LeetCode Remove Duplicates from Sorted List
    spring MVC HandlerInterceptorAdapter
    yum
  • 原文地址:https://www.cnblogs.com/xsyblogs/p/3511546.html
Copyright © 2011-2022 走看看