上传预览脚本问题

Question

我的上传预览脚本有问题，我找不到。每当我点击上传图片按钮和 select 例如一次点击 3 张图片时，它会毫无错误地上传所有图片到我的数据库。但是当我一张一张地选择图片时，它只是将一张图片上传到我的数据库。

我尝试使用 echo count($_files) 和退出函数对其进行测试，显然 php 部分没有问题。

var count = 0;

function handleFileSelect(evt) {
  var $fileUpload = $("input#Photofile[type='file']");
  count = count + parseInt($fileUpload.get(0).files.length);

  if (parseInt($fileUpload.get(0).files.length) > 4 || count > 3) {
    alert("You can only upload a maximum of 3 photos");
    count = count - parseInt($fileUpload.get(0).files.length);
    evt.preventDefault();
    evt.stopPropagation();
    return false;
  }
  var files = evt.target.files;
  for (var i = 0, f; f = files[i]; i++) {
    if (!f.type.match('image.*')) {
      continue;
    }
    var reader = new FileReader();

    reader.onload = (function(theFile) {
      return function(e) {
        var span = document.createElement('span');
        span.innerHTML = ['<img class="thumb mrm mts" src="', e.target.result, '" title="', escape(theFile.name), '"/><span class="remove_img_preview"></span>'].join('');
        document.getElementById('list').insertBefore(span, null);
      };
    })(f);

    reader.readAsDataURL(f);
  }
}

$('#Photofile').change(function(evt) {
  handleFileSelect(evt);
});

$('#list').on('click', '.remove_img_preview', function() {
  $(this).parent('span').remove();

  //this is not working...
  var i = array.indexOf($(this));
  if (i != -1) {
    array.splice(i, 1);
  }
  // tried this too:
  //$(this).parent('span').splice( 1, 1 );

  count--;
});

form .post-image-collection {
  margin: -20px 0px 0px -20px;
  overflow: hidden;
}

form .post-image {
  position: relative;
  float: left;
  height: 152px;
  width: 170px;
  background: #f2f2f2;
  border: 1px dashed #ccc;
  padding: 0;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
}

.mrm {
  margin-right: 20px;
}

.mts {
  margin-top: 10px;
}

form .post-image img {
  max-width: 80px;
  max-height: 80px;
  width: auto;
  height: auto;
  vertical-align: top;
  border-radius: 3px;
  overflow: hidden;
}

form .post-image .icon-camera {
  display: none;
}

form .post-image input {
  position: absolute;
  z-index: 2;
  opacity: 0;
  width: 100%;
  height: 100%;
}

form .post-image.empty {
  position: relative;
  float: left;
  height: 130px;
  width: 130px;
  background: #f2f2f2;
  border: 1px dashed #ccc;
  padding: 0;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  vertical-align: top;
}

form .post-image.empty .icon-camera {
  display: block;
  height: 30px;
  line-height: 30px;
  left: 40%;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 30px;
  cursor: inherit;
  margin: -15px 0px 0px -15px;
}

form .post-image.empty .icon-camera img {
  height: 60px;
  width: 60px;
}

form .post-image.empty input {
  cursor: pointer;
}

form .post-image p,
.file_container-orange p {
  margin: 10px 0;
  margin: 1rem 0;
  text-align: center;
  font-family: "OpenSansSemiBold", sans-serif;
}

.uppercase {
  text-transform: uppercase;
}

#list {
  float: left;
}

.thumb {
  height: 130px;
  width: 130px;
  margin-right: 20px;
  margin-top: 10px;
}

.remove_img_preview {
  position: relative;
  top: -46px;
  right: 40px;
  font-size: 20px;
  line-height: 1;
  padding: 4px 6px;
  background: white;
  border-radius: 0px 0px 0px 3px;
  text-align: center;
  cursor: pointer;
}

.remove_img_preview:before {
  content: "×";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="row row-images">
    <label for="image">Images*</label>
    <div class="column image_container">
      <div class="post-image-collection">
        <label id="list"></label>
        <label class="post-image post-image-placeholder mrm mts empty">
          <input type="file" id="Photofile" name="images[]" required="required" multiple />
          <span class="icon-camera"><img src="https://cdn.onlinewebfonts.com/svg/img_134042.png"></span>
          <p class="uppercase">Photo</p>
        </label>
      </div>
    </div>
</form>

有人可以检查我的脚本并告诉我可能是什么问题吗？

Answer 1

这样的事情可能会奏效（我没有更正图像删除部分，它继续像以前一样引发异常，我只是处理文件上传部分）。

请注意，在服务器端，您可能会收到各种 $_FILE 输入，名为 images_X（X 是从 1 开始的任何数字），每个输入都有零个或多个图像。

var count = 0;

function addPhotoSelector() {
  // Hide the current image selectors
  $('.post-image.post-image-placeholder').hide();
  // Update the number of image selectors
  var $num_images = $("#imagenum");
  var num_images = $num_images.val()+1;
  $num_images.val(num_images);
  // Add a new image selector
  $('<label class="post-image post-image-placeholder mrm mts empty">'
        +'<input type="file" class="photo_upload" id="Photofile_' + num_images + '" name="images_' + num_images + '[]" multiple />'
          +'<span class="icon-camera"><img src="https://cdn.onlinewebfonts.com/svg/img_134042.png"></span>'
          +'<p class="uppercase">Photo</p>'
        +'</label>').appendTo('.post-image-collection');
}

function handleFileSelect(evt) {
  var num_images = $("#imagenum").val();
  var $fileUpload = $("input#Photofile_" + num_images +"[type='file']");
  count = count + parseInt($fileUpload.get(0).files.length);

  if (parseInt($fileUpload.get(0).files.length) > 4 || count > 3) {
    alert("You can only upload a maximum of 3 photos");
    count = count - parseInt($fileUpload.get(0).files.length);
    evt.preventDefault();
    evt.stopPropagation();
    return false;
  }
  var files = evt.target.files;
  for (var i = 0, f; f = files[i]; i++) {
    if (!f.type.match('image.*')) {
      continue;
    }
    var reader = new FileReader();

    reader.onload = (function(theFile) {
      return function(e) {
        var span = document.createElement('span');
        span.innerHTML = ['<img class="thumb mrm mts" src="', e.target.result, '" title="', escape(theFile.name), '"/><span class="remove_img_preview"></span>'].join('');
        document.getElementById('list').insertBefore(span, null);
      };
    })(f);

    reader.readAsDataURL(f);
  }
}

// Apply the change event even for future inputs added dinamically (by JavaScript)
$(document).change('.photo_upload', function(evt) {
  handleFileSelect(evt);
});

$('#list').on('click', '.remove_img_preview', function() {
  $(this).parent('span').remove();

  //this is not working...
  var i = array.indexOf($(this));
  if (i != -1) {
    array.splice(i, 1);
  }
  // tried this too:
  //$(this).parent('span').splice( 1, 1 );

  count--;
});

$(function() {
  // Add the first image selector
  addPhotoSelector();
});

form .post-image-collection {
  margin: -20px 0px 0px -20px;
  overflow: hidden;
}

form .post-image {
  position: relative;
  float: left;
  height: 152px;
  width: 170px;
  background: #f2f2f2;
  border: 1px dashed #ccc;
  padding: 0;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
}

.mrm {
  margin-right: 20px;
}

.mts {
  margin-top: 10px;
}

form .post-image img {
  max-width: 80px;
  max-height: 80px;
  width: auto;
  height: auto;
  vertical-align: top;
  border-radius: 3px;
  overflow: hidden;
}

form .post-image .icon-camera {
  display: none;
}

form .post-image input {
  position: absolute;
  z-index: 2;
  opacity: 0;
  width: 100%;
  height: 100%;
}

form .post-image.empty {
  position: relative;
  float: left;
  height: 130px;
  width: 130px;
  background: #f2f2f2;
  border: 1px dashed #ccc;
  padding: 0;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  vertical-align: top;
}

form .post-image.empty .icon-camera {
  display: block;
  height: 30px;
  line-height: 30px;
  left: 40%;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 30px;
  cursor: inherit;
  margin: -15px 0px 0px -15px;
}

form .post-image.empty .icon-camera img {
  height: 60px;
  width: 60px;
}

form .post-image.empty input {
  cursor: pointer;
}

form .post-image p,
.file_container-orange p {
  margin: 10px 0;
  margin: 1rem 0;
  text-align: center;
  font-family: "OpenSansSemiBold", sans-serif;
}

.uppercase {
  text-transform: uppercase;
}

#list {
  float: left;
}

.thumb {
  height: 130px;
  width: 130px;
  margin-right: 20px;
  margin-top: 10px;
}

.remove_img_preview {
  position: relative;
  top: -46px;
  right: 40px;
  font-size: 20px;
  line-height: 1;
  padding: 4px 6px;
  background: white;
  border-radius: 0px 0px 0px 3px;
  text-align: center;
  cursor: pointer;
}

.remove_img_preview:before {
  content: "×";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="row row-images">
    <label for="image">Images*</label>
    <div class="column image_container">
      <input type="hidden" id="imagenum" name="num_images" value="0" />
      <div class="post-image-collection">
        <label id="list"></label>
        <!-- The contents here will be filled by JavaScript -->
      </div>
    </div>
</form>

上传预览脚本问题

Upload Preview Script Issue

javascript

jquery

jquery-file-upload