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

首页

后端开发

php教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 06, 2016 pm 08:18 PM

laravelphp

代码如下：

<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  src="/static/imghwm/default1.png" data-src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js" class="lazy" id="preview" alt="文本表单和图片一起进行ajax提交，表单是值，图片是对象，发送时有些问题" >
    </fieldset>
    <a id="submit" class="btn btn-primary">submit</a>
</div>

<script></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>

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

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

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  src="/static/imghwm/default1.png" data-src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js" class="lazy" id="preview" alt="文本表单和图片一起进行ajax提交，表单是值，图片是对象，发送时有些问题" >
    </fieldset>
    <a id="submit" class="btn btn-primary">submit</a>
</div>

<script></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>

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

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>

应该是这样才对：

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

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

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

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

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

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

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

PHP电子邮件：分步发送指南May 09, 2025 am 12:14 AM

phpisusedforsendendemailsduetoitsignegrationwithservermailservicesand andexternalsmtpproviders，自动化notifications andMarketingCampaigns.1）设置设置yourphpenvironcormentswironmentswithaweberswithawebserverserverserverandphp，确保themailfunctionisenabled.2）useabasicscruct

如何通过PHP发送电子邮件：示例和代码May 09, 2025 am 12:13 AM

发送电子邮件的最佳方法是使用PHPMailer库。1)使用mail()函数简单但不可靠，可能导致邮件进入垃圾邮件或无法送达。2)PHPMailer提供更好的控制和可靠性，支持HTML邮件、附件和SMTP认证。3)确保正确配置SMTP设置并使用加密（如STARTTLS或SSL/TLS）以增强安全性。4)对于大量邮件，考虑使用邮件队列系统来优化性能。

高级PHP电子邮件：自定义标题和功能May 09, 2025 am 12:13 AM

CustomHeadersheadersandAdvancedFeaturesInphpeMailenHanceFunctionalityAndreliability.1）CustomHeadersheadersheadersaddmetadatatatatataatafortrackingandCategorization.2）htmlemailsallowformattingandttinganditive.3）attachmentscanmentscanmentscanbesmentscanbestmentscanbesentscanbesentingslibrarieslibrarieslibrariesliblarikelikephpmailer.4）smtppapapairatienticationaltication enterticationallimpr

使用PHP和SMTP发送电子邮件的指南May 09, 2025 am 12:06 AM

使用PHP和SMTP发送邮件可以通过PHPMailer库实现。1)安装并配置PHPMailer，2)设置SMTP服务器细节，3)定义邮件内容，4)发送邮件并处理错误。使用此方法可以确保邮件的可靠性和安全性。

使用PHP发送电子邮件的最佳方法是什么？May 08, 2025 am 12:21 AM

ThebestapproachforsendingemailsinPHPisusingthePHPMailerlibraryduetoitsreliability,featurerichness,andeaseofuse.PHPMailersupportsSMTP,providesdetailederrorhandling,allowssendingHTMLandplaintextemails,supportsattachments,andenhancessecurity.Foroptimalu

PHP中依赖注入的最佳实践May 08, 2025 am 12:21 AM

使用依赖注入(DI)的原因是它促进了代码的松耦合、可测试性和可维护性。1)使用构造函数注入依赖，2)避免使用服务定位器，3)利用依赖注入容器管理依赖，4)通过注入依赖提高测试性，5)避免过度注入依赖，6)考虑DI对性能的影响。

PHP性能调整技巧和技巧May 08, 2025 am 12:20 AM

phperformancetuningiscialbecapeitenhancesspeedandeffice，whatevitalforwebapplications.1）cachingwithapcureduccureducesdatabaseloadprovesrovesponsemetimes.2）优化

PHP电子邮件安全性：发送电子邮件的最佳实践May 08, 2025 am 12:16 AM

ThebestpracticesforsendingemailssecurelyinPHPinclude:1)UsingsecureconfigurationswithSMTPandSTARTTLSencryption,2)Validatingandsanitizinginputstopreventinjectionattacks,3)EncryptingsensitivedatawithinemailsusingOpenSSL,4)Properlyhandlingemailheaderstoa

See all articles