[點(diǎn)晴永久免費(fèi)OA]IE 下JS上傳文件時(shí)出現(xiàn)“拒絕訪(fǎng)問(wèn)”的解決方案
很多時(shí)候，VS 自帶的input[file]控件不能滿(mǎn)足我們的要求。而且在不同瀏覽器中的樣式有些許不一致。 比如在IE下： 201603.png) 在chorme中： 201603.png) 所以有時(shí)候需要我們自定義file的樣式。一般都是通過(guò)將file隱藏，來(lái)達(dá)到我們需要的效果。 定義一個(gè)按鈕，一個(gè)file,以及一個(gè)文本框。點(diǎn)擊按鈕，調(diào)用file的click事件，并將選中的文件名稱(chēng)顯示在文本框中。但這種方式不兼容IE。 html代碼： <div> <input type="text" id="txtFile" /> <input type="file" hidden="hidden" id="file" onchange="change(this)"/> <input type="button" value="Browse" id="btn" onclick="btnClick()"/> </div> js代碼： function btnClick() { $("#file").click();//調(diào)用click的點(diǎn)擊事件 } function change(control) { $("txtFile").val($(this).val()); } 運(yùn)行效果： 201603.png) 這樣基本就能達(dá)到我們想要的效果了。但是有一個(gè)問(wèn)題就是：在IE下，我們通過(guò)Js提交表單時(shí)，會(huì)出現(xiàn)“拒絕訪(fǎng)問(wèn)”的錯(cuò)誤。錯(cuò)誤原因 : IE下 file表單控件，不能用js控制打開(kāi)文件選擇器，必須要手動(dòng)點(diǎn)擊才可以，否則會(huì)報(bào) “拒絕訪(fǎng)問(wèn)”。 即:不能通過(guò)js直接調(diào)用file的click事件。只能通過(guò)點(diǎn)擊觸發(fā)file的change事件。 解決方案：將file控件隱藏在a標(biāo)簽之下。點(diǎn)擊a標(biāo)簽時(shí)，直接觸發(fā)file的change事件 demo： <div> <input id="photoCover" class="input-large" value="" type="text" style="width:200px" readonly="readonly"> <a href="#" class="excelbutton"> Browse<input type="file" name="artworkFile" id="artworkFile" class="file" onchange="change(this)" value="瀏覽" /> </a> <input type="button" class="btn" style="height:20px;width:55px;" value="New" onclick="artworkNewItem(this)" /> </div> 樣式： .excelbutton { /*background-color: #1570a6; color: #fff;*/ width: 50px; height: 30px; position: relative; overflow: hidden; text-align: center; padding-top: 2px; padding-left: 4px; padding-right: 6px; padding-bottom: 2px; margin-left:4px; cursor: pointer; color: #fff; font-size: 11px; background-color: #1570A6; border: #FFFFFF 1px solid; } .excelbutton:hover { background-color: #136494; } .file { position: absolute; right: 0; top: 0; width: 50px; opacity: 0; filter: alpha(opacity=0); height: 20px; cursor: pointer; } 這樣就能達(dá)到上圖一致的效果了。 PS:只展示了部分關(guān)鍵代碼，詳細(xì)的樣式需要自己慢慢調(diào)整才可以。
該文章在 2019/3/25 21:53:05 編輯過(guò) |
關(guān)鍵字查詢(xún)
相關(guān)文章
正在查詢(xún)... 
|
400 186 1886
