Question

我试图通过拖放和简单的打开文件按钮打开文本文件。我设法让我的按钮工作，但拖放有一些问题。当我将文件放在我的下拉区域时，文件被打开并被浏览器读取而不是我的js-code。

#fileInput {
	display: none;
    }

    #dropBox {
	margin: 15px;
	width: 300px;
	height: 300px;
	border: 5px dashed gray;
	border-radius: 8px;
	background: lightyellow;
	background-size: 100%;
	background-repeat: no-repeat;
	text-align: center;
    }

    #dropBox div {
	margin: 100px 70px;
	color: orange;
	font-size: 25px;
	font-family: Verdana, Arial, sans-serif;
    }

<!DOCTYPE html>
    <html>
    <head>

    <link rel="stylesheet" type="text/css" href="css/file.css" />

    <script>

    <!-- File processing-->
    function procesFiles(files) {
	
	var file = files[0];
	var reader = new FileReader();
	
	reader.onload = function(e) {
		var output = document.getElementById("fileOutput");
		output.textContent = e.target.result;
	};
	

	reader.readAsText(file);
    }
	

    <!-- File input-->
    function showFileInput() {
	var fileInput = document.getElementById("fileInput");
	fileInput.click();
    }

    <!-- Drop box -->
    var dropBox;

    window.onload = function() {
	dropBox = document.getElementById("dropBox");
	dropBox.ondragenter = ignoreDrag;
	dropBox.ondragover = ignoreDrag;
	dropBox.ondrop = drop;
    }

    function ignoreDrag(e) {
	e.stopPropagation();
	e.preventDefault();
    }

    function drop(e) {
	e.stopPropagation();
	e.preventDefault();
	
	var data = e.dataTransfer.files;
	var files = data.files;
	
	procesFiles(files);
	
    }
    </script>
    
    </head>
    <body>
  
     <div id="dropBox">
  	<div>Drop your file here...</div>
    </div>
  
    <input id="fileInput" type="file" onchange="procesFiles(this.files)"/>
  	<button onclick="showFileInput()">Get new file!</button>
  
    <div id="fileOutput" style="width:500px; height:300px;">
    </div>

  
    </body>
    </html>

我的HTML：

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="css/file.css" />

<script>

<!-- File processing-->
function procesFiles(files) {

var file = files[0];
var reader = new FileReader();

reader.onload = function(e) {
    var output = document.getElementById("fileOutput");
    output.textContent = e.target.result;
};


reader.readAsText(file);
}


<!-- File input-->
function showFileInput() {
var fileInput = document.getElementById("fileInput");
fileInput.click();
}

<!-- Drop box -->
var dropBox;

window.onload = function() {
dropBox = document.getElementById("dropBox");
dropBox.ondragenter = ignoreDrag;
dropBox.ondragover = ignoreDrag;
dropBox.ondrop = drop;
}

function ignoreDrag(e) {
e.stopPropagation;
e.preventDefault;
}

function drop(e) {
e.stopPropagation;
e.preventDefault;

var data = e.dataTransfer.files;
var files = data.files;

procesFiles(files);

}
</script>

</head>
<body>

 <div id="dropBox">
<div>Drop your file here...</div>
</div>

<input id="fileInput" type="file" onchange="procesFiles(this.files)"/>
<button onclick="showFileInput()">Get new file!</button>

<div id="fileOutput" style="width:500px; height:300px;">
</div>


</body>
</html>

还有我的css文件：

#fileInput {
display: none;
}

#dropBox {
margin: 15px;
width: 300px;
height: 300px;
border: 5px dashed gray;
border-radius: 8px;
background: lightyellow;
background-size: 100%;
background-repeat: no-repeat;
text-align: center;
}

#dropBox div {
margin: 100px 70px;
color: orange;
font-size: 25px;
font-family: Verdana, Arial, sans-serif;
}

你有什么想法，可能出现什么问题？

- Edit-- 我还有一个questin - 如何阻止openig的droping文件？

Answer 1

e.stopPropagation;   
e.preventDefault;

这些应该是函数：

e.stopPropagation();
e.preventDefault();

HTML5拖放忽略删除并打开文件

1 个答案: