UPload 上传图片

HTML源代码：

 <li>
                                <a id="upload_image_name" src="javascript:;"><input type="button" value="上传封面图片"></a>
                            <ul id="image_name_list"></ul>
							 {# 隐藏的图片提交路由#}
                                <input type="hidden" name="article_img" value="">
 </li>

JS代码：

<script type="text/javascript" src="/static/plupload/moxie.js"></script>
<script type="text/javascript" src="/static/plupload/plupload.min.js"></script>
<script>
var msgLayero_upload_image_name;
        var index_upload_image_name;
        var layer_upload_image_name = 1;
        //实例化一个plupload上传对象
        var uploader_upload_image_name = new plupload.Uploader({
            browse_button: 'upload_image_name', //触发文件选择对话框的按钮，为那个元素id
            url: '/blog/index/upload2/', //服务器端的上传页面地址
            flash_swf_url: '/static/plupload/Moxie.swf', //swf文件，当需要使用swf方式进行上传时需要配置该参数
            silverlight_xap_url: '/static/plupload/Moxie.xap', //silverlight文件，当需要使用silverlight方式进行上传时需要配置该参数
            multipart_params: {
                type: 'image_name',
                csrfmiddlewaretoken: "{{ csrf_token }}"
            },
            resize: {
                width: 800//指定压缩后图片的宽度，如果没有设置该属性则默认为原始图片的宽度
                //height: , //指定压缩后图片的高度，如果没有设置该属性则默认为原始图片的高度
                //crop: false //是否裁剪图片
            },
            {#控制上传图片的大小#}
            filters: {
                max_file_size: '4mb'
            },
            init: {
                //选择文件
                FilesAdded: function (up, files) {
                    //加载层
                    index_upload_image_name = layer.msg('上传中...', {
                        icon: 16, time: 0,
                        shade: 0.01,
                        success: function (layero, index) {
                            msgLayero_upload_image_name = layero;//是加载层的div
                        }
                    });
                    //layer_upload_image_name = layer.msg('上传中...', {time: 0}); //不自动关闭
                    uploader_upload_image_name.start();
                },
                UploadProgress: function (up, file) { //上传中，显示进度条
                    var percent = file.percent;
                    msgLayero_upload_image_name.find('.layui-layer-content').html('<i class="layui-layer-ico layui-layer-ico1"></i>上传中...' + percent + '%');

                },//单个文件上传完成
                FileUploaded: function (up, file, responseObject) {
                    console.log("aaaaa");
                    console.log($.parseJSON(responseObject.response));//成功回调函数

{#                    $('#image_name_list').html('');#}
                    var result = $.parseJSON(responseObject.response);
                    if (result.status == 1) {
                        $("input[name='article_img']").val(result.file);
                        //上传成功
                        console.log(result.file);
                        var htmls = '<li class="img_upload" style="position:relative;margin:0 10px -10px 0;">';
                        htmls += '<input  type="hidden" name="image_name[]" value="' + result.file + '">'; //隐藏域，是为了把图片地址入库。。
                        htmls += '   <img src="' + result.file + '" width="250"  >';
                        htmls += '<span  style="position:absolute;top:-8px;right:-6px;background-color:#fff;border-radius:10px;"><a href=javascript:; class="delImg" data-val="'+result.file+'">&nbsp;<img src="/static/back/images/del.png" width="15" /></a></span>';
                        htmls += '</li>';

                        $('#image_name_list').append(htmls);
                        //上传成功的弹出框
                        msgLayero_upload_image_name.find('.layui-layer-content').html('<i class="layui-layer-ico layui-layer-ico1"></i>' + result.message);

                    } else {
                        //上传失败的弹出框
                        msgLayero_upload_image_name.find('.layui-layer-content').html('<i class="layui-layer-ico layui-layer-ico2"></i>' + result.message);

                    }
                    setTimeout(function () {
                        layer.close(index_upload_image_name);
                    }, 2000);

                },
                //全部文件上传完成
                UploadComplete: function (up, files) {
                    setTimeout(function () {
                        layer.close(index_upload_image_name);
                    }, 2000);
                },
                //返回错误
                Error: function (up, err) {
                    msgLayero_upload_image_name.find('.layui-layer-content').html('<i class="layui-layer-ico layui-layer-ico2"></i>' + result.message);
                    setTimeout(function () {
                        layer.close(index_upload_image_name);
                    }, 2000);
                }
            }
        });

        uploader_upload_image_name.init();

$(function(){  
    //验证文件是否导入成功
    $("#form1").ajaxForm(function(data){    
        if(data=="1"){  
            alert("提交成功！");     
        }  
    });       
});  

</script>

控制器代码：upload.py

#pupload上传图片
from blog.utils import function
import os.path
def upload2(request):
    print("asdfasdfasdfaqwe")
    img_obj=request.FILES.get("file")#通过前台提交过来的图片资源   img_obj.name  avatar.jpg
    range_num=function.suijishu(15)#生成一个15位随机数
    print(range_num)
    # print(img_obj.name)
    img_type=os.path.splitext(img_obj.name)[1]#.jpg  获取文件名后缀
    new_img_path=os.path.join(settings.MEDIA_ROOT,"add_article_img",range_num+img_type)#E:\ftp\code\www\pro\media\add_article_img\676161546271228.jpg        #/media/add_article_img/123456.jpg
    img_type2 = img_type.replace(".", "")  #png
    # print(new_img_path)
    with open(new_img_path,"wb") as f:
        for line in img_obj:
            f.write(line)
    response={
        "status":1,
        "message":"上传成功",
        'file':"/media/add_article_img/"+range_num+img_type,
        'file_type':img_type2
    }
    return HttpResponse(json.dumps(response))