本次給大家分享的是Ajaxfileupload文件上傳插件，百度一大堆功能超炫的文件上傳插件，為什么我們會(huì)選擇這個(gè)插件呢？

原因是在此之前，我們嘗試使用過(guò)很多基于Flash的上傳插件，但由于兼容性,適用性等諸多問(wèn)題，最終我們選擇了—ajaxfileupload.js，由于它使用的原生input標(biāo)簽實(shí)現(xiàn)，兼容性很好，它的原理和用法我就不多說(shuō)了，很多大神們都分析的很透徹。本次和大家分享一下使用它時(shí)遇到的各種'坑'，希望大家在使用的時(shí)候有所規(guī)避。

1.類型問(wèn)題

  如下圖，網(wǎng)上大多數(shù)資料都說(shuō)類型dataType一般使用json

但是使用json格式在火狐瀏覽器中會(huì)解析異常提示下載。

解決辦法：

1. 使用dataType:”html“,也有網(wǎng)友說(shuō)在某些版本瀏覽器中html要大寫成HTML才起作用 ，目前沒有發(fā)現(xiàn)此問(wèn)題。
2. 在控制器返回Json格式數(shù)據(jù)的時(shí)候，處理一下ContentType：return Json(new { Success = true, Message = "文件上傳成功" }, "text/html");

2.插件調(diào)整

下載回來(lái)使用時(shí)需要檢查插件中的這段代碼：var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');改成：var io = document.createElement("iframe");io.id = frameId;io.name = frameId;
第一句代碼在IE部分版本中提示InvalidCharacterError 錯(cuò)誤導(dǎo)致無(wú)法運(yùn)行

3.input透明法

先列舉一種用法，如圖：

<input type="file" id="upload" ><input type="button" value="上傳" onlick="document.getElementById(‘upload‘).click()"/>如上圖點(diǎn)擊button模擬點(diǎn)擊input/file標(biāo)簽選擇文件上傳，這種方式在IE8中無(wú)法執(zhí)行，原因IE8要求比較嚴(yán)格，出于安全限制無(wú)法更改value值和促發(fā)change事件。

解決辦法：采用input透明法

.file_btn_visible{position:relative;top:-30px;left:0;width:80px;height:30px;cursor:pointer;opacity:0;filter:alpha(opacity=0);}意思就是說(shuō)將input[type=file] 標(biāo)簽通過(guò)CSS樣式放置在自定義按鈕的上面，然后將input透明度設(shè)為0(opacity:0;filter:alpha(opacity=0))，此時(shí)點(diǎn)擊按鈕時(shí)實(shí)際上點(diǎn)擊的是file標(biāo)簽，就不會(huì)有問(wèn)題了。

調(diào)整后的插件兼容ie7/8/9/10/11、Firefox、Chrome等瀏覽器，注意的是jQuery版本需使用2.0以下的版本，高版本jQuery已不支持IE6/7/8
ajaxfileupload功能雖沒有其他flash控件功能強(qiáng)大，但對(duì)于普通單文件上傳效果很好，運(yùn)用場(chǎng)景比如：上傳圖像，上傳用戶身份證，普通圖片，文件等
以上是實(shí)際開發(fā)過(guò)程中遇到的部分問(wèn)題，若有其他疑問(wèn)可在公眾號(hào)留言。

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

相關(guān)資源獲取或其他疑問(wèn)可在掃碼添加CodeL公眾號(hào)留言。(微信公眾號(hào): codelir)

微信掃一掃獲取更多開發(fā)資源：