文件上传：
第一种方式：
python:
def upload_file(request): ???if request.method == "GET": ???????return render(request,"upload_file.html") ???user = request.POST.get("user") ???avatar = request.FILES.get("customer_excel") # 获取文件对象 ???with open(avatar.name,"wb") as f: ???????for line in avatar.chunks(): ?# chunks()：分块，写不写都一样。 ???????????f.write(line) ???return HttpResponse("上传成功")html:
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body><form action="" method="post" enctype="multipart/form-data"> ???{% csrf_token %} ???<div style="position: relative;display: inline-block;height: 50px;min-width: 300px;overflow: hidden;"> ???????<div style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 1000;border: 1px dotted #9d9d9d;color: #9d9d9d;line-height: 50px;padding-left: 15px;"> ???????????<i class="fa fa-cloud-upload" aria-hidden="true"></i> ???????????<span>点击上传文件</span> ???????</div> ???????<input name="customer_excel" type="file" id="excelFile" ??????????????style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: #333333;z-index: 1001;opacity: 0;filter:alpha(opacity=0);"> ???</div> ???<div> ???????<input type="text" name="user"> ???????<input type="submit" value="提交"> ???</div></form><script src="/static/plugins/jquery.js"></script><script> ???$(function(){ ???????$("#excelFile").change(function (e) { ???????????var fileName = e.currentTarget.files[0].name; ???????????console.log(fileName); ???????????$(this).prev().find("span").text(fileName); ???????}) ???})</script></body></html>2，利用ajax上传图片及预览
python:
def upload_img(request): ???if request.method == "GET": ???????return render(request,"upload_img.html") ???user = request.POST.get("user") ???avatar = request.POST.get("avatar") ???print(user,avatar) ???return HttpResponse("上传成功")import osimport uuiddef form_data_upload(request): ???‘‘‘ ???ajax上传文件 ???:param request: ???:return: ???‘‘‘ ???img_upload = request.FILES.get("img_upload") ???file_name = str(uuid.uuid4())+"."+img_upload.name.rsplit(".",1)[1] ???# 将文件的格式切出来，并利用uuid生成随机字符串再重新组成名字，为了使每个传入的文件名字不相同，避免被覆盖 ???img_file_path = os.path.join("static","img",file_name) ?# 拼出一个路径 ???with open(img_file_path,"wb") as f: ???????for line in img_upload.chunks(): ???????????f.write(line) ???print(img_file_path) ???return HttpResponse(img_file_path)html:
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body><div style="height: 100px;width: 100px;padding: 2px;border: 1px solid #dddddd;position: relative;"> ???<img style="height: 100%;width: 100%;border: 0;overflow: hidden;border-radius: 50%;" ????????id="previewImg" ????????src="/static/img/default.png"> ???<input style="top: 0;left: 0;right: 0;bottom: 0;opacity: 0;position: absolute;z-index: 102;" id="avatarImg" ??????????name="avatar_img" type="file" class="img-file"/></div><div>点击图片更换(<a href="#">撤销</a>)</div><form method="post" enctype="multipart/form-data"> ???{% csrf_token %} ???<div> ???????<input type="text" name="avatar" id="avatar"> ???????<input type="text" name="user"> ???????<input type="submit" value="提交"> ???</div></form><script src="/static/plugins/jquery.js"></script><script> ???$(function () { ???????bindChangeAvatar3(); ???}); ???function bindChangeAvatar3() { ???????$("#avatarImg").change(function () { ???????????var file_obj = $(this)[0].files[0]; ???????????var form = new FormData(); ???????????form.append("img_upload",file_obj); ???????????$.ajax({ ???????????????url:"/form_data_upload/", ???????????????type:"post", ???????????????data:form, ???????????????processData:false, // tell Jquery not to process the data ???????????????contentType:false, // tell Jquery not to set contentType ???????????????success:function (data) { ???????????????????//给 img 标签设置src属性，预览 ???????????????????console.log(data); ???????????????????$("#previewImg").attr("src","/"+data); //预览图片，给图片赋予src地址 ???????????????????$("#avatar").val("/"+data); ?//将图片的地址 ???????????????} ???????????}) ???????}) ???}</script></body></html>3，利用iframe 创建一个伪AJAX上传预览：
python:
import jsondef upload_iframe(request): ???ret = {"status":True,"data":None} ???try: ???????avatar = request.FILES.get("avatar") ???????file_name = str(uuid.uuid4())+ "." + avatar.name.rsplit(".",1)[1] ???????img_file_path = os.path.join("static","img",file_name) ???????with open(img_file_path,"wb") as f: ???????????for line in avatar.chunks(): ???????????????f.write(line) ???????ret["data"] = os.path.join("/",img_file_path) ???except Exception as e: ???????ret["status"] = False ???????ret["error"] = "上传失败" ???return HttpResponse(json.dumps(ret))html:
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body> ????<div style="height: 100px;width: 100px;padding: 2px;border: 1px solid #dddddd;position: relative;"> ???????????<iframe style="display: none;" id="ifr" name="fffff"></iframe> ???????????<form method="POST" action="/upload_iframe/" enctype="multipart/form-data" target="fffff"> ???????????????{% csrf_token %} ???????????????<img style="height: 100px;width: 100px;border: 0;overflow: hidden;border-radius: 50%;" id="prevImg" ????????????????????src="/static/imgs/default.png"> ???????????????<input style="top: 0;left: 0;right: 0;bottom: 0;opacity: 0;position: absolute;z-index: 102;" ??????????????????????id="avatar" ??????????????????????name="avatar" type="file" class="img-file"/> ???????????</form> ???????</div> ????<form method="post" action="/iframe_upload_img/"> ????????{% csrf_token %} ????????<input type="text" name="avatar" id="formAvatar" style="display: none"> ????????<input type="text" name="user" placeholder="请输入用户名"> ????????<input type="text" name="pwd" placeholder="请输入密码"> ????????<input type="submit" value="提交"> ????</form> ???<script src="/static/js/jquery-3.2.1.min.js"></script> ???<script> ???????$(function () { ???????????bindChangeAvatar4(); ???????}); ????????function bindChangeAvatar4() { ???????????$(‘#avatar‘).change(function () { ???????????????$(this).parent().submit(); ???????????????$(‘#ifr‘)[0].onload = function (){ ???????????????????var iframeContents = $(‘#ifr‘)[0].contentWindow.document.body.innerText; ???????????????????iframeContents = JSON.parse(iframeContents); ???????????????????if (iframeContents.status) { ???????????????????????$(‘#prevImg‘).attr(‘src‘, iframeContents.data); ???????????????????????$(‘#formAvatar‘).val(iframeContents.data); ???????????????????} ???????????????} ???????????}) ???????} ???</script></body></html>index.html:
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body> ???<ul> ???????{% for item in user_list %} ???????????<li><img style="height: 50px;width: 50px" src="{{ item.avatar }}"> {{ item.user }}</li> ???????{% endfor %} ???</ul></body></html>文件上传及图片预览
原文地址：https://www.cnblogs.com/stfei/p/9332470.html