使用PHP和JQuery上传多个文件

Question

使用PHP和JQuery上传多个文件

3

最近我一直在尝试学习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';
        }   
    }// 

?>

非常感谢您的帮助。

- Helen Neely

你可能需要查看一下jQuery插件来处理上传，因为它不像在AJAX调用中仅传递文件名那么简单。在这里查看一些选项http://www.sitepoint.com/jquery-file-upload-plugins/ - Mike Brant

@MikeBrant - 它可以工作 - 只是它正在上传所选/上传文件列表中的最后一个文件。 - Helen Neely

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alexander Ceballos · Accepted Answer

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'];
        }
    }
?>