Question

我的表单使用javascript警报与用户进行通信，因为这是我工作的公司的首选方法（而不是与php处理程序文件之间的常量重定向）。

因此，我通过jquery中的一些简单验证传递所有表单数据，并通过ajax将其发送到php处理程序。以下是我如何做的基本看法......

var first_name = $(sender + ' #first_name');
var email = $(sender + ' #email');
var tel = $(sender + ' #telephone');
var comments = $(sender + ' #comments');

$.ajax({
    type: 'POST',
    url: 'sendmail.php',
    data: { first_name: first_name.val(),
        email: email.val(),
        telephone: tel.val(),
        comments: comments.val(),
        success: function clearFields() {
            first_name.val('');
            email.val('');
            tel.val('');
            comments.val('');
            alert('Thank you. We will contact you as soon as possible.');
        }
    }
});

将文件输入字段添加到如下所示的一个表单中，我在上传时遇到问题。虽然电子邮件发送正确，但我认为ajax不会将上传的任何可用数据发送到php文件

<input type="file" name="upload" id="upload" />

<script>

var upload = $("#upload");
$.ajax({
    type: 'POST',
    url: 'sendmail.php',
    data: { first_name: first_name.val(),
        email: email.val(),
        telephone: tel.val(),
        upload: upload.val(),
        comments: comments.val(),
        success: function clearFields() {
            first_name.val('');
            email.val('');
            tel.val('');
            upload.val('');
            comments.val('');
            alert('Thank you. We will contact you as soon as possible.');
        }
    }
});
</script>

我已经为此找到了很多选项，但是我所看到的所有such as this对我来说都是“hackish”。

有更简单的方法吗？

Answer 1

Ajax不支持file上传操作。但是有很多插件利用iframe来异步上传文件。您可以阅读有关此技术的更多信息here。

支持表单上传的jQuery插件很少 1. jQuery form
2. jQuery-File-Upload

许多Q＆amp; A网站都有很多关于此问题的答案，例如this one。

使用html 5的另一个解决方案是here，它使用FormData。

Answer 2

您必须通过IFrame执行此操作

所以你创建一个隐藏的iframe

<iframe id="upload_target" name="upload_target" style="display: none;" src="#"></iframe>
<!-- note the src="#" -->

然后您创建一个带有某个按钮的表单和您希望拥有的所有字段

<form action="path/to/uploadscript.php" method="POST" enctype="multipart/form-data" target="upload_target">
<!--target will tell the browser to run it in the iFrame with name="upload_target" -->

然后在uploadscript.php中，您可以使用所有表单值，就像它们是常规$ _POST值一样：

<?php upload_file($_FILES['file'], $_POST['name'], $_POST['whatever']); ?>

这与使用AJAX几乎一样。

通过ajax将文件上传到php

2 个答案: