Question

我知道这个问题已经被问了很多，我尝试了至少10个不同的代码来运行它没有成功。我正在尝试使用jquery.ajax上传单个文件，但它不起作用。下面的代码总是输出：'请选择一个文件'，因为文件的名称没有设置或什么

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对象创建中，因为警报 - 好去，不起作用。

BTW对我来说非常重要，它将用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

Answer 2

：一种。从文件字段中抓取文件数据

首先要做的是将一个函数绑定到文件字段上的change事件和一个用于获取文件数据的函数：

// Variable to store your files
var files;

// Add events
$('input[type=file]').on('change', prepareUpload);

// Grab the files and set them to our variable
function prepareUpload(event)
{
  files = event.target.files;
}

这会将文件数据保存到文件变量中供以后使用。

<强> B中。在提交时处理文件上传

提交表单时，您需要在自己的AJAX请求中处理文件上载。添加以下绑定和功能：

$('form').on('submit', uploadFiles);

// Catch the form submit and upload the files
function uploadFiles(event)
{
  event.stopPropagation(); // Stop stuff happening
    event.preventDefault(); // Totally stop stuff happening

// START A LOADING SPINNER HERE

// 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
    success: function(data, textStatus, jqXHR)
    {
        if(typeof data.error === 'undefined')
        {
            // Success so call function to process the form
            submitForm(event, data);
        }
        else
        {
            // Handle errors here
            console.log('ERRORS: ' + data.error);
        }
    },
    error: function(jqXHR, textStatus, errorThrown)
    {
        // Handle errors here
        console.log('ERRORS: ' + textStatus);
        // STOP LOADING SPINNER
    }
});
}

这个函数的作用是创建一个新的formData对象并将每个文件附加到它。然后它将该数据作为请求传递给服务器。需要将2个属性设置为false：

processData - 因为jQuery会将文件数组转换为字符串和服务器无法接收。
contentType - 将此设置为false，因为jQuery默认为application / x-www-form-urlencoded并且不发送文件。还将其设置为multipart / form-data 似乎也不起作用。

<强>℃。上传文件

快速而脏的PHP脚本上传文件并传回一些信息：

<?php // You need to add server side validation and better error handling here

$data = array();

if(isset($_GET['files']))
{  
$error = false;
$files = array();

$uploaddir = './uploads/';
foreach($_FILES as $file)
{
    if(move_uploaded_file($file['tmp_name'], $uploaddir .basename($file['name'])))
    {
        $files[] = $uploaddir .$file['name'];
    }
    else
    {
        $error = true;
    }
}
$data = ($error) ? array('error' => 'There was an error uploading your files') : array('files' => $files);
}
else
{
    $data = array('success' => 'Form was submitted', 'formData' => $_POST);
}

echo json_encode($data);

?>

IMP：不要使用它，自己编写。

<强> d。处理表单提交

上传功能的成功方法将从服务器发回的数据传递给提交功能。然后，您可以将其作为帖子的一部分传递给服务器：

function submitForm(event, data)
{
  // Create a jQuery object from the form
$form = $(event.target);

// Serialize the form data
var formData = $form.serialize();

// You should sterilise the file names
$.each(data.files, function(key, value)
{
    formData = formData + '&filenames[]=' + value;
});

$.ajax({
    url: 'submit.php',
    type: 'POST',
    data: formData,
    cache: false,
    dataType: 'json',
    success: function(data, textStatus, jqXHR)
    {
        if(typeof data.error === 'undefined')
        {
            // Success so call function to process the form
            console.log('SUCCESS: ' + data.success);
        }
        else
        {
            // Handle errors here
            console.log('ERRORS: ' + data.error);
        }
    },
    error: function(jqXHR, textStatus, errorThrown)
    {
        // Handle errors here
        console.log('ERRORS: ' + textStatus);
    },
    complete: function()
    {
        // STOP LOADING SPINNER
    }
});
}

最后的注释

此脚本仅为示例，您需要同时处理服务器和客户端验证以及通知用户文件上载发生的某种方式。如果你想看到它工作，我在Github上为它制作了一个项目。

Referenced From

jQuery ajax单文件上传

2 个答案: