The function of this code, the preview image is displayed after selecting the file. Also internally, each key and value is inserted into the FileList object. Each image displayed as a preview has a delete button. So, when you press it, the image disappears from the screen, and internally, I want to delete the corresponding key and value from the FileList object. I knew that I could delete from Object, like a " delete Object.key ; " However, in this case, this does not work effectively. Perhaps there are other different solutions to it. Please let me know if you know if
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<style>
.thumb {
height: 75px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
</style>
<form id='form' action="data.php" method="post" enctype="multipart/form-data">
<input type="file" id="files" name="files[]" multiple />
<button class="show">Butoon</button>
</form>
<output id="list"></output>
<script>
$('output').on('click','.del',function(){
var id = $(this).prev().attr('id');
id = id.split("_");
id= id[1];
var x = document.getElementById("files").files;
if(id in x) {
delete x[' + id + ']; //This line is a problem.
}
console.dir(x);
$(this).parent().replaceWith();
});
function handleFileSelect(evt) {
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, num) {
return function(e) {
var span = document.createElement('span');
span.innerHTML = ['<div class="view"><img id ="img_' + num + ' " class="thumb" src="', e.target.result,
'" title="', escape(theFile.name), '"/><div class="del">×</div></div>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f, i);
reader.readAsDataURL(f);
}
console.dir(files);
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
</body>
</html>
