python django input实现图片上传

需求

实现网站logo的上传

实现

1、HTML

<div id="logo-setting-dialog" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-dialog">
       <div class="modal-content">
           <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
               <h4 class="modal-title">LOGO设置</h4>
           </div>
           <div class="modal-body">
               <form action="/logo/upload/" class="form-horizontal" enctype="multipart/form-data" method="Post">
                   <div class="form-group">
                       <label class="col-sm-3 control-label">自定义索引</label>
                       <div class="col-sm-9">
                           <select name="logo_setting_name" class="form-control">
                               <option value="1" selected>自定义1</option>
                               <option value="2">自定义2</option>
                           </select>
                       </div>
                   </div>
                   <div class="form-group">
                       <label class="col-sm-3 control-label">横向位置</label>
                       <div class="col-sm-9">
                           <input name="index_x" class="form-control" value="0"/>
                       </div>
                   </div>
                   <div class="form-group">
                       <label class="col-sm-3 control-label">纵向位置</label>
                       <div class="col-sm-9">
                           <input name="index_y" class="form-control" value="0"/>
                       </div>
                   </div>
                   <div class="form-group">
                       <label class="col-sm-3 control-label">LOGO文件上传</label>
                       <div class="col-sm-9">
                           <input name="logo_file" id="logo_file" type="file" class="form-control"/>
                       </div>
                   </div>
               </form>
           </div>
           <div class="modal-footer">
               <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
               <button type="submit" class="btn btn-primary">保存</button>
           </div>
       </div><!-- /.modal-content -->
   </div><!-- /.modal -->
</div>
//主要看这2行
<input name="logo_file" id="logo_file" type="file" class="form-control"/>
<button type="submit" class="btn btn-primary">保存</button>

1、js-jquery

$("#logo-setting-dialog button[type=submit]").click(function () {
    upload_logo()
});

function upload_logo(){
    var formData = new FormData();
    var name = $("#logo_file").val().split('\\');
    var name=name[name.length-1]
    formData.append("file",$("#logo_file")[0].files[0]);
    //formData.append("file",$("#upload")[0].files[0]);
    formData.append("name",name);
    $.ajax({ 
        url : "/logo/upload", 
        type : 'POST', 
        data : formData, 
        // 告诉jQuery不要去处理发送的数据
        processData : false, 
        // 告诉jQuery不要去设置Content-Type请求头
        contentType : false,
        beforeSend:function(){
          console.log("正在进行，请稍候");
        },
        success : function(responseStr) { 
            if(responseStr.status===0){
               alert("上传成功"+responseStr);
            }
        }, 
        error : function(responseStr) { 
             alert("上传失败");
        } 
    });
}

1、py-django

#url路由
#注意最后面没有“/”,如：r'^logo/upload/$',不然会报错
url(r'^logo/upload$',configviews.upload),

#视图函数
@csrf_exempt     #没加这个会报错Forbidden (CSRF cookie not set.): /logo/upload
def upload(request):
    print(1233453)
    if request.method == "POST":
        #file_obj = request.FILES.get('photo')
        handle_upload_file(request.FILES.get('file'), str(request.FILES['file']))
        msg = {}
        msg['msg'] = '上传成功'
        msg['success'] = True
    return HttpResponse(json.dumps(msg))

#保存图片
def handle_upload_file(file, filename):
    path = '/usr/local/share/webui/static/uploads/'  # 绝对路径，不然生成不了
    if not os.path.exists(path):
        os.makedirs(path)
    with open(path + 'logo.png', 'wb')as destination:
        for chunk in file.chunks():
            print(chunk)
            destination.write(chunk)
#最终在/usr/local/share/webui/static/uploads/ 下就有logo.png图片啦