Question

使用纯php + html，我可以使用

上传多个文件

<form action="upload.php" enctype="multipart/form-data" method="post">
<input type="file" name="raw[]" id ="raw" multiple> 
<input type ="submit" id="uplbutton"></p>
</form>

但上传文件需要60多秒。我想使用ajax动态地将文件上传到服务器（？），所以在这里尝试使用source： https://wpcafe.org/hacks/ajax-zagruzka-faylov-na-server-s-pomoshhyu-jquery/ 它确实将文件上传到目的地，但我甚至无法选择多个文件。是否有可能使用这种方法？

Answer 1

您可以尝试使用此代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<form method="post" id="postfrom" enctype="multipart/form-data">
        <input type="file" name="file[]" id="file" class="inputfile" multiple/>
</form>

<button type="button" class="btnb btnb-primary" id="submitpost"><i class="fa fa-paper-plane-o" aria-hidden="true"></i>&nbsp;Submit</button>


 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

 <script>

$(document).on("click", "#submitpost", function(){
    $("#postfrom").submit();
});


$("#postfrom").on('submit', function(e){
    e.preventDefault();
    $.ajax({
         url : "process.php",
         type: "POST",
         cache: false,
         contentType: false,
         processData: false,
         data : new FormData(this),
         success: function(response){
            $('.result').html(response);
            alert(response);

         },
        error: function (request, status, error) {
            alert(request.responseText);
        }
    });
});

 </script>

</body>
</html>

Inside process.php。

<?php

print_r($_FILES);

?>

这将警告响应，即$_FILE数组，然后您可以替换alert()并替换print_r并使用它将所选文件上传到您的服务器php 1}}。

Answer 2

对于这样的html输入文件：

<input type="file" name="raw[]" id ="raw" multiple>
<input type ="submit" value="Upload!" name ="submit" id="submit">

下面的ajax脚本运行正常。

  

<script>
  (function($){
      var files;
      $('input[type=file]').change(function(){files = this.files;});
      $('#submit').click(function (event){
          var data = new FormData();
          $.each(files, function(key, value){data.append(key, value);});
          $.ajax({
              url:'./submit.php?uploadfiles',
              type: 'POST',
              data: data,
              cache: false,
              dataType: 'json',
              processData: false,
              contentType: false,
              success: function(respond, textStatus, jqXHR){
                  if(typeof respond.error!==undefined){
                      var files_path=respond.files;
                      var html='';
                      $.each(files_path, function(key,val){html+=val+'</br>';})
                      $('.ajax-respond').html(html);
                  } else {console.log('Server side error'+respond.error);}
              }, 
              error: function(jqXHR, textStatus, errorThrown) {
                  console.log('ajax request error'+textStatus);
              }
          });
      });

  })(jQuery)
  </script>

请务必小心$.ajax属性。

如何使用ajax + jquery将多个文件上传到服务器？

2 个答案: