原生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()对象
带图像预览的完整代码
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))
9166
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
