我正在開(kāi)發(fā)一個(gè)無(wú)法使用 jquery 和 bootstrap 的上傳頁(yè)面。在 Chrome 上我使用這段代碼 css 代碼來(lái)解決我的問(wèn)題.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 版本？另外，有沒(méi)有辦法讓輸入文件也可以在 Internet Explorer 上拖放？
1 回答
慕標(biāo)琳琳
TA貢獻(xiàn)1830條經(jīng)驗(yàn) 獲得超9個(gè)贊
好吧，經(jīng)過(guò)幾個(gè)小時(shí)的嘗試和錯(cuò)誤，我實(shí)際上找到了解決這個(gè)問(wèn)題的真正方法
首先我修改了css，沒(méi)有之后
.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;
}
其次，我使用按鈕+輸入而不是輸入來(lái)設(shè)置自定義消息
<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來(lái)進(jìn)行拖放（changefilename已經(jīng)可以工作了）
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 關(guān)注
- 172 瀏覽
添加回答
舉報(bào)
0/150
提交
取消