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

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

首先是前台js

name="takeshow" method="post" οnsubmit="return validate(this)" action="/uid/takeshow" enctype="multipart/form-data">
   	
        
class="form-group">

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

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

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

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

enctype="multipart/form-data"

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

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

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

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

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

的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)

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

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