前端代码：
?<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中上传文件的三种方式
原文地址：https://www.cnblogs.com/magictor/p/9098117.html