文本表单和图片一起进行ajax提交，表单是值，图片是对象，发送时有些问题-PHP-Tutorial-php.cn

文本表单和图片一起进行ajax提交，表单是值，图片是对象，发送时有些问题

WBOY

Freigeben： 2016-06-06 20:18:42

Original

1381 Leute haben es durchsucht

代码如下：

<code>


    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/tether/1.1.1/css/tether.min.css" rel="stylesheet">




<div class="container">
    <fieldset class="form-group">
        <label for="title">标题</label>
        <input type="text" class="form-control" id="title" placeholder="">
    </fieldset>
    <fieldset class="form-group">
        <label for="content">内容</label>
        <textarea class="form-control" id="content" rows="3"></textarea>
    </fieldset>
    <fieldset class="form-group">
        <label for="photo">图片</label>
        <input type="file" name="file" accept="image/*" class="form-control-file" id="photo">
        <img  id="preview" alt="文本表单和图片一起进行ajax提交，表单是值，图片是对象，发送时有些问题" >
    </fieldset>
    <a id="submit" class="btn btn-primary">submit</a>
</div>

<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/tether/1.1.1/js/tether.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>

// 用到了localResizeIMG插件，压缩图片: https://github.com/think2011/localResizeIMG
<script src="js/dist/lrz.all.bundle.js"></script>
<script>
    $(function () {
        var $preview = $('#preview');
        var formData = null;

        //压缩图片
        $('#photo').on('change', function () {
            lrz(this.files[0], {
                width: 800
            }).then(function (rst) {
                //图片预览
                $preview.attr('src', rst.base64);

                //根据需要增加一些信息
                rst.formData.append('fileLen', rst.fileLen);

                //压缩后的图片暂存在变量formData中
                formData = rst.formData;
            });
        });

        //ajax请求
        $("#submit").click(function () {
            //设置TOKEN
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                type: "POST",
                url: "{{ url('article/') }}",
                dataType: 'json',
                processData: false,
                contentType: false,  
                cache: false,
                data: {
                    title: $("#title").val(),
                    content: $("#content").val(),
                    photo: formData
                }
            }).done(function (data) {
                alert(JSON.stringify(data));
            }).fail(function (jqXHR, textStatus) {
                console.log(jqXHR);
                console.log(textStatus);
            });
        });
    });
</script>


</code>

Nach dem Login kopieren

示例中，有两个文本表单，另外还有一张图片，一起提交到后台，
因为普通提交不能压缩图片，所以用js在前端压缩后，用ajax一起提交到后台，
提交过程中问题如下：
主要跟这两项相关:

<code>processData: false,
contentType: false,</code>

Nach dem Login kopieren

1、如果让这两项生效，Request payload显示为：[object Object],ajax请求能成功发送，但jquery拿不到表单的值。

2、如果注释掉这两项，谷歌浏览器控制台报错：Uncaught TypeError: Illegal invocation，ajax请求不能发送。

不知怎么弄

回复内容：

代码如下：

<code>


    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/tether/1.1.1/css/tether.min.css" rel="stylesheet">




<div class="container">
    <fieldset class="form-group">
        <label for="title">标题</label>
        <input type="text" class="form-control" id="title" placeholder="">
    </fieldset>
    <fieldset class="form-group">
        <label for="content">内容</label>
        <textarea class="form-control" id="content" rows="3"></textarea>
    </fieldset>
    <fieldset class="form-group">
        <label for="photo">图片</label>
        <input type="file" name="file" accept="image/*" class="form-control-file" id="photo">
        <img  id="preview" alt="文本表单和图片一起进行ajax提交，表单是值，图片是对象，发送时有些问题" >
    </fieldset>
    <a id="submit" class="btn btn-primary">submit</a>
</div>

<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/tether/1.1.1/js/tether.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>

// 用到了localResizeIMG插件，压缩图片: https://github.com/think2011/localResizeIMG
<script src="js/dist/lrz.all.bundle.js"></script>
<script>
    $(function () {
        var $preview = $('#preview');
        var formData = null;

        //压缩图片
        $('#photo').on('change', function () {
            lrz(this.files[0], {
                width: 800
            }).then(function (rst) {
                //图片预览
                $preview.attr('src', rst.base64);

                //根据需要增加一些信息
                rst.formData.append('fileLen', rst.fileLen);

                //压缩后的图片暂存在变量formData中
                formData = rst.formData;
            });
        });

        //ajax请求
        $("#submit").click(function () {
            //设置TOKEN
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                type: "POST",
                url: "{{ url('article/') }}",
                dataType: 'json',
                processData: false,
                contentType: false,  
                cache: false,
                data: {
                    title: $("#title").val(),
                    content: $("#content").val(),
                    photo: formData
                }
            }).done(function (data) {
                alert(JSON.stringify(data));
            }).fail(function (jqXHR, textStatus) {
                console.log(jqXHR);
                console.log(textStatus);
            });
        });
    });
</script>


</code>

Nach dem Login kopieren

<code>processData: false,
contentType: false,</code>

Nach dem Login kopieren

1、如果让这两项生效，Request payload显示为：[object Object],ajax请求能成功发送，但jquery拿不到表单的值。

2、如果注释掉这两项，谷歌浏览器控制台报错：Uncaught TypeError: Illegal invocation，ajax请求不能发送。

不知怎么弄

看了以下，这个插件是利用了FormData对象来发送文件的，所以你用jQuery.ajax()发送的数据的data属性必须是FormData对象，不能把FormData对象再作为data属性的子属性。

<code>$.ajax({
    type: "POST",
    url: "{{ url('article/') }}",
    dataType: 'json',
    processData: false,
    contentType: false,  
    cache: false,
    data: {
        title: $("#title").val(),
        content: $("#content").val(),
        photo: formData    //这里错了，不能把FormData对象作为data属性的子属性
    }
})
</code>

Nach dem Login kopieren

应该是这样才对：

<code>$.ajax({
    type: "POST",
    url: "{{ url('article/') }}",
    dataType: 'json',
    processData: false,
    contentType: false,  
    cache: false,
    data: formData    //直接把formData对象作为data属性的值发送
})
</code>

Nach dem Login kopieren

如果你要附加字段，可以用FormData对象的append方法：

<code>//这段代码要在ajax请求之前
formData.append('title', $("#title").val());
formData.append('content',$("#content").val());
</code>

Nach dem Login kopieren

如果你要想把图片文件的字段名设置成photo，在localResizeIMG参数文档力其实已经说明了，就是在你压缩图片的代码那里这样修改：

<code>lrz(this.files[0], {
    width: 800,
    fieldName: 'photo'    //把上传图片文件的字段设置为photo
})
</code>

Nach dem Login kopieren

另外要注意，FormData对象在IE上只有版本10以上才支持，其他现代浏览器（Firefox、Chrome、Safari、MS Edge等）都没问题。