[點晴永久免費OA]IE 下JS上傳文件時出現(xiàn)“拒絕訪問”的解決方案
很多時候，VS 自帶的input[file]控件不能滿足我們的要求。而且在不同瀏覽器中的樣式有些許不一致。 比如在IE下： 201603.png) 在chorme中： 201603.png) 所以有時候需要我們自定義file的樣式。一般都是通過將file隱藏，來達到我們需要的效果。 定義一個按鈕，一個file,以及一個文本框。點擊按鈕，調用file的click事件，并將選中的文件名稱顯示在文本框中。但這種方式不兼容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();//調用click的點擊事件 } function change(control) { $("txtFile").val($(this).val()); } 運行效果： 201603.png) 這樣基本就能達到我們想要的效果了。但是有一個問題就是：在IE下，我們通過Js提交表單時，會出現(xiàn)“拒絕訪問”的錯誤。錯誤原因 : IE下 file表單控件，不能用js控制打開文件選擇器，必須要手動點擊才可以，否則會報 “拒絕訪問”。 即:不能通過js直接調用file的click事件。只能通過點擊觸發(fā)file的change事件。 解決方案：將file控件隱藏在a標簽之下。點擊a標簽時，直接觸發(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; } 這樣就能達到上圖一致的效果了。 PS:只展示了部分關鍵代碼，詳細的樣式需要自己慢慢調整才可以。
該文章在 2019/3/25 21:53:05 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
