html+jquery 实现拖拽/点击上传文件
以下是一个使用HTML和jQuery实现的简单拖拽上传文件的示例：
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag and Drop File Upload</title>
<style>
#drop_area {
width: 300px;
height: 200px;
border: 2px dashed #aaa;
margin-bottom: 20px;
text-align: center;
line-height: 200px;
font-size: 20px;
}
</style>
</head>
<body>
<div id="drop_area">将文件拖拽到此处上传</div>
<form id="upload_form" method="post" enctype="multipart/form-data">
<input type="file" id="file_input" multiple style="display: none;">
</form>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$('#drop_area').on('click', function(){
$('#file_input').click(); // Trigger file input click when clicking on drop area
});
$('#file_input').on('change', function(){
var files = $(this).prop('files');
if (files.length > 0) {
// 这里可以添加上传文件的逻辑
console.log("文件已选择，可以上传");
// 例如使用AJAX上传文件
// $.ajax({
// url: 'your_upload_script_endpoint.php',
// type: 'POST',
// data: new FormData($('#upload_form')[0]),
// processData: false,
// contentType: false,
// success: function(response) {
// console.log(response);
// }
// });
}
});
});
</script>
</body>
</html>这段代码实现了一个可以通过点击或拖拽文件到指定区域来上传文件的功能。当用户点击drop_area时，隐藏的file_input元素会被触发，允许用户选择文件。选择文件后，会通过FormData对象和AJAX上传到服务器。这里没有实现服务器端的上传处理逻辑，需要根据实际情况配置your_upload_script_endpoint.php。
评论已关闭