前端是一个带图片上是图片上传的form,想用AJAX上传到后台保存
<form action="{% url '**'%}" method="POST" enctype="multipart/form-data">
<div class="form-group">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-2 " >
<label >Mate40Pro</label>
<select id='is_show' class="form-control" name="is_show">
<option value="showed">已上样</option>
<option value="noshowd">未上样</option>
</select>
</div>
<div class="col-sm-12 col-md-2 " >
<label >上样照片</label><input name='phone_pic' type="file">
</div>
</div>
</div>
<input type='submit' value='提交'>
</form>
django model部分就两个字段
phone_pic=models.filefeild(uploadto='pic')
is_show=models.charfield(max_lenght=40)
ajax 和后台Views部分,主要是图片上传那个,写了好久,各种错误。。。心累。。怎么搞啊。。。谢谢
<form action="{% url '**'%}" method="POST" enctype="multipart/form-data">
<div class="form-group">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-2 " >
<label >Mate40Pro</label>
<select id='is_show' class="form-control" name="is_show">
<option value="showed">已上样</option>
<option value="noshowd">未上样</option>
</select>
</div>
<div class="col-sm-12 col-md-2 " >
<label >上样照片</label><input name='phone_pic' type="file" id="file">
</div>
</div>
</div>
<input type='submit' value='提交' id="submit">
</form>
<script>
window.onLoad = function() {
var Asubmit = document.getElementById('submit')
var fileList = document.getElementById('file')[0].files
Asubmit.onclick = function() {
var formData = new FormData();
for (var i = 0; i< fileList.length; i++) {
formData.append('files', fileList[i])
}
formData.append('其他参数',val)
// 下面写ajax
ajax里面的data 传formData
}
}
</script>
总得来说就是通过formData 来传递参数,希望对你能有帮助
django+ajax上传图片,预览并存储到数据库
https://blog.csdn.net/sinat_18866031/article/details/94717764
Django之利用ajax实现上传图片后台返回预览
https://blog.csdn.net/weixin_33875839/article/details/93409142
还是以上个为举例
后端就是一个接口,你自己应该也写好了。看下我注释应该可以明白。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").bind('click',function(){
var dealer_shop_outdoor=$("#dealer_shop_outdoor")[0].files[0];
var formdata = new FormData();
formdata.append('pic',dealer_shop_outdoor);//在后台用pic为参数名,来接收文件
$.ajax({
async: false,
type: 'POST',
url: "/picurl",//这是你后台接收图片的url
dataType: 'json',
data: formdata,
contentType:false,//ajax上传图片需要添加
processData:false,//ajax上传图片需要添加
success: function (data) {
alert('suc');
},
error: function (e) {
alert("error");
}
});
});
});
</script>
</head>
<body>
<input id='dealer_shop_outdoor' name='dealer_shop_outdoor' type="file">
<button id="button" type="submit" >提交</button>
</body>
</html>