ASP.NET 使用js插件出现上传较大文件失败的解决方法(ajaxfileupload.js第一弹)

简介:

在写这篇的时候本来想把标题直接写成报错的提示,如下:

“SecurityError:Blocked a frame with origin "http://localhost:55080" from accessing a cross-origin frame.”

但是有点长,会显示不全,就想还是换一下吧,想了一下

“ASP.NET 上传过大图片或文件报错解决办法”

然后当我写完这个题目之后,我觉得这篇文章好像根本没有写的必要,估计看完题目就会想到关于web.config配置的方面了。但是想写的内容真的不是那么“单纯”的,毕竟是花了自己几个小时去研究的啊~~所以又想了一下,变成了现在的这个题目,就是想和大家分享一下。

那言归正传了。

先上一下报错的提示截图:

先提示

wKioL1QJSImzRuCeAACB2ER0i9w500.jpg

后提示

wKioL1QJSJ2AyksWAABkAWf5Afw735.jpg

是这样的,在网上下载了一个ajaxfileupload.js插件,用于无刷新上传图片使的,然后就按照demo的例子去运行了一下,上传啊什么的都OK,但是正好上传的示例图片有一个比较大的,4M,5M的样子,然后上传就会报上面的错误。

单纯看我的描述,明显发现就是图片较大的原因,可能很快就会想到web.config的配置问题上,但是当我是当局者的时候,就没有那么灵光了,因为有提示错误,就有去百度一下,结果查到是什么“跨域调函数”的问题,至此,这个问题我探究的方向已经走偏。

虽然问题提示当中没有明显的说出是跟上传图片的大小有关系,但是这个问题确实是因为没有设置上传文件的大小,而asp.net的默认上传文件大小是2M

我先把解决方法告诉大家,就是在Web.config的<system.web>中加上下面这段

1
2
3
4
5
6
7
< httpRuntime  maxRequestLength = "4096"
     useFullyQualifiedRedirectUrl = "true"
     executionTimeout = "6000"
     minFreeThreads = "8"
     minLocalRequestFreeThreads = "4"
     appRequestQueueLimit = "100"
     enableVersionHeader = "true"  />

说明:

wKioL1QJSNjyjzUYAAegINuoGVw046.jpg

华丽的分割线


华丽的分割线

如果大家想了解我对整个问题的探究过程,那就继续往下看,蛮有意思的(其实也因为探究问题最初的跑偏,让我学习到了相关的更多知识,过程比较恶心,但是结果比较开心。)

话说查那个报错提示,就是“SecurityError:Blocked a frame with origin "http://localhost:55080" from accessing a cross-origin frame.”这句,然后提到了什么“跨域调函数”,当时就迷糊了,这是什么东西啊?然后看到一篇文章是讲关于这个的,主要说就是页面中存在一个iframe,然后iframe中的js代码与页面中的js代码相互调用,在某种情况下就变成了跨域的调用,就会报错。

查到这里我就已经有点不耐烦了,因为貌似需要去查看ajaxfileupload.js插件的源代码了,说实话,看js源码是我众多不爱做的事情之一。但是我又是不喜欢遇到问题草草了事的人,所以必须要看一下了。

最初其实我比较纳闷的是js如何实现将文件上传的?当然,我知道是ajax,但是导向页面的时候,后台是怎么得到的想要上传文件路径的呢?(前台是死都不会让你得到的,只会是类似c:\fakepath\XXX.jpg)原谅我的无知,其实一直在用ASP.NET的自带控件,从来也就没有把这些问题当回事(只是最近好像才灵光一些,听一些朋友说现在开发都不会用ASP.NET的自带控件了,所以最近才开始改变),但是当需要用<input type=file />的时候,才知道自己真的是一无所知。好杯具啊~

说一下js是怎样通过ajax实现上传文件的吧,简单说就是通过提交表单,把包含有<input type=file />的form提交就OK了,然后在后台通过

1
HttpFileCollection files = System.Web.HttpContext.Current.Request.Files

