django/js 前后台对图片上传的处理

在此为大家阐述一下django前后台对图片上传的处理

首先是前台js

<form name="takeshow" method="post" onsubmit="return validate(this)" action="/uid/takeshow" enctype="multipart/form-data">

<div class="form-group">

<input type="file" name="headfile" id="doc1" onchange="javascript:filecup(1,'doc1', 'previewhead')"/>
<input type="file" name="playfile" id="doc" onchange="javascript:filecup(2,'doc', 'previewplay');"/>

<img src="img/Fhead.png"id="previewhead" style="border: 1px solid #a1aec7;">

<img src="img/Shead.png"id="previewplay" style="border: 1px solid #a1aec7;">

<input type="submit" class="btn btn-success" id="take" value="创建活动">

</div>

</form>

enctype="multipart/form-data"

#这句话是为上传的数据编码，如果你的表单里有图片 则一定要加上

<img src="img/Fhead.png"id="previewplay" style="border: 1px solid #a1aec7;">

在这里的图片标签是，上传图片后显示图片的地方

onchange="javascript:filecup(1,'doc1', 'previewhead')"

在这里当用户点击上传图片的时候调js,

<filecup>的js代码，

<!--图片判定函数-->
function filecup(a, s, p) {
//获取图片信息
var ofile = $("#" + s + "")[0].files[0];

//上传图片格式判定
var rfile = /^(image\/jpeg|image\/png)$/i;
if (!rfile.test(ofile.type)) {
if (a == 1) {
$('.error').html("上传图片格式不符").show();
} else if (a == 2) {
$('.errorp').html("上传图片格式不符").show();
}
return 0;
}
var headimg = document.getElementById(p);
var oReader = new FileReader();
oReader.onload = function (e) {
headimg.src = e.target.result;
headimg.onload = function () {
//上传图片尺寸判定
if (a == 1) {
//顶图图片大小判定
if (headimg.clientWidth != 200 || headimg.clientHeight != 73) {
$('.error').html("图片不符合标准,必须是200*73").show();
$('#take').attr("disabled", "disabled");
return false;
} else {
$('.error').html("").show();
$("#take").removeAttr("disabled");
}
} else if (a == 2) {
//游戏图片大小判定
if (headimg.clientWidth != 200 || headimg.clientHeight != 200) {
$('.errorp').html("图片不符合标准,必须是200*200").show();
$('#take').attr("disabled", "disabled");
return false;
} else {
$('.errorp').html("").show();
$("#take").removeAttr("disabled");
}
}
}
};
oReader.readAsDataURL(ofile);
}

这里使用了FileReader()来获取图片，并进行图片验证

var oReader = new FileReader();

django中当表单提交成功到后台的时候，后台如何对图片进行处理：

在专门处理提交表单的函数中调用：(因为本人的图片是上传到阿里云的oss上，所以是先保存到本地，然后再从本地上传到云)

show = handle_uploaded_file(resquest.FILES, "haiermidoci")

resquest.FILES是获取表单提交的图片列表，

# 处理图片存到本地
def handle_uploaded_file(f, Bucketname):
# 初始化变量
imgname = [];global dic;dic = {};show = ''

# 遍历file获取文件名并重组字典
for k, v in f.iteritems():
imgname.append(k)
dic[k] = v

# 上传图片大于一张执行存储图片
i = len(dic)
imgurl = []
if not i == 0:
while (i):
i -= 1
s = datetime.datetime.now().strftime("%Y%m%d%H%M%S")
urls = 'uid/img/' + s + ''+ imgname[i]+''
# 原文件名拼接日期后返回新文件名
destination = open(urls, 'wb+')
# chunke()函数用于分段读取格式数据
for chunk in dic[imgname[i]].chunks():
destination.write(chunk)
destination.close()
imgurl.append('uid/img/' + s + ''+ imgname[i]+'')
return imgurl
else:
talk = "no img"
return HttpResponse(talk)

后台获取的是编码后的流文件，在写入文件之前必须先确定有这个文件夹

把它写入到你选择的文件夹地址就行了！！！