如何使用 ajax php 和 jquery 将多张图片上传到一个文件夹

Question

我正在尝试使用 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;
    }
}
?>

Answer 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;
    }
}
?>

文件数和文件名以不同的方式出现，所以我根据需要进行了更改，而不是如果给出文件数组，如 $_FILE['file_0']、$_FILE['file_1'] 等等，我也更改了上传目录的权限请检查你的目录是否有读写权限（777），这段代码对我有用你可以试试我希望它也对你有用:- )

Answer 2

在循环中你需要添加特定文件index

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

如何使用 ajax php 和 jquery 将多张图片上传到一个文件夹

How to upload multiple images to a folder using ajax php and jquery

php

ajax

jquery

json

image-uploading