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

简介: 原文 多文件上传组件FineUploader使用心得 做Web开发的童鞋都知道,需要经常从客户端上传文件到服务端,当然,你可以使用来上传文件,这是Asp.Net默认的上传文件元素。但是,受到系统的限制,如果要更改file元素的样式,让他看起来 美观一些,这就比较费劲了,当然可能是本人css功夫没到家吧,总之试了几次,也没能达到想要的效果。

原文 多文件上传组件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> 
复制代码

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

 

目录
相关文章
|
JavaScript
ElementUI 常用组件使用方法
ElementUI 常用组件使用方法
ElementUI 常用组件使用方法
|
前端开发
「前端组件开发」越折腾越有趣,封装了一个表单组件
最近折腾代码简洁之路,先折腾了详情页,最近准备折腾一下表单组件,准备二次封装,提升代码复用率。
240 1
|
JavaScript 前端开发 Java
前后端分离 -- 深入浅出 Spring Boot + Vue + ElementUI 实现相册管理系统【文件上传 分页 】 文件上传也不过如此~
前后端分离 -- 深入浅出 Spring Boot + Vue + ElementUI 实现相册管理系统【文件上传 分页 】 文件上传也不过如此~
581 0
前后端分离 -- 深入浅出 Spring Boot + Vue + ElementUI 实现相册管理系统【文件上传 分页 】 文件上传也不过如此~
|
JavaScript 前端开发
「后端小伙伴来学前端了」Vue集成 Element-tiptap 富文本编辑器
「后端小伙伴来学前端了」Vue集成 Element-tiptap 富文本编辑器
848 0
「后端小伙伴来学前端了」Vue集成 Element-tiptap 富文本编辑器
|
存储 移动开发 JavaScript
手把手教你用 Vue 搭建带预览的「上传图片」管理后台
手把手教你开发带预览的 Vue 图片上传组件,即图片上传管理后台。只要你跟本教程一步一步走,最终能很好的理解整个前后端传图的工程逻辑。前端我们使用 Vue + Axios + Multipart 来搭建前端上传图片应用,后端我们使用 Node.js + Express + Multer 来搭建后端上传图片的后端处理。
941 0
|
存储 JSON JavaScript
「免费开源」基于Vue和Quasar的前端SPA项目crudapi零代码开发平台后台管理系统实战之拖拽表单定制(十六)
本文主要介绍拖拽表单定制功能,通过拖拽的方式定制表单录入和编辑页面,满足了个性化需求。针对元数据表的每个字段,通过拖拽方式决定是否显示或者隐藏,然后还可以配置显示的宽度。最终以json格式保存到后台数据库,运行时根据配置动态渲染录入和编辑表单form页面。针对不同的设备(电脑,平板,手机)都可以单独定制。
341 0
「免费开源」基于Vue和Quasar的前端SPA项目crudapi零代码开发平台后台管理系统实战之拖拽表单定制(十六)
|
JavaScript 前端开发 数据管理
「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之动态表单(五)
本文主要介绍了元数据中动态表单设计功能,支持常见的数据类型和索引,然后实现了动态表单的crud增删改查功能。
299 0
「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之动态表单(五)
|
JavaScript 前端开发 关系型数据库
「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之序列号自定义组件(四)
MySQL数据库没有单独的Sequence,只支持自增长(increment)主键,但是不能设置步长、开始索引、格式等,最重要的是一张表只能由一个字段使用自增,但有的时候我们需要多个字段实现序列号功能或者需要支持复杂格式,MySQL本身是实现不了的,所以crudapi封装了复杂序列号,支持字符串和数字,自定义格式,也可以设置为时间戳。可以用于产品编码、订单流水号等场景!
196 0
「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之序列号自定义组件(四)
|
移动开发 JavaScript 前端开发
「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之布局菜单(三)
本文主要介绍了嵌套路由和菜单功能,用到了router-view和q-tree,然后实现了设置页面和关于页面功能。
579 0
「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之布局菜单(三)

热门文章

最新文章