Django文件上傳三種方式以及簡單預覽功能

時間 2020-05-25

原文原文鏈接

主要內容：javascript

1、文件長傳的三種方式html

2、簡單預覽功能實現前端

1、form表單上傳

1.頁面代碼java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="{% url 'upload' %} " method="post" enctype="multipart/form-data"> {% csrf_token %} <input type="file" name="img">
    <input type="submit">
</form>
</body>
</html>

2.後端view函數處理jquery

def upload(request): if request.method=="GET": return  render(request,'upload.html') elif request.method=="POST": res={"status":"success","code":999} img_obj=request.FILES.get('img')#獲取文件對象
        with open(os.path.join('static',img_obj.name),"wb") as f: for chunk in img_obj.chunks(chunk_size=1024): f.write(chunk) return HttpResponse(json.dumps(res))

2、利用Jquery中ajax+FormData實現上傳文件

FormData使用方式：ajax

建立一個空的FormData對象，而後再用append方法逐個增長鍵值對

　　var formdata = new FormData();
　　formdata.append("name","xx");
　　formdata.append("flie", filename);json

取得form元素對象，將它做爲參數傳入FormData對象中。

　　var formOjb = document.getElementById("form");
　　var formdata = new FormData(formOjb );後端

利用form元素對象的getFormData方法生成它

　　var formobj = document.getElementById("form");
　　var formdata = formobj.fetFormData();瀏覽器

1.頁面代碼cookie

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="{% url 'upload' %} " method="post" enctype="multipart/form-data"> {% csrf_token %} <input type="file" name="img">
</form>
<span style="padding: 5px;color: royalblue" onclick="Jqajax();">jq上傳</span>
<script type="text/javascript" src="/static/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/static/jquery.cookie.js"></script>
<script>

    function Jqajax() { var file_obj=$('input[name="img"]')[0].files[0];//獲取dom形式的文件對象
       var form_obj=new FormData(); //建立formdata對象
 form_obj.append('img',file_obj); //將文件對象加載formdata中
 $.ajaxSetup({ //設置csrf_token
 beforeSend: function (xhr, settings) { xhr.setRequestHeader("X-CSRFToken", $.cookie("csrftoken")); } }); $.ajax({ type: 'POST', url: '{% url 'upload' %}', data: form_obj,//指明發送的文件對象
 processData: false, // 告訴jquery要傳輸data對象
 contentType: false, // 告訴jquery不須要增長請求頭對於contentType的設置
 success: function (data) { console.log(data) } }) } </script>
</body>
</html>

後端處理邏輯不變

3、基於iframe實現僞ajax文件上傳

原理：iframe數據提交不刷新頁面

好處：經過iframe的src屬性進行上傳功能，這樣的好處不用依賴FormData對象，低版本瀏覽器可能不支持該對象。

前端頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <form action="{% url 'upload' %}" method="post" target="iframe_1" enctype="multipart/form-data"> {% csrf_token %} <iframe style="display: none" id="iframe_1" name="iframe_1" src=""></iframe>
        <input type="file" name="img" />
        <input type="submit" onclick="iframeSubmmit();" value="iframe上傳"/>
    </form>
<script type="text/javascript" src="/static/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/static/jquery.cookie.js"></script>
<script>
function iframeSubmmit() { $('#iframe_1').load(function () {//用戶獲取上傳成功之後的返回值
    var text=$('#iframe_1').contents().find('body').text(); var obj=JSON.parse(text); console.log(obj) ; }) } </script>
</body>
</html>

後端處理邏輯同樣

4、圖片預覽功能

原理：經過圖片上傳時候服務端返回文件路徑，而後使用js設置a標籤src屬性實現預覽功能

後端代碼：

def upload(request): if request.method=="GET": return  render(request,'upload.html') elif request.method=="POST": img_obj=request.FILES.get('img')#獲取文件對象
        file_path=os.path.join('static',img_obj.name) res={"status":"success","code":999,"file_path":file_path} with open(os.path.join(file_path,"wb") as f: for chunk in img_obj.chunks(chunk_size=1024): f.write(chunk) return HttpResponse(json.dumps(res))