嗨,我使用此脚本上传多个文件“图像” 我想在按下删除按钮并同时删除其图像标签时从输入文件中删除特定图像
<form method='post' enctype='multipart/form-data'>
<div class="form-group panel panel-primary" >
<div class="panel-heading ">
<label > المرفقات </label>
</div>
<div class="panel-body">
<div class="upload-btn-wrapper col-xs-8" >
<div class="btn2 btn-lg btn-success btn-block">
اضغط هنا لتحميل مستند
</div>
<input type="file" name="img_file" id="img_file" class="form-control input-lg block" onchange="loadFile(event)" />
</div>
<div class="upload-btn-wrapper col-xs-4" >
<div class="btn2 btn-lg btn-danger btn-block del" onclick="clear_all();">
حذف الصور
</div>
</div>
<div class="col-lg-12"> </br></div>
<div class="img-responsive" id="base_parent"></div>
</div>
</div>
</form>
和js
var loadFile = function(event) {
var div = document.getElementById('base_parent');
var root = document.createElement("div");
root.setattribute("class","col-lg-3 col-xs-6 contain" );
var node = document.createElement("IMG");
node.setattribute("height","30%" );
node.setattribute("width","100%" );
var btn = document.createElement("BUTTON");
btn.setattribute("class","rm_btn btn btn-lg btn-danger" );
btn.innerHTML="حذف";
root.appendChild(node);
root.appendChild(btn);
node.src = URL.createObjectURL(event.target.files[0]);
document.getElementById("base_parent").appendChild(root);
};
此脚本在代码笔上 demo 变得更容易理解