多图像上传无效

时间:2017-01-31 14:09:07

标签: javascript php html

我想一次上传多张图片但不起作用。它仅上传所选的第一个图像。我不知道下面的代码有什么问题。我添加了javascript标记

upload.php的

if (isset($_POST['upload'])) {
  $j = 0; // Variable for indexing uploaded image.
  $target_path = "uploads/"; // Declaring Path for uploaded images.
  for ($i = 0; $i < count($_FILES['file']['name']); $i++) {

    // Loop to get individual element from the array

    $validextensions = array(
      "jpeg",
      "jpg",
      "png"
    ); // Extensions which are allowed.
    $ext = explode('.', basename($_FILES['file']['name'][$i])); // Explode file name from dot(.)
    $file_extension = end($ext); // Store extensions in the variable.
    $target_path = $target_path.md5(uniqid()).
    ".".$ext[count($ext) - 1]; // Set the target path with a new name of image.
    $j = $j + 1; // Increment the number of uploaded images according to the files in array.
    if (($_FILES["file"]["size"][$i] < 10000000) // Approx. 10MB files can be uploaded.
      && in_array($file_extension, $validextensions)) {
      if (move_uploaded_file($_FILES['file']['tmp_name'][$i], $target_path)) {

        // If file moved to uploads folder.

        echo $j.
        ').<span id="noerror">Image uploaded successfully!.</span><br/><br/>';
      } else { //  If File Was Not Moved.
        echo $j.
        ').<span id="error">please try again!.</span><br/><br/>';
      }
    } else { //   If File Size And File Type Was Incorrect.
      echo $j.
      ').<span id="error">***Invalid file Size or Type***</span><br/><br/>';
    }
  }
}

的index.php

<html>
<head>
  <script type="text/JavaScript" src="js/script.js"></script>
</head>
<body>
  <form method="post" action="upload.php">
    <div id="filediv">
      <input type="file" id="file" name="file[]">
    </div>
    <br>
    <input type="button" id="add_more" class="btn btn-primary" value="Add More Images" />
    <input name="upload" id="upload" type="submit" value="Upload">
  </form>
</body>
</html>

的script.js

var abc = 0; // Declaring and defining global increment variable.
$(document).ready(function() {
  //  To add new input file field dynamically, on click of "Add More Files" button below function will be executed.
  $('#add_more').click(function() {
    $(this).before($("<div/>", {
      id: 'filediv'
    }).fadeIn('slow').append($("<input/>", {
      name: 'file[]',
      type: 'file',
      id: 'file'
    }), $("<br/>")));
  });
  // Following function will executes on change event of file input to select different file.
  $('body').on('change', '#file', function() {
    if (this.files && this.files[0]) {
      abc += 1; // Incrementing global variable by 1.
      var z = abc - 1;
      var x = $(this).parent().find('#previewimg' + z).remove();
      $(this).before("<div id='abcd" + abc + "' class='abcd'><img id='previewimg" + abc + "' src=''/></div>");
      var reader = new FileReader();
      reader.onload = imageIsLoaded;
      reader.readAsDataURL(this.files[0]);
      $(this).hide();
      $("#abcd" + abc).append($("<img/>", {
        id: 'img',
        src: 'images/x.png',
        alt: 'delete'
      }).click(function() {
        $(this).parent().parent().remove();
      }));
    }
  });
  // To Preview Image
  function imageIsLoaded(e) {
    $('#previewimg' + abc).attr('src', e.target.result);
  };
  $('#upload').click(function(e) {
    var name = $(":file").val();
    if (!name) {
      alert("First Image Must Be Selected");
      e.preventDefault();
    }
  });
});

1 个答案:

答案 0 :(得分:1)

你应该在循环中声明计数($ _ FILES ['file'] ['name'])。你已经宣布了外面的

$count = count($_FILES['file']['name']);
for ($i = 0; $i < $count; $i++) {
    // your code come here
}