就能得到这个文件对象,然后就可以进行一系列的操作了。不过通常都是先把文件保存到一个我们指定的目录下,如果你想预览图片,那么就只能调出拷贝到指定目录下的图片去显示。不知道我说的清楚否?



下面说说 ajaxfileupload.js插件是怎么实现文件上传的吧,它是动态的去创建一个iframe和一个form,然后clone(克隆)页面中的<input type=file />到这个form中,之后提交这个动态创建的form,这样后台就能知道你想上传的文件是什么了,返回的内容显示到动态iframe中,更重要的是这是一个无刷新的上传啊!感觉这个想法简直酷毙了。

回到问题,在这个过程中我发现完全没有所谓的“跨域调函数”的问题,后来跟着浏览器打断点。发现选择较大文件上传的时候,动态iframe的文档结构根本就没有生成出来,接着就被catch住了。

因为整个js的代码看的还算仔细,感觉也没什么尿点。就是因为上传文件的大小不同会导致iframe的文档结构能否生成,所以这时候我才有点反过劲儿来,是不是项目配置的问题啊?然后就找到了上面的解决办法。

 

兜了一个大圈子终于把问题解决,但是关于ajaxfileupload.js插件的事儿还没有完,如有兴趣,请关注:

jQuery 关于ajaxfileupload.js插件的逐步解析(ajaxfileupload.js第二弹)

jQuery 自制上传头像插件-附带Demo实例(ajaxfileupload.js第三弹)










本文转自 我不会抽烟 51CTO博客,原文链接:http://blog.51cto.com/zhouhongyu1989/1549192,如需转载请自行联系原作者

目录
相关文章
|
4月前
|
JavaScript API
深入探索fs.WriteStream:Node.js文件写入流的全面解析
深入探索fs.WriteStream:Node.js文件写入流的全面解析
|
2月前
|
缓存 监控 前端开发
JavaScript 实现大文件上传的方法
【10月更文挑战第17天】通过以上步骤和方法,我们可以实现较为可靠和高效的大文件上传功能。当然,具体的实现方式还需要根据实际的应用场景和服务器要求进行调整和优化。
|
2月前
|
JavaScript 前端开发 内存技术
js文件的入口代码及需要入口代码的原因
js文件的入口代码及需要入口代码的原因
44 0
|
7天前
|
JavaScript 前端开发
基于SVG的js圆形菜单插件
这是一款基于SVG的js圆形菜单插件。该js圆形菜单插件可以生成漂亮的圆形菜单效果,支持二级菜单,支持使用鼠标滚动切换菜单
35 16
|
3天前
|
JavaScript
时尚简洁的js轮播图特效插件
这是一款时尚简洁的js轮播图特效插件。该轮播图采用es6语法制作,底部带缩略图和描述信息。图片和描述信息在切换时同步滑动。
|
18天前
|
Web App开发 JavaScript iOS开发
JS弹出式QQ在线客服插件
JS弹出式QQ在线客服插件
24 6
|
21天前
|
JavaScript 前端开发 容器
jQuery多功能滑块插件r-slider.js
r-slider.js是一款jQuery多功能滑块插件。使用该插件,可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。
29 5
|
19天前
|
Web App开发 JavaScript 前端开发
高性能的纯Js滚动条美化插件smooth-scrollbar
smooth-scrollbar是一款高性能的纯JavaScript滚动条美化插件。该滚动条为现代浏览器而制作,它具有高性能,自由配置,平滑滚动等特点,支持各种现代桌面浏览器和手机设备。
|
1月前
|
JavaScript 前端开发
javascript开发的简单的弹幕插件
这是一个原生javascript开发的简单的弹幕插件,具有美观、易用,占用的资源较低等特点,可以给弹幕设置内容、颜色、头像、链接地址等属性,鼠标悬停等,简单实用,欢迎下载!
43 5
|
3月前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
111 2
前端JS读取文件内容并展示到页面上