Jquery获取输入框属性file，ajax传输后端，下载图片

Django web开发获取input属性file，可以用request.FILES.get(' ')直接获取到，然后正常拼接路径就可以下载，

但是今天我们来用异步获取file的值在传输后端下载。

 

1.这里我们要注意form表单必须添加enctype="multipart/form-data"这个属性，不然后端会取不到值。

2.此处是form表单的所有能用到ajax传输的属性，就因为多了个file属性所以获取方式特殊我们要把点击事件放到表单外，

   不然正常js获取是不需要form表单的，这里我们要注意一点，ajax的传输与form表单冲突，如果两个都有就只会走form表单

3.正常如果用id获取file的值，会把整个文件的绝对路径获取到，那样的话传输后端就是整个绝对路径了，显然跟我们需要获取的文件名字不符，

   所以我们这回需要form表单，就因为点击的时候获取的是整个form表单的所有内容。

<form id="uploadForm" enctype="multipart/form-data">
     {% csrf_token %}
        姓名：<input type="text" name="name"><br>
        年龄：<input type="text" name="age"><br>
        男：<input type="radio" name="gender" value="男">
        女：<input type="radio" name="gender" value="女"><br>
        手机：<input type="text" name="phone"><br>

        <select name="hobby">
            <option value="篮球">篮球</option>
            <option value="羽毛球">羽毛球</option>
            <option value="足球">足球</option>
        </select><br>
        <input type="file" name="file" multiple="multiple"/><br>
    </form>
    <button id="upload" >上传</button>

 

 

点击事件获取整个form表单，如果Django配置里csrf没有注释， 此处要把token加入到formData里面,

formData获取的是整个form表单内容，下面为ajax格式，不会的自己查吧基本格式

<script type="text/javascript" src="../../static/js/jquery-1.12.4.min.js"></script>
<script>
$(function(){   
    $("#upload").click(
        function(){
            var csrfToken=document.querySelector("[name='csrfmiddlewaretoken']");
            var formData = new FormData($('#uploadForm')[0])
            
            $.ajax({
                url:'{% url "stu:entry" %}',
                data:formData,
                dataType:'json',
                type:'POST',
                cache: false,
                processData: false,
                contentType: false,
                success:function(resp){
                    if (resp.code==200){
                        alert(resp.msg);
                        location.href = '{% url "stu:index" %}';
                    }else{
                        alert(resp.msg);
                        location.reload()
                    }
                }
            })
        }
    )
}) 
</script>