我正在使用django开发一个小项目，我想实现拖放上传文件。我已经从选择文件中实现了基本文件上传，它运行正常。请帮我
我尝试下面的代码进行简单的文件上传，但我需要拖放，我不知道如何实现相同。
{% block content %}
<div method="post" enctype="multipart/form-data">
{% csrf_token %}
<input type="file" name="myfile"><br><br>
<input type="submit" value="upload">
{% endblock %}
Views.py
def simple_upload(request):
if request.method == 'POST' and request.FILES['myfile']:
myfile = request.FILES['myfile']
fs = FileSystemStorage(location="test/uploadedmedia")
filename = fs.save(myfile.name, myfile)
uploaded_file_url = fs.url(filename)
return render(request, 'upload.html', {'uploaded_file_url': uploaded_file_url,"fileupload":"File uploaded successfully"})
return render(request, 'upload.html')
我需要拖动文件并上传。
<html>
<head>
<meta charset="utf-8">
<title>Drag @drop</title>
<style>
.dropzone{
width:300px;
height:300px;
border:2px dashed #ccc;
color:#ccc;
line-height:300px;
text-align:center;
}
.dropzone.dragover{
border-color:#000;
color:#000;
}
</style>
</head>
<body>
<div id="upload"></div>
<div class="dropzone" id="dropzone">Drop files here</div>
<script>
(function(){
var dropzone=document.getElementById('dropzone');
dropzone.ondrop=function(e){
e.preventDefault();
this.className='dropzone';
x=e.dataTransfer.files
console.log(x)
};
dropzone.ondragover=function(){
this.className='dropzone dragover';
return false;
};
dropzone.ondragleave=function(){
this.className='dropzone';
return false;
};
}());
</script>
</body>
</html>
{% load static %}
{% block content %}
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
<input type="file" name="myfile" >
<button type="submit" id="butto">Upload</button>
</form>
{% if uploaded_file_url %}
<p>File uploaded at: <a href="{{ uploaded_file_url }}">{{ uploaded_file_url }}</a></p>
{% endif %}
{% endblock %}
我找到了解决方案 -
在您的放置区域中，只需添加以下代码 -
var dropzone=document.getElementById('dropzone');
dropzone.ondrop=function(e){
fileinput.files=e.dataTransfer.files
e.preventDefault();