使用 PHP 和 JQuery 上传多个文件 [英] Upload Multiple Files with PHP and JQuery

查看：26 发布时间：2021/12/3 12:21:18 php jquery ajax

本文介绍了使用 PHP 和 JQuery 上传多个文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我最近一直在尝试 PHP，到目前为止一切都很好，直到我遇到了砖墙.这是我拥有的一小段代码.它允许我上传单个文件，但我想要的是能够上传多个文件.

这是 PHP 和 HTML 文件:

<头><meta charset="utf-8"/><title>Ajax 上传表单</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">函数发送文件(){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: '上传文件.php',数据:fd，过程数据:假，内容类型:假，类型:'POST'，成功:功能(数据){警报(数据)；}});}<身体><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></表单>

和 PHP 文件:

任何帮助将不胜感激.

解决方案

Index.html

<头><title>加载文件</title><script src="jquery.min.js"></script><script type="text/javascript">$(document).ready(function() {$('#myfiles').on("change", function() {var myfiles = document.getElementById("myfiles");var 文件 = myfiles.files;var data = new FormData();for (i = 0; i <身体><div id="上传"><div class="fileContainer"><input id="myfiles" type="file" name="myfiles[]" multiple="multiple"/>

<div id="加载文件">

load.php

"；}别的{回声 $key['错误'];}}?>

I have been trying my hands on PHP lately, so far so good until I hit a brick wall. Here's a little piece of code that I have. It's allowing me to upload a single file, but what I want is to be able to upload multiple files.

Here's the PHP and HTML files:

<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>

And the PHP file:

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

?>

Any help would be highly appreciated.

解决方案

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

这篇关于使用 PHP 和 JQuery 上传多个文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

使用 PHP 和 JQuery 上传多个文件 [英] Upload Multiple Files with PHP and JQuery

问题描述

相关文章

PHP最新文章

热门教程

热门工具

登录关闭

使用 PHP 和 JQuery 上传多个文件 [英] Upload Multiple Files with PHP and JQuery

问题描述

相关文章

PHP最新文章

热门教程

热门工具

登录 关闭

登录关闭