使用 AJAX 上传文件答案

【问题标题】：Uploading files with AJAX使用 AJAX 上传文件
【发布时间】：2016-05-14 18:24:09
【问题描述】：

我正在尝试使用简单的 HTML 表单通过 AJAX 上传图像，其中包括 input[type='file'] 元素和 formData()，但是当我检查 formData() 时，它似乎是空的，并且没有任何内容传递到服务器.

jQuery

//Dynamically loaded form

$(document).on('submit', '.update-form', function(e) {
    e.preventDefault();
    var form = $(this);

    amendDatabase(form);
});

function amendDatabase(form) {
    var formData = new FormData(form);
    console.log(formData); //This produces 'formData: No properties'

    var url = 'file.php';

    request = $.ajax({
        url:            url,
        method:         'post',
        data:           formData,
        processData:    false,
        contentType:    false
    });

    request.done(function(data) {
        console.log(data); //This produces an empty/blank return
    });
}

file.php

function uploadFile() {
    echo 'formData was passed to server';
}

uploadFile();

HTML

<form class="update-form" id="add-file" enctype="multipart/form-data">
    <label for="image">Product image</label>
    <input type="file" id="image" name="image" multiple="multiple">
    <div class="hidden-holder">
        <input type="hidden" id="action" name="action" value="file">
    </div>
    <div class="submit-holder">
        <input type="submit">
    </div>
</form>

【问题讨论】：

你看过传递的参数了吗？
@CharlotteDunois 你指的是哪个传递的参数？

标签： php jquery ajax file-upload form-data

【解决方案1】：

从 ajax 直接上传文件仅适用于新浏览器。使用直接 ajax 的不可用使用此插件：http://malsup.com/jquery/form/

 $(document).ready(function() {
   $('#add-file').ajaxForm(function() { 
                alert("Upload Done!"); 
     }); 
});

您不必更改任何 html。

【讨论】：

【解决方案2】：

const fileInput = document.getElementById('file');
fileInput.addEventListener('change', function() {
  let name = this.files[0].name;
  let extension = this.files[0].type;
  let date = new Date();
  getBase64(this.files[0], function(base64) {
    ajax(
      'POST',
      'Index.aspx/UploadFile',
      JSON.stringify({
        name: name,
        extension: extension,
        date: date,
        data: base64
      }),
      function() {
        console.log(JSON.parse(this.response));
        alert('Uploaded!');
      });
  });
});

function getBase64(file, call) {
  let fr = new FileReader();
  fr.readAsDataURL(file);
  fr.onload = function(data) {
    call(btoa(this.result));
  }
}

function ajax(method, url, data, call) {
  let request = new XMLHttpRequest();
  request.timeout = 10000;
  request.addEventListener('load', call);
  request.open(method, url);
  request.setRequestHeader('Content-Type', 'application/json');
  request.setRequestHeader('DataType', 'json');
  request.send(data);
}

<label>
    Select a file...
    <input id="file" name="file" type="file" />
</label>

<?php
    $name = $_POST['Name'];
    $data = $_POST['Data'];
    $extension = $_POST['Extension'];
    $date = $_POST['Date'];
    echo 'yep!'
?>

【讨论】：

您可以查看如何使用 AJAX 上传文件的完整示例。您会发现它很容易根据您的需要进行调整。 github.com/Spookypeak/Uploading-files---AJAX---ASP.Net
虽然此代码可以回答问题，但提供有关如何和 为什么 解决问题的附加上下文将提高答案的长期价值。

【解决方案3】：

你应该将你的文件附加到表单数据中：

// Create a formdata object and add the files
    var data = new FormData();
    $.each(files, function(key, value)
    {
        data.append(key, value);
    });

 $.ajax({
        url: 'submit.php?files',
        type: 'POST',
        data: data,
        cache: false,
        dataType: 'json',
        processData: false, // Don't process the files
        contentType: false, // Set content type to false as jQuery will tell the server its a query string request

【讨论】：

我已经使用var formData = new FormData(form); 完成了这项工作，其中form 是我的表单数据，所以我认为这没有任何区别。