django + jquery-file-upload 插件實現文件上傳
1.model.py
class Fujian(models.Model):
name = models.CharField(max_length=32,verbose_name="附件名稱")
file = models.FileField(upload_to="upload/%Y/%m/%d/")
uploaded_at = models.DateTimeField(auto_now_add=True)
def __str__(self):
return self.name
2.forms.py
class FujianForm(forms.ModelForm):
class Meta:
model = Fujian
fields = ('file',)
3.views.py
def fujian_add(request):
if request.method == 'POST':
form = FujianForm(request.POST,request.FILES)
if form.is_valid():
fujian = form.save()
data = {'is_valid':True,'name':fujian.file.name,'url':fujian.file.url}
else:
data = {'is_valid':False}
return JsonResponse(data)
if request.method == 'GET':
return render(request,"fujian_add.html")
4.fujian_add.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>附件上傳</title>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/jquery-ui.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.js"></script>
<script src="/static/jquery-file-upload/vendor/jquery.ui.widget.js"></script>
<script src="/static/jquery-file-upload/jquery.iframe-transport.js"></script>
<script src="/static/jquery-file-upload/jquery.fileupload.js"></script>
<script src="/static/js/base.js"></script>
</head>
<body>
<div class="container">
<h1>圖片上傳</h1>
<form method="post" action=""> {% csrf_token %} <input type="hidden" name="next" value="{{ request.path }}">
<button type="submit" class="btn btn-danger pull-right">
<span class="glyphicon glyphicon-trash"></span> 清空數據 </button>
</form>
<div>
<div style="margin-bottom: 20px;"> {# 1. 添加附件的按鈕 #} <button type="button" class="btn btn-primary js-upload-photos">
<span class="glyphicon glyphicon-cloud-upload"></span> 上傳附件 </button> {# 2. 上傳圖片的插件 #} <input id="fileupload" type="file" name="file" multiple style="display: none;" data-url="/fujian/add/" data-form-data='{"csrfmiddlewaretoken": "{{ csrf_token }}"}'>
</div> {# 3. 顯示上傳的文件 #} <table id="gallery" class="table table-bordered">
<thead>
<tr>
<th>Photo</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</body>
</html>
頁面效果：
5.需要引入jquery-file-upload的js文件
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/jquery-ui.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.js"></script>
<script src="/static/jquery-file-upload/vendor/jquery.ui.widget.js"></script>
<script src="/static/jquery-file-upload/jquery.iframe-transport.js"></script>
<script src="/static/jquery-file-upload/jquery.fileupload.js"></script>
<script src="/static/js/base.js"></script>
6.urls.py文件
from app01 import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^fujian/add/$', views.fujian_add),
]
7.base.js文件
$(function () {
/* 1. OPEN THE FILE EXPLORER WINDOW */
$(".js-upload-photos").click(function () {
$("#fileupload").click();
});
/* 2. INITIALIZE THE FILE UPLOAD COMPONENT */
$("#fileupload").fileupload({ //fileupload
dataType: 'json',
done: function (e, data) { /* 3. PROCESS THE RESPONSE FROM THE SERVER 這里的data來自於JsonResponse傳來的data*/
if (data.result.is_valid) {
$("#gallery tbody").prepend(
"<tr><td><a href='" + data.result.url + "'>" + data.result.name + "</a></td></tr>"
)
}
}
});
});
補充：
django 的 FileField字段upload參數控制上傳的文件存放位置：
1.django在upload_to上內置了strftime（）函數，將upload_to設置成 upload_to="upload/%Y/%m/%d",上傳的文件將存放為 upload/2019/05/08/test.png
2.將upload_to 設置成 upload_to = "upload/",上傳的文件將存放為 upload/test.png
3.更加高級的設置，django還允許你重寫一個upload_to函數，重定義上傳文件的路徑前綴：
#讓上傳的文件路徑動態地與user的名字有關
def upload_to(instance, fielname): return '/'.join([MEDIA_ROOT, instance.user_name, filename]) class User(models.Model): avatar = ImageField(upload_to = upload_to) user_name = CharField(max_length = 250)