Django上傳文件和上傳圖片(不刷新頁面)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="/upload.html" method="POST" enctype="multipart/form-data">
        <input type="text" name="file_name">
        <div style="position: relative">
            <a>點擊上傳文件</a>
            <input type="file" name="is_file" style="opacity: 0;position: absolute;top: 0;left: 0;">
        </div>
        <input type=submit name="OK">
    </form>
</body>
</html>

from django.shortcuts import render,HttpResponse # Create your views here.

def upload(request): if request.method == "GET": return render(request,"upload.html") else: #print(request.POST) #<QueryDict: {'file_name': ['12321321'], 'OK': ['提交']}>
        #print(request.FILES) #<MultiValueDict: {'is_file': [<TemporaryUploadedFile: 說明書.pdf (application/pdf)>]}>
 filename = request.POST.get("file_name") isfile = request.FILES.get("is_file") #isfile是對象(內容有文件大小,文件名稱,文件內容等)

        print(isfile.name,isfile.size)   #isfile.name文件名 #isfile.size文件大小,能夠拿這值作限制
 f = open('file/'+isfile.name,'wb') for data in isfile.chunks(): f.write(data) f.close() return HttpResponse("ok")

2 經過ajax上傳文件三種方式:html

view代碼三種方式都用這個代碼ajax

def file(request):
 #print(request.FILES)
 #print(request.POST)
 isfile = request.FILES.get("isfile") # isfile是對象(內容有文件大小,文件名稱,文件內容等)

 print(isfile) # isfile.name文件名 #isfile.size文件大小,能夠拿這值作限制

 f = open('static/' + isfile.name, 'wb')
 for data in isfile.chunks():
 f.write(data)
 f.close()
 return HttpResponse("OK")

　　-jQuery　django

　　　　 html代碼　json

　　<input type="file" id="pufile">
　　<a class="btn" onclick="AjaxSubmitFile()">上傳</a>

jQuery代碼

function AjaxSubmitFile() {
 var data = document.getElementById("pufile").files[0];//加上索引files[0]就是文件的內容,固定寫法
 var f = new FormData();
 f.append('k1','k1'), //k1,k1是添加的一個數據到這個FromData裏面去
 f.append('k3','k3'),
 f.append('isfile',data);
 $.ajax({
 url:"/file/",
 type:"POST",
 data:f,
 success:function (arg) {
 console.log(arg)
 },
 processData: false,//經過FormData處理數據 jQuery上傳文件必需要加這個 tell jQuery not to process the data
 contentType:false,//經過FormData處理數據 jQuery上傳文件必需要加這個 tell jQuery not to set contentType
 //以上表示jQuery data數據內容不須要作處理了,把FormData內容發過去給服務器就能夠了
 })
}

-原生　服務器

function AjaxSubmitFile1() {
 var data = document.getElementById("pufile").files[0];//加上索引files[0]就是文件的內容,固定寫法
 var f = new FormData();
 f.append('k1','k1');
 f.append('k3','k3');
 f.append('isfile',data);
 var xhr = new XMLHttpRequest() ; <!-- #建立一個對象 -->
 xhr.open('POST','/file/'); <!--#與那個url建立鏈接-->
 xhr.onreadystatechange =function (){
 if(xhr.readyState == 4){
 // 4-完成，已經接收到所有響應數據；
 console.log(xhr.responseText);
 };
 }; <!-- #onreadystatechange狀態改變的時候執行function -->
 xhr.send(f); <!-- #開始發送-->
}

默認狀況下,jQuery 和原生以上兩種是不支持上傳文件的,可是能夠利用FormData對象來封裝用戶提交的數據(FormData能夠封裝數據,也能夠封裝文件)app

-ifrname+ Form函數

html代碼 post

<iframe style="display: none" name="fileifrname"></iframe>
<form id="putifrname" action="/file/" method="post" target="fileifrname" enctype="multipart/form-data">
 <input type="text" name="k1">
 <input type="text" name="k2">
 <input type="file" name="isfile">
 <a onclick="putifrname()">上傳</a>
</form>

function putifrname() {
 document.getElementById("putifrname").submit();//點擊putifrname標籤,就開始提交
}

上傳圖片顯示在頁面,而且頁面不自動刷新this

Veiw代碼:url

def file(request):
 print(request.FILES)
 print(request.POST)
 isfile = request.FILES.get("isfile") # isfile是對象(內容有文件大小,文件名稱,文件內容等)

 print(isfile) # isfile.name文件名 #isfile.size文件大小,能夠拿這值作限制

 f = open('static/' + isfile.name, 'wb')
 for data in isfile.chunks():
 f.write(data)
 f.close()

 import os,json
 name = json.dumps(os.path.join("static",isfile.name))
 print(name)
 return HttpResponse(name)

Html代碼:

<h1>Ifrname+Form上傳</h1>
<iframe style="display: none" name="fileifrname" id="fileifrname"></iframe>
<form id="putifrname" action="/file/" method="post" target="fileifrname" enctype="multipart/form-data">
 <input type="text">
 <input type="file" name="isfile" onchange="putifrname()"> <!--//內容改變的時候;自動執行putifrname自動提交-->
</form>

<div id="png"></div>

<script>
 function putifrname() {
 document.getElementById('fileifrname').onload = test; 
 document.getElementById("putifrname").submit(); //提交的時候給上面ifrname標籤加上 onload=test 讓執行完後執行test函數
 }

 function test() {
 var data = this.contentWindow.document.body.innerHTML;
 var obj = JSON.parse(data);
 console.log(obj);
 var tag = document.createElement('img');
 tag.src = "http://127.0.0.1:8000/" + obj;
 $("#png").empty().append(tag)
 }

</script>