django中上傳文件的三種方式
阿新 • • 發佈：2018-05-28
script targe 返回值 query inpu 文件的 code multipart false
前端代碼：
<style> .upload{ display: inline-block;padding: 10px; background-color: brown; position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: 90; } .file{ width: 100px;height: 50px;opacity: 0; position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: 100; } </style> <body>
<!--前端上傳文件的代碼 --> <div style="position: relative;width: 100px;height: 50px;"> <input class="file" type="file" id="fafafa" name="afafaf" /> <a class="upload">上傳</a> </div>
<!--前端通過XHR提交文件 --> <input type="button" value="提交XHR" onclick="xhrSubmit();" />
<!--前端通過jQuery提交文件--> <input type="button" value="提交jQuery" onclick="jqSubmit();" /> <hr/> <!--前端通過iframe提交文件--> <form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1"> <iframe id="ifm1" name="ifm1" style="display: none;"></iframe> <input type="file" name="fafafa" onchange="changeUpalod();" /> {# <input type="submit" onclick="iframeSubmit();" value="Form提交"/>#} </form> <div id="preview"></div> <script src="/static/jquery-1.12.4.js"></script> <script>
//選中自動提交 function changeUpalod(){ $(‘#ifm1‘).load(function(){ var text = $(‘#ifm1‘).contents().find(‘body‘).text(); var obj = JSON.parse(text); $(‘#preview‘).empty(); var imgTag = document.createElement(‘img‘); imgTag.src = "/" + obj.data; $(‘#preview‘).append(imgTag); }); $(‘#form1‘).submit(); } //前端通過jQuery提交文件 function jqSubmit(){ // $(‘#fafafa‘)[0] var file_obj = document.getElementById(‘fafafa‘).files[0]; var fd = new FormData(); fd.append(‘username‘,‘root‘); fd.append(‘fafafa‘,file_obj); $.ajax({ url: ‘/upload_file/‘, type: ‘POST‘, data: fd, processData: false, // tell jQuery not to process the data contentType: false, // tell jQuery not to set contentType success:function(arg,a1,a2){ console.log(arg); console.log(a1); console.log(a2); } }) } //前端通過XHR提交文件 function xhrSubmit(){ // $(‘#fafafa‘)[0] var file_obj = document.getElementById(‘fafafa‘).files[0]; var fd = new FormData(); fd.append(‘username‘,‘root‘); fd.append(‘fafafa‘,file_obj); var xhr = new XMLHttpRequest(); xhr.open(‘POST‘, ‘/upload_file/‘,true); xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ // 接收完畢 var obj = JSON.parse(xhr.responseText); console.log(obj); } }; xhr.send(fd); } function iframeSubmit(){ $(‘#ifm1‘).load(function(){ var text = $(‘#ifm1‘).contents().find(‘body‘).text(); var obj = JSON.parse(text); $(‘#preview‘).empty(); var imgTag = document.createElement(‘img‘); imgTag.src = "/" + obj.data; $(‘#preview‘).append(imgTag); }) } </script> </body>
後端接收文件，並返回值<views>接收
def upload_file(request): username = request.POST.get(‘username‘) fafafa = request.FILES.get(‘fafafa‘) import os img_path = os.path.join(‘static/imgs/‘,fafafa.name) with open(img_path,‘wb‘) as f: for item in fafafa.chunks(): f.write(item) ret = {‘code‘: True , ‘data‘: img_path} import json return HttpResponse(json.dumps(ret))
django中上傳文件的三種方式