0

我的文件上传脚本有问题。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 的图像？

4

2 回答 2

0 
 `if (window.FormData)`

检查这个并且文件必须是`

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

和 ajax 选项应该是 data: FormData，其中formdata = new FormData();

于 2012-10-19T02:49:28.860 回答
0

我喜欢使用jQuery Form Plugin来处理这类东西，你只需要在 DOM 准备好工作时绑定你的表单提交。下面的示例提供了一个成功回调，但您还可以使用其他事件，例如error、beforeSubmit等：

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

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

于 2012-10-19T02:33:17.420 回答