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()实际上并不是唯一的。

无法使用ajax上传多个文件

1 个答案: