jquery 文件上传报错TypeError: Argument 1 of FormData.constructor does not implement interface HTMLFormEle

YueLinbo

于 2018-05-17 11:47:21 发布

阅读量1.4w

点赞数 3

分类专栏： JavaScript 文章标签： jquery

本文链接：https://blog.youkuaiyun.com/u013719012/article/details/80348767

版权

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用JavaScript的FormData对象进行文件上传的例子。通过修改选择器，实现从特定表单元素中获取文件数据，并通过AJAX以POST方式发送到指定服务器地址。文章详细展示了如何设置AJAX请求参数以确保正确发送文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script type="text/javascript">
            $(function() {

                $('#uploadSubmit').click(function() {
                    //将这行替换为document.getElementById 就解决了---------
                    //var data = new FormData($('#uploadForm')[0]);
                    var data = new FormData(document.getElementById('uploadForm')[0]);



                    console.log(data.toString());


                    $.ajax({
                        url: 'http://127.0.0.1:8080/face/uploadImg',
                        type: 'POST',
                        data: data,
                        async: false,
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: function(data) {
                            console.log(data);
                            if(data.status) {
                                console.log('upload success');
                            } else {
                                console.log(data.message);
                            }
                        },
                        error: function(data) {
                            console.log(data.status);
                        }
                    });
                });
            })
        </script>