ajax 上传带图片input的form表单 ,django 保存

前端是一个带图片上是图片上传的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>