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

Question

前端是一个带图片上是图片上传的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部分，主要是图片上传那个，写了好久，各种错误。。。心累。。怎么搞啊。。。谢谢

 

Answer 1

<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 来传递参数，希望对你能有帮助