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第四弹）》