文件输入更改时正在上载文件

Uploading file on change of file input

本文关键字：文件 上载 输入      更新时间：2023-09-26

我试图在更改文件输入时上传一个文件，但我无法使其工作，因为我不太擅长javascript。

我在谷歌上搜索了一下，发现了这样一个问题：如何异步上传文件？

我使用过它，并试图将其更改为我想要的使用方式。但我得到了错误

`Uncaught TypeError: Illegal invocation`

这是我的功能：

function uploadFile(formData){
    $.ajax({
        url: 'inc/ajax/uploadFile.php',  //Server script to process data
        type: 'POST',
        data: {'formData':formData},
        //Ajax events
        success: function(html){
            alert(html);
        }
    });
}

我这样调用函数：

$("input:file").change(function(){
    var file = this.files[0];
    uploadFile(file);
})

并上传文件.php

<?php
 $formData = $_GET['formData'];
 echo $formData;
?>

我只是在测试并尝试返回php中的文件，看看我是否能让它工作。但我不知道如何用PHP调用它或用AJAX发送它。一旦我能在PHP中检索$_FILES，我就知道如何用PHP上传它。

除了其他答案外，还可以将其添加到您的ajax 中

contentType: false,
processData: false

类似：

var formData = new FormData();
formData.append('formData', file);
$.ajax({
    url: 'inc/ajax/uploadFile.php',  //Server script to process data
    type: 'POST',
    data: formData,
    contentType: false,
    processData: false,
    //Ajax events
    success: function(html){
        alert(html);
    }
});

你还应该考虑那些可能没有更新浏览器的人，只需放一条小错误消息，比如：

if(window.FormData === undefined){
    alert('sorry buddy, your browser''s too old!');
    return;
}

您需要将数据作为FormData对象发送

function uploadFile(file){
    var formData = new FormData();
    formData.append('formData', file);
    $.ajax({
        url: 'inc/ajax/uploadFile.php',  //Server script to process data
        type: 'POST',
        data: formData,
        //Ajax events
        success: function(html){
            alert(html);
        }
    });
}

http://blog.new-bamboo.co.uk/2012/01/10/ridiculously-simple-ajax-uploads-with-formdata

相关文章：