淺析Django 接收所有檔案,前端展示檔案（包括視訊，檔案，圖片）ajax請求
阿新 • • 發佈：2020-03-09
如果是後臺上傳檔案:
setting配置：
STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR,'static'),os.path.join(BASE_DIR,"media"),] # Django使用者上傳的都叫media檔案 MEDIA_URL = "/media/" # media配置，使用者上傳的檔案都預設放在這個資料夾下 MEDIA_ROOT = os.path.join(BASE_DIR,"media") model的配置： img = models.FileField(upload_to="img/",verbose_name="圖片")
接收任何檔案的前端程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form method="post" action="/upload/" enctype="multipart/form-data" target="ifm1">
<input type="file" name="file" id="file"/>
<input type="button" value="提交" onclick="upload()"/>
</form>
<br>
<br>
<br>
<br>
<div>顯示圖片
<img id="images">
</div>
<br>
<br>
<br>
<br>
<div>顯示路徑
<a href="" id=" rel="external nofollow" imagess">連結</a>
</div>
</div>
<br>
<br>
<br>
<br>
<div>
{# href="/static/img/TC程式碼.txt" rel="external nofollow" #}
<a id="up"> 下載檔案</a>
</div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
function upload() {
var formData = new FormData();
var file = document.getElementById('file').files[0];
formData.append("file",file);
$.ajax({
url: "upload/",type: "post",data: formData,dataType: "json",cache: false,//上傳檔案無需快取
processData: false,//用於對data引數進行序列化處理 這裡必須false
contentType: false,//必須*/
success: function (data) {
console.log("22",data);
$("#images").attr("src",data.image)
$("#imagess").attr("href",data.image)
}
});
}
$("#up").on("click",function () {
$.ajax({
url: "http://127.0.0.1:8000/down/",type: "get",data: {},success: function (data) {
var $a = $('<a></a>');
$a.attr("href","http://127.0.0.1:8000/down/");
$("body").append($a);
$a[0].click();
$a.remove();
}
})
});
</script>
</body>
</html>增加任何檔案的後端介面程式碼：
from rest_framework.views import APIView
from django.shortcuts import render,redirect,HttpResponse
from dal import models
from django.http import JsonResponse
class ImageShow(APIView):
def post(self,request):
name = str(request.data.get("name"))
message = {}
img_url = "/static/img/{}".format(name)
obj = models.Car.objects.filter(img_url=img_url).first()
if obj :
message['code'] = 200
message['message'] = img_url # 返還路徑
return JsonResponse(message)下載檔案後端：
from django.utils.http import urlquote
from rest_framework.views import APIView
from django.shortcuts import render,HttpResponse
from dal import models
from django.http import JsonResponse,FileResponse,StreamingHttpResponse
class fileShow(APIView):
def get(self,request):
message = {}
file = open('media/img/TC程式碼.txt','rb') # 字串替換成檔案
print("file",file.name)
# file_names = file.name.split('/')[-1]
# print("file_names",file_names)
response = FileResponse(file)
response['Content-Type'] = 'application/octet-stream'
response['Content-Disposition'] = "attachment;filename={}".format(urlquote("TC程式碼.txt")) # 字串替換成下載檔案
print(response)
return response
總結
到此這篇關於Django 接收所有檔案 前端展示檔案（包括視訊，檔案，圖片）ajax請求的文章就介紹到這了,更多相關django 接收所有檔案內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！