javascript - 如何在此代码中使用 ajax 发送具有输入类型文件的数据？

Question

在这个我有一个表单和一些带有id（级别，状态，照片卡）的属性。我正在使用ajax调用来发送这样的表单数据，级别，状态属性成功地进入后端，输入类型=“文本” “。但是照片卡的输入类型=“文件”不会进入后端。我应该在这段代码中做些什么改变？

<script>
            $(document).ready(function(){
                $("#submit_btn").click(function(){
                    alert("success");
                    $.ajax({
                        url:"/WeatherApi/UserDetailsController",
                        type:"post",
                        data: {
                            level: $('#level').val(),
                            state: $('#state').val(),
                            photo_card: $('#photo_card').val(),
                            },
                        sucess:function(response)
                        {
                            alert(response.status);
                        }
                    
                    });
                });
            });
        </script>

标签： javascriptjqueryajax

Answer 1

要发送文件，您必须将 ajax 调用的 enctype 设置为multipart/formdata.

您还必须使用FormData对象发送数据。

所以使用你的代码（未经测试，但应该让你去）：

<script>
    var data = new FormData();

        data.append('level', $('#level').val());
        data.append('state', $('#state').val());
        data.append('photo_card', $('#photo_card')[0].files[0]);

            $(document).ready(function(){
                $("#submit_btn").click(function(){
                    alert("success");
                    $.ajax({
                        url:"/WeatherApi/UserDetailsController",
                        type:"post",
                        enctype: 'multipart/form-data',
                        data: data,
                        sucess:function(response)
                        {
                            alert(response.status);
                        }
                    
                    });
                });
            });
        </script>