ASP.NET 使用ajaxfileupload.js插件出现上传较大文件失败的解决方法(ajaxfileupload.js第一弹)
在写这篇的时候本来想把标题直接写成报错的提示,如下:
“SecurityError:Blocked a frame with origin "http://localhost:55080" from accessing a cross-origin frame.”
但是有点长,会显示不全,就想还是换一下吧,想了一下
“ASP.NET 上传过大图片或文件报错解决办法”,
然后当我写完这个题目之后,我觉得这篇文章好像根本没有写的必要,估计看完题目就会想到关于web.config配置的方面了。但是想写的内容真的不是那么“单纯”的,毕竟是花了自己几个小时去研究的啊~~所以又想了一下,变成了现在的这个题目,就是想和大家分享一下。
那言归正传了。
先上一下报错的提示截图:
先提示
后提示
是这样的,在网上下载了一个ajaxfileupload.js插件,用于无刷新上传图片使的,然后就按照demo的例子去运行了一下,上传啊什么的都OK,但是正好上传的示例图片有一个比较大的,4M,5M的样子,然后上传就会报上面的错误。
单纯看我的描述,明显发现就是图片较大的原因,可能很快就会想到web.config的配置问题上,但是当我是当局者的时候,就没有那么灵光了,因为有提示错误,就有去百度一下,结果查到是什么“跨域调函数”的问题,至此,这个问题我探究的方向已经走偏。
虽然问题提示当中没有明显的说出是跟上传图片的大小有关系,但是这个问题确实是因为没有设置上传文件的大小,而asp.net的默认上传文件大小是2M
我先把解决方法告诉大家,就是在Web.config的<system.web>中加上下面这段
<httpRuntime maxRequestLength="4096"
useFullyQualifiedRedirectUrl="true"
executionTimeout="6000"
minFreeThreads="8"
minLocalRequestFreeThreads="4"
appRequestQueueLimit="100"
enableVersionHeader="true" />
说明:
华丽的分割线
华丽的分割线
如果大家想了解我对整个问题的探究过程,那就继续往下看,蛮有意思的(其实也因为探究问题最初的跑偏,让我学习到了相关的更多知识,过程比较恶心,但是结果比较开心。)
话说查那个报错提示,就是“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了,然后在后台通过
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第三弹)
补充:
《jQuery 关于IE9上传文件无法进入后台问题的原因及解决办法(ajaxfileupload.js第四弹)》
ASP.NET 使用ajaxfileupload.js插件出现上传较大文件失败的解决方法(ajaxfileupload.js第一弹)的更多相关文章
- ASP.NET 使用ajaxupload.js插件出现上传较大文件失败的解决方法
在网上下载了一个ajaxupload.js插件,用于无刷新上传图片使的,然后就按照demo的例子去运行了一下,上传啊什么的都OK,但是正好上传的示例图片有一个比较大的,4M,5M的样子,然后上传就会报 ...
- 使用Xshell的rz命令上传文件失败的解决方法
使用Xshell的rz命令上传文件失败的解决方法 第一种:在home目录下rz上传文件失败,如下: 原因:当前用户不具备权限解决:用 sudo rz 上传即可成功 第二种:对于文件大的rz上传失败的话 ...
- asp.net 文件上传,大文件上传。
新建一个asp.net页面,在工具栏里拖入 FileUpload 上传控件.一个按钮 Button ! ! ! 进入Button事件 //----------------------- ...
- 动态input file多文件上传到后台没反应的解决方法!!!
其实我也不太清除具体是什么原因,但是后面就可以了!!! 我用的是springMVC 自带的文件上传 1.首先肯定是要有springMVC上传文件的相关配置! 2.前端 这是动态input file上传 ...
- 框架基础:ajax设计方案(三)--- 集成ajax上传技术 大文件/超大文件前端切割上传,后端进行重组
马上要过年了,哎,回家的心情也特别的激烈.有钱没钱,回家过年,家永远是舔舐伤口最好的地方.新的一年继续加油努力. 上次做了前端的ajax的上传文件技术,支持单文件,多文件上传,并对文件的格式和大小进行 ...
- 前端通信:ajax设计方案(四)--- 集成ajax上传技术 大文件/超大文件前端切割上传,后端进行重组
马上要过年了,哎,回家的心情也特别的激烈.有钱没钱,回家过年,家永远是舔舐伤口最好的地方.新的一年继续加油努力. 上次做了前端的ajax的上传文件技术,支持单文件,多文件上传,并对文件的格式和大小进行 ...
- 官方webupload上传多个文件或者图片的方法
文件上传 页面代码: <!--引入CSS--> <link rel="stylesheet" type="text/css" href=&qu ...
- c# asp.net mvc4 使用uploadify插件实现上传功能
[1]首先去官网下载插件:http://www.uploadify.com/download/ .ww我使用的是免费的,基于flash的版本.因为基于H5的版本需付费使用,然后使用该插件也就是做做毕设 ...
- JS如何获取上传标签的文件路径和文件名?
如何使用JS获取type="file"的标签上传文件的文件路径及文件名: 代码: <!doctype html><html lang="en" ...
随机推荐
- jQuery操作标签--样式、文本、属性操作, 文档处理
1.样式 2.文本 3.属性操作 全选,反选效果 4.文档处理 操作标签 一.样式操作 样式类: addClass(); // 添加指定的css类名 removeClass(); //移除指定的css ...
- python网络编程--粘包解决方案 和 subprocess模块
1.缓冲区:作用:将程序和网络解耦分为输入缓冲区, 输出缓冲区 每个 socket 被创建后,都会分配两个缓冲区,输入缓冲区和输出缓冲区.write()/send() 并不立即向网络中传输数据,而是先 ...
- java学习笔记DOM4J解析(7)
DOM4J即Document Object Model for Java使用java技术以文档方式解析XML数据的模型. DOM4J是开源组织提供的一个免费的.强大的XML解析工具,如果开发者需要在项 ...
- 【OCP-12c】2019年CUUG OCP 071考试题库(78题)
78.View the exhibit and examine the structure of the CUSTOMERStable. Which two tasks would require s ...
- BootStrap框架引入文件
bootstrap -- 框架 引入需要的 这是外网的------************************************************************* < ...
- web worker的用法及应用场景(转)
首先简单介绍一下什么是web worker.我们都知道在浏览器中javascript的执行是单线程的,页面上的javascript在执行时会阻塞浏览器的响应,这非常影响用户体验,所以ajax应运而生了 ...
- PCA简单实现
''' 总结一下PCA的算法步骤: 设有m条n维数据. 1)将原始数据按列组成n行m列矩阵X 2)将X的每一行(代表一个属性字段)进行零均值化,即减去这一行的均值 3)求出协方差矩阵C=1/m*(XX ...
- Hangfire JobStorage.Current property value has not been initialized
app.UseHangfireServer() 放到 app.UseAbp() 前面 作者: zhaok 出处: http://dotnetmonkey.cnblogs.com/
- 小程序中实时将less编译成wxss
1.npm或者yarn全局安装wxss-cli npm install -g wxss-cli 2.运行wxss-cli命令(weuiTest为小程序目录) wxss ./weuiTest 实时监听w ...
- 安装nagios出现的错误
最近安装nagios时,检查的的状态都没有什么问题,就是监控系统的状态显示不出来 检测的结果如下: [root@lb02 ~]# /etc/init.d/httpd start Starting ht ...