0
我寫了一個小腳本，通過在隱藏inputdiv下拉文件輸入。我的代碼如下所示：下載輸入與Firefox/Safari瀏覽器/ IE
<!DOCTYPE html>
<html>
<head>
<title>drop</title>
</head>
<body>
<div id="dropzone" style="height: 200px; width: 200px; background-color: green;">
drop here
</div>
<input type="file" id="file" class="hidden">
<script type="text/javascript" src="jquery-min.js"></script>
<script type="text/javascript" src="drop.js"></script>
</body>
</html>
drop.js：
$(document).on("dragover drop", function(e) {
e.preventDefault(); // allow dropping and don't navigate to file on drop
})
$("#dropzone").on("drop", function(e) {
console.log("drop");
$("#file").prop("files", e.originalEvent.dataTransfer.files); // put files into element
this.style.backgroundColor='green';
});
$("#dropzone").on("dragover", function(e){
console.log("dragover");
this.style.backgroundColor='blue';
});
$("#dropzone").on("dragleave", function(e){
console.log("dragleave");
this.style.backgroundColor='green';
});
這適用於Chrome但遺憾的是沒有Firefox和Safari，我希望也沒有對IE瀏覽器...我知道這是每個Web開發者都喜歡，所以我應該堅持原生的方式嗎？還是有一個圖書館，可以幫助我跨瀏覽器的東西？所以我只需要這部分沒有上傳或其他只是把信息通過放在輸入字段。