jQuery AJAX 单文件上传

Question

我知道这个问题已经被问了很多次，我尝试了至少 10 种不同的代码来运行它，但没有成功。

我正在尝试使用 jQuery.ajax() 上传单个文件，但它不起作用。下面的代码始终输出:

please choose a file' because the file's name is not set or something

<小时/>

HTML

<form enctype="multipart/form-data">
  <input name="file" type="file" />
  <input type="button" value="Upload" />
</form>
<div id="result"></div>

jQuery

$(function(){
  $(document).ready(function(){
    var files;

    $('input[type=file]').on('change', prepareUpload);
    function prepareUpload(event){
      files = event.target.files;
    };
    $(':button').click(function(){
        var formData = new FormData();
        $.each(files, function(key, value){
          formData.append(key, value);
        });
        alert(formData);
        $.ajax({
          url: 'check.php',  
          type: 'GET',
          data: formData,
          success: function(data){ $('#result').html(data); }, 
          cache: false,
          contentType: false,
          processData: false
        });
    });
  });
});

PHP

if(isset($_GET['file'])){
    $filename = $_FILES['file']['name'];
    if(isset($filename) && !empty($filename)){
        echo 'sup my man?!';
    }else{
        echo 'please choose a file';
    }
}else{
    echo 'not set';
}

我不知道问题是什么，我知道它在 FormData 中对象创建，因为警报 - 很好，不起作用。

顺便说一句，它是用 jQuery 编写的，这对我来说非常重要。

Answer 1

经过几个小时的搜索和寻找答案，我终于成功了!!!!!! 代码如下:))))

HTML:

<form id="fileinfo" enctype="multipart/form-data" method="post" name="fileinfo">
    <label>File to stash:</label>
    <input type="file" name="file" required />
</form>
<input type="button" value="Stash the file!"></input>
<div id="output"></div>

jQuery:

$(function(){
    $('#uploadBTN').on('click', function(){ 
        var fd = new FormData($("#fileinfo"));
        //fd.append("CustomField", "This is some extra data");
        $.ajax({
            url: 'upload.php',  
            type: 'POST',
            data: fd,
            success:function(data){
                $('#output').html(data);
            },
            cache: false,
            contentType: false,
            processData: false
        });
    });
});

在 upload.php 文件中，您可以访问通过 $_FILES['file'] 传递的数据。

感谢大家的帮助:)

我从这里得到了答案(做了一些更改) MDN