文件上傳
原生AJAX對象, 上傳文件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <input type="file" id="uploadfile" name="uploadfile"> 9 <input type="button" id="uploadbtn" name="uploadbtn" value="上傳" onclick="xhrsumit();"> 10 11 <script> 12 13 function xhrsumit(){ 14 // 得到上傳文件的對象: files:能夠上傳多個文件, 這裏得到第一個要上傳的文件files[0] 15 var obj_file = document.getElementById("uploadfile").files[0]; 16 17 //得到form對象: 原生AJAX對象上傳文件, 依賴form對象 18 var fd = new FormData(); //至關於一個form表單 19 fd.append("key1", "value1"); 20 fd.append("username", "root"); 21 fd.append("password", "123"); 22 fd.append("fileobj", obj_file); 23 24 25 // 得到XMLHttpRequest對象 26 var xhr = new XMLHttpRequest(); 27 xhr.open("POST", "/ajax/upload_file/", true); 28 xhr.onreadystatechange = function (ev) { 29 if (xhr.readyState = 4){ 30 var obj = JSON.parse(xhr.responseText); 31 console.log(obj); 32 } 33 } 34 35 //發送表單對象 36 xhr.send(fd); 37 } 38 </script> 39 </body> 40 </html>
1 def upload_file(request): 2 ret = {"status": True, "data": None, "error": None} 3 4 value1 = request.POST.get("key1") 5 username = request.POST.get("username") 6 password = request.POST.get("password") 7 fileobj = request.FILES.get("fileobj") # 注意: 這裏從FILES中得到文件 8 9 print(value1, username, password) 10 print(fileobj) 11 12 # 接受文件 13 with open(fileobj.name, "wb") as f_handler: 14 for data in fileobj.chunks(): # chunks()方法是一個發生器 15 f_handler.write(data) 16 17 import json 18 ret["data"] = "上傳文件成功!!!" 19 return HttpResponse(json.dumps(ret))
jquery實現文件上傳
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <input type="file" id="uploadfile" name="uploadfile"> 9 <input type="button" id="uploadbtn" name="uploadbtn" value="上傳" onclick="xhrsumit();"> 10 <input type="button" id="jquploadbtn" name="jauploadbtn" value="jQuery上傳" onclick="jqsumit();"> 11 12 <script src="/static/jquery-2.1.4.min.js"></script> 13 <script> 14 15 function xhrsumit(){ 16 // 得到上傳文件的對象: files:能夠上傳多個文件, 這裏得到第一個要上傳的文件files[0] 17 var obj_file = document.getElementById("uploadfile").files[0]; 18 19 //得到form對象: 原生AJAX對象上傳文件, 依賴form對象 20 var fd = new FormData(); //至關於一個form表單 21 fd.append("key1", "value1"); 22 fd.append("username", "root"); 23 fd.append("password", "123"); 24 fd.append("fileobj", obj_file); 25 26 27 // 得到XMLHttpRequest對象 28 var xhr = new XMLHttpRequest(); 29 xhr.open("POST", "/ajax/upload_file/", true); 30 xhr.onreadystatechange = function (ev) { 31 if (xhr.readyState = 4){ 32 var obj = JSON.parse(xhr.responseText); 33 console.log(obj); 34 } 35 } 36 37 //發送表單對象 38 xhr.send(fd); 39 } 40 41 function jqsumit() { 42 43 // 得到上傳文件的對象, files表示能夠上傳多個文件, files[0]表示得到第一個上傳的文件 44 var obj_file = document.getElementById("uploadfile").files[0]; 45 46 // jQuery上傳文件, 依賴於form對象, 47 var fd = new FormData(); 48 fd.append("fileobj", obj_file); 49 50 // jquery ajax uploadfile 51 $.ajax({ 52 url:"/ajax/upload_file/", 53 type:"POST", 54 data:fd, 55 processData:false, //告訴jquery 不要拼接data數據, 默認jQuery會拼接數據成:"usernme=root;passw=123" 56 //告訴jquery不要設置contentType 57 contentType:false, //jQuery默認設置xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset-UTF-8"); 58 success:function (arg, a1, a2) { 59 console.log(arguments) //能夠經過打印 arguments 來判斷函數有什麼樣的參數 60 } 61 }); 62 } 63 </script> 64 </body> 65 </html>
原生ajax和jQuery實現的ajax文件上傳, 都依賴於new FormData()對象html
帶圖像預覽的完整代碼jquery
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <input type="file" id="uploadfile" name="uploadfile"> 9 <input type="button" id="uploadbtn" name="uploadbtn" value="上傳" onclick="xhrsumit();"> 10 <input type="button" id="jquploadbtn" name="jauploadbtn" value="jQuery上傳" onclick="jqsumit();"> 11 12 <div id="preview"></div> 13 14 <script src="/static/jquery-2.1.4.min.js"></script> 15 <script> 16 17 function xhrsumit(){ 18 // 得到上傳文件的對象: files:能夠上傳多個文件, 這裏得到第一個要上傳的文件files[0] 19 var obj_file = document.getElementById("uploadfile").files[0]; 20 21 //得到form對象: 原生AJAX對象上傳文件, 依賴form對象 22 var fd = new FormData(); //至關於一個form表單 23 fd.append("key1", "value1"); 24 fd.append("username", "root"); 25 fd.append("password", "123"); 26 fd.append("fileobj", obj_file); 27 28 29 // 得到XMLHttpRequest對象 30 var xhr = new XMLHttpRequest(); 31 xhr.open("POST", "/ajax/upload_file/", true); 32 xhr.onreadystatechange = function (ev) { 33 if (xhr.readyState = 4){ 34 var obj = JSON.parse(xhr.responseText); 35 console.log(obj); 36 } 37 } 38 39 //發送表單對象 40 xhr.send(fd); 41 } 42 43 function jqsumit() { 44 45 // 得到上傳文件的對象, files表示能夠上傳多個文件, files[0]表示得到第一個上傳的文件 46 var obj_file = document.getElementById("uploadfile").files[0]; 47 48 // jQuery上傳文件, 依賴於form對象, 49 var fd = new FormData(); 50 fd.append("fileobj", obj_file); 51 52 // jquery ajax uploadfile 53 $.ajax({ 54 url:"/ajax/upload_file/", 55 type:"POST", 56 data:fd, 57 processData:false, //告訴jquery 不要拼接data數據, 默認jQuery會拼接數據成:"usernme=root;passw=123" 58 //告訴jquery不要設置contentType 59 contentType:false, //jQuery默認設置xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset-UTF-8"); 60 success:function (arg, a1, a2) { 61 console.log(arguments) //能夠經過打印 arguments 來判斷函數有什麼樣的參數 62 63 // 先清除div標籤中的img標籤 64 $('#preview').empty(); 65 66 // 給id爲preview的div添加img標籤 67 var imgtag = document.createElement("img"); 68 obj = JSON.parse(arg); 69 imgtag.src = "/" + obj['data']; //注意: 這裏要在路徑前添加"/" 70 $('#preview').append(imgtag); 71 } 72 }); 73 } 74 </script> 75 </body> 76 </html>
1 def upload_file_new(request): 2 ret = {"status": True, "data": None, "error": None} 3 4 fileobj = request.FILES.get("fileobj") 5 print(fileobj) 6 7 import os 8 # 設置上傳文件的路徑 9 filepath = os.path.join("static/imgs/", fileobj.name) # 這裏必須是 "static/imgs/" ,不能是 "/static/imgs/" 10 11 with open(filepath, "wb") as f_handler: 12 for data in fileobj.chunks(): 13 f_handler.write(data) 14 15 import json 16 ret["data"] = filepath 17 return HttpResponse(json.dumps(ret))
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
