無法使用ajax上傳多個文件

Question

首先，這可能是一個愚蠢的問題，因為有很多可用的主題，但嚴重的是，我無法直截了當地了解如何使其工作。

我想做什么

我正在嘗試使用 AJAX 和 PHP 上傳多個文件。

問題

• 我不知道如何使用 AJAX 將數據傳遞給 PHP 腳本。 我不想使用表單和提交按鈕進行上傳。
• 嘗試使用表單並使用 jQuery 提交它仍然無法成功。

HTML

<div id="content">
    <div id="heading">Upload your files seamlessly</div>
    <a href="#"><div id="upload" class="button" title="Upload your files"><i class="fa fa-cloud-upload fa-align-center" aria-hidden="true"></i>
</div></a>
    <a href="view.php"><div id="view" class="button" title="View all files on my cloud"><i class="fa fa-eye fa-align-center" aria-hidden="true"></i>
</div></a>
</div>

<form id="fileupload" method="POST" enctype="multipart/form-data">
<input type="file" multiple name="uploadfile[]" id="uploadfile" />
</form>

JS

<script type="text/javascript">
$(document).ready(function(){
    $('#upload').click(function(){
        $('input[type=file]').click();
        return false;
    });

    $("#uploadfile").change(function(){
         //submit the form here  
         $('#fileupload').submit();
    });
});
</script>

PHP

<?php
if(isset($_FILES['uploadfile'])){

    $errors= array();

    foreach($_FILES['uploadfile']['tmp_name'] as $key => $tmp_name ){
        $file_name = $key.$_FILES['uploadfile']['name'][$key];
        $file_size =$_FILES['uploadfile']['size'][$key];
        $file_tmp =$_FILES['uploadfile']['tmp_name'][$key];
        $file_type=$_FILES['uploadfile']['type'][$key]; 
        if($file_size > 2097152){
            $errors[]='File size must be less than 2 MB';
        }       

        //$query="INSERT into upload_data (`USER_ID`,`FILE_NAME`,`FILE_SIZE`,`FILE_TYPE`) VALUES('$user_id','$file_name','$file_size','$file_type'); ";

        $desired_dir="storage";

        if(empty($errors)==true){
            if(is_dir($desired_dir)==false){
                mkdir("$desired_dir", 0700);        // Create directory if it does not exist
            }

            if(is_dir("$desired_dir/".$file_name)==false){
                move_uploaded_file($file_tmp,"$desired_dir/".$file_name);
            }
            else{                                   // rename the file if another one exist
                $new_dir="$desired_dir/".$file_name.time();
                 rename($file_tmp,$new_dir) ;               
            }
         //mysql_query($query);         
        }
        else{
                print_r($errors);
        }
    }
    if(empty($error)){
        echo "Success";
    }
}
?>

任何幫助將不勝感激。

Answer 1

這是您想要做什么的一個非常簡單的示例。

HTML

將您的輸入包裝在一個表單中。 為什么？ 因為這是最簡單的方法。

<form action="process.php" method="post">
    <input type="file" multiple name="uploadfile[]">
    <input type="submit" value="Upload"> 
</form>

JavaScript

將onsubmit事件處理程序附加到您的表單。 使用 $.ajax() 發送 POST 請求。

將您的表單元素即this傳遞到FormData對象的構造函數中，並在發送請求時將其用作data ，如下所示。 您還需要確保將processData和contentType設置為false才能使其正常工作。

$(function () {
    $('form').on('submit', function (e) {
        e.preventDefault();
        // send request
        $.ajax({
            url: this.action, 
            type: this.method, 
            data: new FormData(this), // important
            processData: false, // important 
            contentType: false, // important
            success: function (res) {
                alert(res);
            }
        });
    });
});

PHP (process.php)

讓我們清理你的 PHP。

<?php
// always a good idea to turn on errors during development
error_reporting(E_ALL);
ini_set('display_errors', 1);

$dir = './storage';
$errors = [];

if (isset($_FILES['uploadfile'])) {
    $files = $_FILES['uploadfile'];
    // create directory if it does not exist
    !is_dir($dir) && mkdir($dir, 0700);
    // validate & upload files
    foreach (array_keys($files['tmp_name']) as $key) {
        $file = [
            'name' => $files['name'][$key],
            'size' => $files['size'][$key],
            'tmp_name' => $files['tmp_name'][$key],
            'type' => $files['type'][$key],
            'error' => $files['error'][$key]
        ];
        // skip if no file was given
        if ($file['error'] === UPLOAD_ERR_NO_FILE) {
            continue;
        }
        // get file extension
        $file['ext'] = strtolower(pathinfo($file['name'], PATHINFO_EXTENSION));
        // generate a unique name (!)
        $file['name'] = uniqid() . '.' . $file['ext'];
        // validate
        if (!file_exists($file['tmp_name']) || 
            !is_uploaded_file($file['tmp_name']) ||
            $file['error'] !== UPLOAD_ERR_OK) {
            $errors[$key] = 'An unexpected error has occurred.';
        } elseif ($file['size'] > 2097152) {
            $errors[$key] = 'File size must be less than 2 MB';
        // upload file
        } elseif (!move_uploaded_file($file['tmp_name'], $dir . '/' . $file['name'])) {
            $errors[$key] = 'File could not be uploaded.';
        }
    }
}

if ($errors) {
    print_r($errors);
} else {
    echo 'no errors';
}
?>

(!) 請記住uniqid()實際上並不是唯一的。