我正在開發一個無法使用 jquery 和 bootstrap 的上傳頁面。在 Chrome 上我使用這段代碼 css 代碼來解決我的問題.btn-file-upload{ width: 200px; position:relative; height: 40px;}.btn-file-upload:after{ content: attr(value); position: absolute; top: 0; left: 0; bottom: 0; width: 99%; background: white; color: black; border:1px solid rgb(0, 0, 126); border-radius: 2px; text-align: center; font-size: 12px; line-height: 1.7; overflow: visible;}<input type="file" name="theFile" size="60" value="label" onkeypress="javascript:return false;" onchange="changeFileName()" class="btn-file-upload">我怎樣才能讓它在 Firefox 上工作而不破壞 chrome 版本？另外，有沒有辦法讓輸入文件也可以在 Internet Explorer 上拖放？
1 回答
慕標琳琳
TA貢獻1830條經驗 獲得超9個贊
好吧，經過幾個小時的嘗試和錯誤，我實際上找到了解決這個問題的真正方法
首先我修改了css，沒有之后
.btn-file-upload{
position: relative;
top: 0;
left: 0;
bottom: 0;
width: 200px;
background: white;
color: black;
border: 1px solid rgb(0, 0, 126);
border-radius: 2px;
text-align: center;
font-size: 12px;
line-height: 1.7;
overflow: visible;
height: 40px;
}
其次，我使用按鈕+輸入而不是輸入來設置自定義消息
<button id="inputdrop" onclick="return document.getElementById('getFile').click();return false;" onkeypress="javascript:return false;" class="btn-file-upload">Label</button>
<input size='60' style='width: 187px;display:none' type='file' name="theFile" id="getFile" onchange="changeFileName()">
<span id="filename" class="Testo">No file selected</span>
最后我使用了一些js來進行拖放（changefilename已經可以工作了）
function changeFileName(){
document.getElementById("filename").innerText = code to get file name in struts;
}
//code here go on the onload
document.getElementById("inputdrop").ondragover = document.getElementById("inputdrop").ondragenter = function(evt) {
evt.preventDefault();
};
document.getElementById("inputdrop").ondrop = function(evt) {
document.getElementById("getFile").files = evt.dataTransfer.files;
changeFileName();
evt.preventDefault();
};
唯一的限制是，這不適用于 Internet Explorer 和舊版 Edge...但是，至少，這適用于 Chrome 和 Firefox 以及新版 Edge。
- 1 回答
- 0 關注
- 155 瀏覽
添加回答
舉報
0/150
提交
取消