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>