Question

我的文件上传脚本遇到了一些问题。 HTML如下：

<form method="post" name="imgsubmit" id="contact_form" action="PHP/imgupload.php"     enctype="multipart/form-data">
<label id="namelabel" for="username">Your name:</label><input id="username" type="text" name="username" rel="req">
<label id="labelemail" for="imgemail">E-mail:</label><input id="imgemail" type="email" name="imgemail" rel="req">
<label id="filelabel" for="file">Your photo:</label><input id="file" type="file" name="file">
<input id="imgsubmit" type="submit" name="submit" value="SUBMIT"></form>

我有一个jquery验证脚本，用于检查用户名和电子邮件字段以查看它们是否有效，如果未输入则返回白色边框：

$(function () {
    $('#contact_form').submit(function (e) {
        e.preventDefault();
        var form = $('#contact_form');
        var post_url = form.attr('action');
        var post_data = form.serialize();
        var submit_form = false;
        var req_fields = $('input[rel=req]');
        var field, pcount = 0;
        req_fields.each(function () {
            field = $(this).val();
            if (field == '' || field == 'Required') {
                $(this).css('border', '1px solid white').val('');
                pcount += 1;
            } else {}
        });
        if (pcount == 0) {
            submit_form = true;
        }
        if (submit_form) {
            $.ajax({
                type: 'POST',
                url: post_url,
                data: post_data,
                success: function (msg) {
                    $(form).fadeOut;
                    form.html(msg).fadeIn();
                }
            });
        }
    });
});

问题是用户名被提交到php脚本，电子邮件被提交到php脚本，但图像没有上传。我知道AJAX现在支持图像上传，而form.serialize（）可能是问题的根本原因，但是无法正确编辑此代码以支持图像提交。

如何调整此代码以包含要提交给php的图像？

Answer 1

我喜欢将jQuery Form Plugin用于此类内容，只需在DOM准备好工作时绑定表单提交即可。下面的示例提供成功回调，但您可以使用其他事件，例如错误， beforeSubmit ，等等：

$('#contact_form').ajaxForm(function() { 
    alert("Thank you for your data!"); 
});

它支持常规输入值和文件上传（在旧版浏览器中，它会使用 iframes 伪造ajax文件上传），如果您的浏览器可以处理它，您甚至可以显示{{3 }}

Answer 2

 `if (window.FormData)`

检查一下，文件必须是`

file = $('#elemet').files.

和ajax选项应该是数据：FormData，其中formdata = new FormData();

通过AJAX上传图片以及用户名和电子邮件地址

2 个答案: