从多个输入文件中删除一个图像

Question

我正努力在服务器端更新图片，这样我就会在将（不使用ajax）更新到服务器端之前尝试显示该图片的预览（Spring MVC）。

问题在于我无法删除我想删除的图片。它会删除预览但值仍然在输入文件中。

$(inputFileID).val('')清除所有输入文件。

那么有没有办法在不使用ajax的情况下解决这个问题？

这是我的代码：

＆＃13;

＆＃13;

document.getElementById('fileButton').onclick = function() {
    document.getElementById('files').click();
};
$(document).ready(function() {
	var filesToUpload =[];
	  if (window.File && window.FileList && window.FileReader) {
		
	    $("#files").on("change", function(e) {
	      var files = e.target.files,
	           filesLength = files.length;
	   
	      for (var i = 0; i < filesLength; i++) {
	        var f = files[i]
	   
	        filesToUpload.push(files[i].name);
	       
	        var fileReader = new FileReader();
	        fileReader.onload = (function(e) {
	          var file = e.target;
	      
	          $("<span class=\"pip\">" +
	            "<img class=\"imageThumb\" id=\"image"+i+"\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
	            "<br/><span id=\""+i+"\" class=\"remove\">X</span>" +
	            "</span>").insertAfter("#files");
	          
	           $(".remove").click(function(){
            $(this).parent(".pip").remove();
            $("#files").val('');
       });
       });
	        fileReader.readAsDataURL(f);
	   
	      }
	    });
	  } else {
	    // 
	  }
	});

＆＃13;

#files {
	display: none;
}

.imageThumb {
	max-height: 150px;
	border: 2px solid;
	padding: 1px;
	cursor: pointer;
}

.pip {
	display: inline-block;
	margin: 10px 10px 0 0;
}

.remove {
	font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto,
		Helvetica Neue, sans-serif !important;
	font-size: 18px !important;
	display: block;
	background: #444;
	border: 1px solid black;
	color: white;
	text-align: center;
	cursor: pointer;
}

.remove:hover {
	background: white;
	color: #000 !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="picturePreview" style="text-align: center;">
			<button class='btn pictureBtn' id="fileButton">AJOUTER DES
				PHOTOS</button>

			<div class="field" align="center">
				<input  type="file" id="files"
					name="files[]" multiple="multiple" accept="image/*" />
			</div>
		</div>

＆＃13;

＆＃13;

＆＃13;