Question

我正在尝试在提交之前上传和预览图像，直到现在我能够选择多个图像并在提交之前预览它们。现在我遇到了一些问题。列出如下：

当我点击“x”按钮删除图像时，它只删除预览而不删除所选图像。
如果我为前两次选择相同的图像。 abc.jpg，def.jpg，hij.jpg，abc.jpg然后删除一个abc.jpg也删掉了另一个abc.jpg
图像未根据选择编制索引。简单来说，如果我选择hij.jpg 1st然后abc.jpg second然后def.jpg在第三个位置，那么它应该分别连续索引为1,2,3。
验证图片扩展名。仅像JPG一样，可以上传JPEG，PNG和GIF文件。

我试图尽可能清楚。以下是我正在使用的代码。

HTML：

<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="newstatus" runat="server">
    <div style="display: inline-flex">
    <div style="width: 160px">
      <input type="file" name="images[]" id="file-5" class="inputfile inputfile-4" data-multiple-caption="{count} files selected" multiple />
      <label for="file-5"> 
      <span style="display: none;">Choose a file&hellip;</span></label>
      </div>
      <input type="submit" name="post" value="Post" class="post-btn" id="submit" />
    </div>
    <div style="clear:both;"></div>
    <div id="imgs"></div>
  </form>

jQuery：

$(document).ready(function(){
     $("#file-5").on('change',function() {
     var fileList = this.files;
     for(var i = 0; i < fileList.length; i++){
          var t = window.URL || window.webkitURL;
          var objectUrl = t.createObjectURL(fileList[i]);
          $('.removeimg').fadeIn();
          $('#imgs').append('<span class="img_'+i+'" onclick="del('+i+')" style="cursor:pointer; margin-right: 3px;"><b>x</b></span><img class="img_'+i+'" src="' + objectUrl + '" width="150" height="150" style="margin-right: 3px;">');
          j = i+1;
          if(j % 3 == 0)
          {
            $('#imgs').append('<br>');
          }
        }
    });
});

// To Remove Image (but its only removing the preview and not the image)
function del(i){ 
    $('.img_'+i).fadeOut("slow", function() { $('.img_'+i).remove();});
}

提前致谢！

使用jQuery

0 个答案: