php - 无法上传多个不同扩展名的文件？ - Thinbug

无法上传多个不同扩展名的文件？

时间：2018-02-15 05:27:49

标签： php jquery ajax

如果所有文件的扩展名不同，则多文件上传无效!!如果我选择了两个png文件，它就可以了。但是选择两个不同的文件扩展名（png，pdf）在$_FILES中得到了空数组！

的index.php

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" > </script>
</head>

<body>
  <form>
      <input name="file[]" type="file" multiple/>
      <input type="button" value="Upload" />
  </form>
  <progress></progress>
  <script>
$(':button').on('click', function() {
$.ajax({
  // Your server script to process the upload
  url: 'upload.php',
  type: 'POST',

  // Form data
  data: new FormData($('form')[0]),

  // Tell jQuery not to process data or worry about content-type
  // You *must* include these options!
  cache: false,
  contentType: false,
  processData: false,

  // Custom XMLHttpRequest
  xhr: function() {
      var myXhr = $.ajaxSettings.xhr();
      if (myXhr.upload) {
          // For handling the progress of the upload
          myXhr.upload.addEventListener('progress', function(e) {
              if (e.lengthComputable) {
                  $('progress').attr({
                      value: e.loaded,
                      max: e.total,
                  });
              }
          } , false);
      }
      return myXhr;
  },
});
});
  </script>
</body>
</html>

upload.php的

<?php var_dump($_FILES); ?>

结果图片

2 个答案:

答案 0 :(得分：1)

希望能帮到你。

demo.php

<?php
  if(isset($_FILES)&&!empty($_FILES)){
      for($i=0;$i<count($_FILES);$i++){
          echo "File ".($i+1)." is ".$_FILES["file-".$i]['name']."\n";
      }
      die;
  }
?>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Updated part
jQuery.each(jQuery('#file')[0].files, function(i, file) {
    data.append('file-'+i, file);
});

// Full Ajax request
$(".update").click(function(e) {
    // Stops the form from reloading
    e.preventDefault();

        $.ajax({
        url: 'demo.php',
        type: 'POST',
        contentType:false,
        processData: false,
        data: function(){
            var data = new FormData();
            jQuery.each(jQuery('#file')[0].files, function(i, file) {
                data.append('file-'+i, file);
            });
            return data;
        }(),
            success: function(result) {
            alert(result);
            },
        error: function(xhr, result, errorThrown){
            alert('Request failed.');
        }
        });
});
});
</script>
</head>
<body>
<form enctype="multipart/form-data" method="post">
  <input id="file" name="file[]" type="file"  multiple/>
  <input class="update" type="submit" />
</form>
<body>
</html>

答案 1 :(得分：0)

我认为您可以使用以下代码： -

<button id="upload">Upload</button>
    <script type="text/javascript">
                $(document).ready(function (e) {
                    $('#upload').on('click', function () {
                        var form_data = new FormData();
                        var ins = document.getElementById('multiFiles').files.length;
                        for (var x = 0; x < ins; x++) {
                            form_data.append("files[]", document.getElementById('multiFiles').files[x]);
                        }
                        $.ajax({
                            url: 'uploads.php', // point to server-side PHP script 
                            dataType: 'text', // what to expect back from the PHP script
                            cache: false,
                            contentType: false,
                            processData: false,
                            data: form_data,
                            type: 'post',
                            success: function (response) {
                                $('#msg').html(response); // display success response from the PHP script
                            },
                            error: function (response) {
                                $('#msg').html(response); // display error response from the PHP script
                            }
                        });
                    });
                });
            </script>