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>

巴特西

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

最新文章

热门文章