html - Django - 我需要实现拖放来上传文件
问题描述
我正在使用 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();
推荐阅读
- angular - ControlValueAccessor 知道何时需要在反应形式上设置
- angular - 未通过其他组件的值输入/预填充表单输入时无法自动完成
- python - 在熊猫中从天真的本地夏令时转换为天真的本地标准时间
- node.js - axios 获取请求返回我尝试服务的所有静态 html 文件的 vue index.html 文件
- c# - 实体框架:检索不在日期范围内的行
- wpf - 从 WCF 服务运行交换命令时出错
- typescript - 如何“居中” FirstPersonControls?
- dc.js - 如何使用 Javascript eventlistener 来调用绘制 dc.js 图表/图形等的函数?
- android - Ionic 3 Android Failed Build Manifest 合并失败
- javascript - 从模块返回数据以在反应页面中呈现