0

我有一个关于使用 Ajax 上传文件的问题。如何在$.ajax() 没有特殊 js-plugin 的情况下提交文件？：

<form action="javascript:return false;">
    <input type="text" id="name" />
    <input type="file" id="myfile" />
    <input type="button" id="submitbutton" value="submit" />
</form>

这是一个jQuery小代码：

<script type="text/javascript">
    $(document).ready(function() {
        $('#submitbutton').click(function() {
            $.ajax({
                type: 'POST',
                dataType: 'json',
                enctype: 'multipart/form-data',
                url: 'upload.php',
                async: false,
                data: {
                    'name': $('#name').val(),
                    'myfile': $('#myfile').val()
                },
                success: function(data) {
                    alert(data.msg);
                }
            });
        });
    });
</script>

并上传.php 文件：

<?php
$name = isset($_POST['name']) ? $_POST['name'] : '';
if (isset($_FILES) && isset($_FILES["file"])) {
    $files = $_FILES['file'];
    $error = isset($files["error"]) ? $files["error"] : '';
    $fname = isset($files["name"]) ? $files["name"] : '';
    $type = isset($files["type"]) ? $files["type"] : '';
    $size = isset($files["size"]) ? $files["size"] : '';
    $tmp_name = isset($files["tmp_name"]) ? $files["tmp_name"] : '';
    return array('msg' => "Hello, $name! \nYour file data:\nErr: $error, Name: $fname, Type: $type, Size: $size, Tmp: $tmp_name");
}
echo json_encode(array('msg' => 'create image'));
?>
4

3 回答 3

1

无法通过 ajax 上传文件。您可能需要查看支持文件上传的表单插件：http: //jquery.malsup.com/form/

于 2013-04-04T11:05:44.930 回答
1

其他选项是使用iframe, 这是一个这样做的教程；

于 2013-04-04T11:04:09.373 回答
0

如果您希望获得这个工作的跨浏览器，那么您不能仅使用 AJAX 来做到这一点。（但您可以，这不适用于所有浏览器，您可以在这里查看如何使用 XMLHttpRequest 和 jquery 上传文件）

至于我，最好的办法是使用jQuery Forms插件。

另一种选择是执行插件手动执行的相同操作。

它将如下所示：

var ifrm = $("<iframe>", {id:"tmp_upload_frame"}).onload(function() {
  // do something when response is returned
}).hide();
$("body").append(ifrm);
$("form").prop("target", "tmp_upload_frame")
         .prop("enctype","multipart/form-data")
         .submit();

但对我来说，Forms 插件要好得多，因为它的接口与 ajax 接口非常相似，并且为你做了很多脏活（比如从 iframe 检索响应）。

于 2013-04-04T11:06:02.620 回答