使用 PHP 和 JQuery 上传多个文件答案

【问题标题】：Upload Multiple Files with PHP and JQuery使用 PHP 和 JQuery 上传多个文件
【发布时间】：2014-06-11 16:30:45
【问题描述】：

我最近一直在尝试 PHP，到目前为止一切顺利，直到我碰壁了。这是我拥有的一小段代码。它允许我上传单个文件，但我想要的是能够上传多个文件。

这是 PHP 和 HTML 文件：

<html>
<head>
  <meta charset="utf-8" />
  <title>Ajax upload form</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

    function sendfile(){
        var fd = new FormData();  

        for (var i = 0, len = document.getElementById('myfile').files.length; i < len; i++) {
            fd.append("myfile", document.getElementById('myfile').files[i]);                
        }

        $.ajax({
          url: 'uploadfile.php',
          data: fd,
          processData: false,
          contentType: false,
          type: 'POST',      
          success: function(data){
            alert(data);
          }
        });         
    }
  </script>

</head>
<body>
    <form action="uploadfile.php" method="post" enctype="multipart/form-data" id="form-id">

    <p><input id="myfile" type="file" name="myfile" multiple=multiple/>
    <input type="button" name="upload" id="upload" value="Upload" onclick="sendfile()" id="upload-button-id"  /></p>
    </form>
</body>
</html>

还有 PHP 文件：

<?php

    $target = "uploadfolder/"; 
    //for($i=0; $i <count($_FILES['myfile']['name']); $i++){
        if(move_uploaded_file($_FILES['myfile']['tmp_name'], $target.$_FILES['myfile']['name'])) { 
            echo 'Successfully copied'; 

        }else{       
            echo 'Sorry, could not copy';
        }   
    }// 

?>

任何帮助将不胜感激。

【问题讨论】：

您可能想研究一个 jQuery 插件来处理您的上传，因为它不像在 AJAX 调用中传递文件名那么简单。在这里查看一些选项sitepoint.com/jquery-file-upload-plugins
@MikeBrant - 它有效 - 只是它正在上传所选/上传文件列表中的最后一个文件。

标签： php jquery ajax

【解决方案1】：

Index.html

<html>
    <head>
        <title>Load files</title>
        <script src="jquery.min.js"></script>
        <script type="text/javascript">

            $(document).ready(function() {
                $('#myfiles').on("change", function() {
                    var myfiles = document.getElementById("myfiles");
                    var files = myfiles.files;
                    var data = new FormData();

                    for (i = 0; i < files.length; i++) {
                        data.append('file' + i, files[i]);
                    }

                    $.ajax({
                        url: 'load.php', 
                        type: 'POST',
                        contentType: false,
                        data: data,
                        processData: false,
                        cache: false
                    }).done(function(msg) {
                        $("#loadedfiles").append(msg);
                    });
                });



            });
        </script>
    </head>
    <body>

        <div id="upload">
            <div class="fileContainer">
                <input id="myfiles" type="file" name="myfiles[]" multiple="multiple" />
            </div>
        </div>
        <div id="loadedfiles">

        </div>
    </body>
</html>

load.php

<?php
    $path="myfiles/";//server path
    foreach ($_FILES as $key) {
        if($key['error'] == UPLOAD_ERR_OK ){
            $name = $key['name'];
            $temp = $key['tmp_name'];
            $size= ($key['size'] / 1000)."Kb";
            move_uploaded_file($temp, $path . $name);
            echo "
                <div>
                    <h12><strong>File Name: $name</strong></h2><br />
                    <h12><strong>Size: $size</strong></h2><br />
                    <hr>
                </div>
                ";
        }else{
            echo $key['error'];
        }
    }
?>

【讨论】：

感谢您的代码，将对其进行测试并报告。
你的代码运行得非常好——你应该得到一个大的绿色复选标记:)
如果我有多个输入文件标签（lowRes、mediumRes、highRes）如何上传？？ ....这里它只添加我要添加的最后一个文件
来源：lax-soft.tk/index.php/programacion/php-y-jquery/…