MVC+AjaxFileUpload文件上传

来源：微信公众号CodeL

本次给大家分享的是ajaxfileupload文件上传插件，百度一大堆功能超炫的文件上传插件，为什么我们会选择这个插件呢？

原因是在此之前，我们尝试使用过很多基于flash的上传插件，但由于兼容性,适用性等诸多问题，最终我们选择了—ajaxfileupload.js，由于它使用的原生input标签实现，兼容性很好，它的原理和用法我就不多说了，很多大神们都分析的很透彻。本次和大家分享一下使用它时遇到的各种'坑'，希望大家在使用的时候有所规避。

1.类型问题

如下图，网上大多数资料都说类型dataType一般使用json

但是使用json格式在火狐浏览器中会解析异常提示下载。

解决办法：

1. 使用dataType:”html“,也有网友说在某些版本浏览器中html要大写成HTML才起作用 ，目前没有发现此问题。
2. 在控制器返回Json格式数据的时候，处理一下ContentType：return Json(new { Success = true, Message = "文件上传成功" }, "text/html");

2.插件调整

下载回来使用时需要检查插件中的这段代码：var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');改成：var io = document.createElement("iframe");io.id = frameId;io.name = frameId;
第一句代码在IE部分版本中提示InvalidCharacterError 错误导致无法运行

3.input透明法

先列举一种用法，如图：

<input type="file" id="upload" ><input type="button" value="上传" onlick="document.getElementById(‘upload‘).click()"/>如上图点击button模拟点击input/file标签选择文件上传，这种方式在IE8中无法执行，原因IE8要求比较严格，出于安全限制无法更改value值和促发change事件。

解决办法：采用input透明法

.file_btn_visible{position:relative;top:-30px;left:0;width:80px;height:30px;cursor:pointer;opacity:0;filter:alpha(opacity=0);}意思就是说将input[type=file] 标签通过css样式放置在自定义按钮的上面，然后将input透明度设为0(opacity:0;filter:alpha(opacity=0))，此时点击按钮时实际上点击的是file标签，就不会有问题了。

调整后的插件兼容ie7/8/9/10/11、firefox、chrome等浏览器，注意的是jQuery版本需使用2.0以下的版本，高版本jQuery已不支持IE6/7/8
ajaxfileupload功能虽没有其他flash控件功能强大，但对于普通单文件上传效果很好，运用场景比如：上传图像，上传用户身份证，普通图片，文件等
以上是实际开发过程中遇到的部分问题，若有其他疑问可在公众号留言。

原文链接：http://mp.weixin.qq.com/s?__biz=MzIzNTE2OTk1MA==&mid=402768932&idx=1&sn=0f091d8a9ebf006f5e5d128304d06e63#rd

相关资源获取或其他疑问可在扫码添加CodeL公众号留言。(微信公众号: codelir)

微信扫一扫获取更多开发资源：