1
我有一个非常简单的表单，可以让用户上传图像。它取代了图像占位符格为这里看到：https://jsfiddle.net/309zewwd/将“删除”图标添加到文件上传字段
是否有可能当一个文件是在地方，我可以有一个删除图标右上角取消该文件？
$("input[type='file']").on("change", function(event1) {
src1 = URL.createObjectURL(event1.target.files[0]);
this.parentNode.parentNode.querySelector("label").style.backgroundImage = 'url(' + src1 + ')';
this.parentNode.parentNode.querySelector("label span").style.display = 'none';
});.form-file-upload-container {
float: left;
width: 100%;
margin-bottom: 12px;
margin-top: 12px;
}
@media (min-width: 640px) {
.form-file-upload-container {
margin-bottom: 20px;
margin-top: 20px
}
}
.form-file-upload {
position: relative;
float: left;
width: 48.5%;
height: auto;
margin-right: 3%;
margin-bottom: 3%;
}
@media (min-width: 450px) {
.form-file-upload {
width: 31.3333%
}
}
@media (min-width: 750px) {
.form-file-upload {
width: 22.75%
}
}
@media (min-width: 1600px) {
.form-file-upload {
width: 14.1666667%;
margin-right: 2%
}
}
.form-file-upload:nth-child(2n) {
margin-right: 0
}
@media (min-width: 450px) {
.form-file-upload:nth-child(2n) {
margin-right: 3%
}
}
@media (min-width: 1600px) {
.form-file-upload:nth-child(2n) {
margin-right: 2%
}
}
@media (min-width: 450px) {
.form-file-upload:nth-child(3n) {
margin-right: 0
}
}
@media (min-width: 750px) {
.form-file-upload:nth-child(3n) {
margin-right: 3%
}
}
@media (min-width: 1600px) {
.form-file-upload:nth-child(3n) {
margin-right: 2%
}
}
@media (min-width: 750px) {
.form-file-upload:nth-child(4n) {
margin-right: 0
}
}
@media (min-width: 1600px) {
.form-file-upload:nth-child(4n) {
margin-right: 2%
}
}
@media (min-width: 1600px) {
.form-file-upload:nth-child(6n) {
margin-right: 0
}
}
.form-file-upload-inner {
width: 100%;
height: 0;
padding-top: 133.33333%
}
.form-file-upload label {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
z-index: 2;
cursor: pointer;
border: 1px solid #AFAFB4;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: #AFAFB4;
-webkit-transition: background 0.2s ease, border 0.2s ease;
-moz-transition: background 0.2s ease, border 0.2s ease;
-o-transition: background 0.2s ease, border 0.2s ease;
transition: background 0.2s ease, border 0.2s ease
}
.form-file-upload span {
position: absolute;
top: 50%;
left: 0;
width: 100%;
font-size: 15px;
text-align: center;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%)
}
.form-file-upload span:before {
content: '';
background: url(../img/image-upload-icon.png) no-repeat center center #fff;
background: url(../img/image-upload-icon.svg) no-repeat center center #fff;
background-size: 65px 56px;
display: block;
width: 65px;
height: 56px;
margin: 0 auto;
margin-bottom: 5px
}
.form-file-upload input {
position: relative;
opacity: 0;
z-index: 1
}
.form-file-upload .close {
display: none;
position: absolute;
top: -13px;
right: -13px;
width: 26px;
height: 26px;
font-size: 18px;
text-align: center;
line-height: 26px;
background: white;
z-index: 3;
-webkit-transition: background 0.2s ease, color 0.2s ease;
-moz-transition: background 0.2s ease, color 0.2s ease;
-o-transition: background 0.2s ease, color 0.2s ease;
transition: background 0.2s ease, color 0.2s ease
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-file-upload">
<div class="form-file-upload-inner">
<label for="FileOne"><span>Select Image</span>
</label><span class="wpcf7-form-control-wrap FileOne"><input type="file" name="FileOne" size="40" class="wpcf7-form-control wpcf7-file" id="FileOne" aria-invalid="false" /></span>
<button class="close" type="button"></button>
</div>
</div>
<div class="form-file-upload">
<div class="form-file-upload-inner">
<label for="FileTwo"><span>Select Image</span>
</label><span class="wpcf7-form-control-wrap FileOne"><input type="file" name="FileTwo" size="40" class="wpcf7-form-control wpcf7-file" id="FileTwo" aria-invalid="false" /></span>
<button class="close" type="button"></button>
</div>
</div>
<div class="form-file-upload">
<div class="form-file-upload-inner">
<label for="FileThree"><span>Select Image</span>
</label><span class="wpcf7-form-control-wrap FileOne"><input type="file" name="FileThree" size="40" class="wpcf7-form-control wpcf7-file" id="FileThree" aria-invalid="false" /></span>
<button class="close" type="button"></button>
</div>
</div>
谢谢你。但是，当我点击它时，它不会删除图像。任何想法为什么？谢谢:-) – michaelmcgurk
@michaelmcgurk检查这个 - https://jsfiddle.net/309zewwd/4/ –
要清除文件输入本身，使用'$（“＃your-file-input”）。val（“” ）;'。请记住，这只能用于清除文件输入，而不是向其中添加文件。出于安全原因，您无法以编程方式将文件添加到文件输入。 –