Question

我有一个带有文件输入的表单，当我使用默认操作提交表单时提交就好了。但是，当我使用JQuery和AJAX来调用PHP文件时，它似乎没有获取该文件。我需要添加一些东西来通过JQUERY / AJAX发送文件吗？

我的HTML：

<form id="photo-form" enctype="multipart/form-data" method="post" action="">
    <input type="hidden" name="MAX_FILE_SIZE" value="5000000"/>
    <input type="file" class="upload-input" name="upload-new-input" autocomplete="off"/>
    <input type="submit" name="submit" value="submit/>
</form>

我的JQuery：

$(document).ready(function() {
    $("#photo-form").submit(function(e) {

        e.preventDefault();

        var dataString = $(this).serialize();

        $.ajax({  
             type: "POST",  
             url: "uploadcover.php",  
             data: dataString,
             async: false,
             success: function(data) {
                 alert(data);
             }
        }); 

    });
});

Answer 1

您可以使用FormData上传带有数据的文件

以下是示例代码

<强> JQuery的

$("#photo-form").submit(function(e) {
        e.preventDefault();
        var formData = new FormData($(this)[0]);

        $.ajax({  
             type: "POST",  
             url: "uploadcover.php",  
             data: formData,
             async: false,
             cache: false,
             contentType: false,
             processData: false,
             success: function(data) {
                 alert(data);
             }
        }); 
        return false;
})

你可以在PHP上获得它

PHP代码

$Img = $_FILES['upload-new-input'];

您可以看到教程Uploading files with jquery ajax

希望它可以帮助你：）

Answer 2

您无法直接访问文件。

您可以使用插件为您执行此操作，即https://github.com/blueimp/jQuery-File-Upload

此外，在html5中，可以从文件输入中访问文件作为blob。您可以使用formData发送它。

此处有更多信息：https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects

使用JQuery和AJAX提交带有文件的表单

2 个答案: