如何使用ajax php和jquery将多个图像上传到一个文件夹答案

【问题标题】：How to upload multiple images to a folder using ajax php and jquery如何使用ajax php和jquery将多个图像上传到一个文件夹
【发布时间】：2018-06-03 21:23:23
【问题描述】：

我正在尝试使用 AJAX、JQuery 和 PHP 一次将多个图像上传到一个文件夹。该代码为单个文件上传运行，但不为多个图像上传运行。如果我在没有循环的情况下上传单个图像，那么它可以正常工作，但在循环的情况下它不起作用。

我正在使用以下代码。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Upload Iamge</title>
        <link href="style.css" rel="stylesheet" type="text/css">
        <script src="jquery-1.12.0.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function(){
                $("#but_upload").click(function(){
                    var fd = new FormData();
                    //following  code is working fine in for single image upload
                    // var files = $('#file')[0].files[0]; 
                    // fd.append('file',files);

                    //this code not working for multiple image upload           
                    var names = [];
                    for (var i = 0; i < $('#file').get(0).files.length; ++i) {
                        names.push($('#file').get(0).files[i].name);
                    }
                    fd.append('file[]',names);

                    /*var ins = document.getElementById('file').files.length;
                    for (var x = 0; x <ins; x++) {
                        fd.append("file", document.getElementById('file').files[x]);
                    }*/

                    $.ajax({
                        url:'upload.php',
                        type:'post',
                        data:fd,
                        contentType: false,
                        processData: false,
                        success:function(response){
                            if(response != 0){
                                $("#img").attr("src",response);
                            }
                        },
                        error:function(response){
                            alert('error : ' + JSON.stringify(response));
                        }
                    });
                });
            });
        </script>
    </head>

    //HTML Part

    <body>
        <div class="container">
            <h1>AJAX File upload</h1>
            <form method="post" action=""  id="myform">
                <div>
                    <img src="" id="img" width="100" height="100">
                </div>
                <div>
                    <input type="file" id="file" name="file"  multiple="multiple" />
                    <input type="button" class="button" value="Upload" 
        id="but_upload">
                </div>
            </form>
        </div>
    </body>
</html>

//PHP Code 

<?php
    /* Getting file name */
    echo "<script>alert('yes');</script>";
    //without loop working fine
    $count = count($_FILES['file']['name']);
    for ($i = 0; $i < $count; $i++) {
        $filename = $_FILES['file']['name'][$i];
        /* Location */
        $location = "upload/".$filename;
        /* Upload file */
        if(move_uploaded_file($_FILES['file']['tmp_name'],$location)){
            echo $location;
        } else {
            echo 0;
    }
}
?>

【问题讨论】：

标签： php jquery json ajax image-uploading

【解决方案1】：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Upload Iamge</title>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#but_upload").click(function(){
                    var fd = new FormData();
                    //following  code is working fine in for single image upload
                    // var files = $('#file')[0].files[0]; 
                    // fd.append('file',files);

                    //this code not working for multiple image upload           
                    var names = [];
                    var file_data = $('input[type="file"]')[0].files; 
                    // for multiple files
                    for(var i = 0;i<file_data.length;i++){
                        fd.append("file_"+i, file_data[i]);
                    }
                    fd.append('file[]',names);

                    /*var ins = document.getElementById('file').files.length;
                    for (var x = 0; x <ins; x++) {
                        fd.append("file", document.getElementById('file').files[x]);
                    }*/

                    $.ajax({
                        url:'upload.php',
                        type:'post',
                        data:fd,
                        contentType: false,
                        processData: false,
                        success:function(response){
                            if(response != 0){
                                $("#img").attr("src",response);
                            }
                        },
                        error:function(response){
                            alert('error : ' + JSON.stringify(response));
                        }
                    });
                });
            });
        </script>
    </head>

    //HTML Part

    <body>
        <div class="container">
            <h1>AJAX File upload</h1>
            <form method="post" action=""  id="myform">
                <div>
                    <img src="" id="img" width="100" height="100">
                </div>
                <div>
                    <input type="file" id="file" name="file"  multiple="multiple" />
                    <input type="button" class="button" value="Upload" 
        id="but_upload">
                </div>
            </form>
        </div>
    </body>
</html>

已对以下代码进行了更改

var file_data = $('input[type="file"]')[0].files; // for multiple files
    for(var i = 0;i<file_data.length;i++){
    fd.append("file_"+i, file_data[i]);
}
fd.append('file[]',names);

而且PHP代码也有变化

<?php
/* Getting file name */
//without loop working fine

    $count = count($_FILES);
    for ($i = 0; $i < $count; $i++) {
        $filename = $_FILES['file_'.$i];
        /* Location */
        echo $location = "upload/".$filename['name'];
        /* Upload file */
        if(move_uploaded_file($filename['tmp_name'],$location)){
            echo $location;
        } else {
            echo 0;
    }
}
?>

文件数和文件名以不同的方式传递，因此我根据需要进行了更改，而不是 if 提供文件数组，如 $_FILE['file_0']、$_FILE['file_1'] 等等，我也更改了权限上传目录请检查您的目录是否具有读写权限（777），此代码适用于我，您可以尝试我希望它也适用于您:-)

【讨论】：

有什么错误什么的，使用error_reporting(-1); ini_set("display_errors", true) 在您的 php 页面中并在控制台中检查错误

【解决方案2】：

在循环中，您需要添加特定文件的index

move_uploaded_file($_FILES['file']['tmp_name'][$i],$location); // $i is index

【讨论】：