前端源码：
<!DOCTYPE html>
<html>
<head>
<title>编辑商品分类</title>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="box">
<div class="box-header">
{#路径导航#}
<ol class="breadcrumb">
<li><a href="#">产品管理</a></li>
<li><a href="#">分类列表</a></li>
<li class="active">会员编辑</li>
</ol>
{#路径导航#}
</div>
<div class="box-body">
<div class="col-md-12">
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
<div class="form-group">
<label for="username">商品分类名称</label>
<input type="text" class="form-control" name="name" id="username" value="{{ type.name }}">
</div>
<div class="form-group">
<label for="exampleInputPassword1">原图片</label>
<a href=""
style="width:155px;height:115px;display:block;text-align:center;border:1px solid red;position:relative;background:url({{ type.img.url }}) no-repeat;">
<input type="file" style="position: absolute;width:155px;height:115px;top:0px;left:0px;filter:alpha(opacity=0);
cursor:pointer;overflow: hidden;opacity: 1; " name="upload_media" id="upload_media" multiple="multiple" >
</a>
</div>
<button type="submit" class="btn btn-default">编辑</button>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(function () {
$('.img-thumbnail').click(function () {
console.log('点击了')
$('.upload_media').change(function () {
console.log('deeee')
})
});
$('#upload_media').change(function () {
var $formData=new FormData();
var img_file = $('#upload_media')[0].files[0];
$formData.append("img_file",img_file);
$.ajax({
url: "{% url 'admincms:upload_file' %}",
type: "POST",
data: $formData,
contentType: false,
processData: false,
headers: {"X-CSRFToken": $('[name="csrfmiddlewaretoken"]').val()},
success: function (data) {
//$(".error_msg").text(data)
console.log(data)
},
error:function(data){
console.log(data)
}
})
});
});
</script>
</html>
视图源码:
#上传图片 def upload_file(request): fafafa = request.FILES.get('img_file') print(fafafa) print(fafafa.name) import os img_path = os.path.join('static/media/',fafafa.name) #存储的路径 with open(img_path,'wb') as f: #图片上传 for item in fafafa.chunks(): f.write(item) ret = {'code': True , 'data': img_path} #'data': img_path 数据为图片的路径， import json return HttpResponse(json.dumps(ret)) #将数据的路径发送到前端