简体   繁体   中英

Can't upload multiple files with different extension?

Multiple file upload is not working if all files are not the same extension !! If I chose two png files , it works . But choosing two different file extensions (png,pdf) got empty array in $_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); ?>

Result image

在此处输入图片说明

在此处输入图片说明 Hope to help you.

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>

I think you can use following code :-

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM