需求
实现网站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">×</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图片啦