在图像预览上创建按钮重置
create button reset on image preview
您好,我有一个带有图像预览的图像上传,当用户上传图像时,会显示一个按钮删除以取消该图像(图像用户上传)并切换到图像默认值(对于这种情况占位符图像),并且按钮删除被隐藏,因为输入文件没有任何值。现在,我成功地在用户上传时显示按钮。但是当用户单击删除时。只有按钮删除被隐藏,但图像仍然存在。当用户单击"删除"时,如何使图像恢复占位符?
这是我的代码
$(document).ready(function() {
$(".input-file").on("change", function(){
if($(this).val() == "") {
$(this).parent().find(".image-upload-footer").css({"display": "none"});
} else {
$(this).parent().find(".image-upload-footer").css({"display": "block"});
}
});
$(".reset").click(function(){
$(this).closest(".image-upload").parent().find(".input-file").val("").trigger('change');
});
});
这是JSFIDDLE https://jsfiddle.net/uxsxuwzd/1/
谢谢
请在函数中替换此代码。您应该必须重置输入文件的选定 src。
这适用于维度中的多种类型的图像。
$(document).ready(function() {
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#image_upload_preview1').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#inputFile1").change(function () {
readURL(this);
});
});
$(document).ready(function() {
function readURLs(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#image_upload_preview2').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#inputFile2").change(function () {
readURLs(this);
});
});
$(document).ready(function() {
$(".input-file").on("change", function(){
if($(this).val() == "") {
$(this).parent().find(".image-upload-footer").css({"display": "none"});
} else {
$(this).parent().find(".image-upload-footer").css({"display": "block"});
}
});
$(".reset").click(function(){
$(this).closest(".image-upload").parent().find(".input-file").val("").trigger('change');
var newImg=$(this).attr('custattr');
$("#"+$(this).closest(".image-upload").parent().find(".img-responsive").attr('id')).attr("src",newImg);
});
});
.image-upload-footer p{
display: inline
}
.image-upload input[type=file]{
display: none;
}
.image-upload label{
margin-bottom: 0;
}
.image-upload img{
cursor: pointer;
}
.profileback .deleteThis{
position: absolute;
top: 6px;
right: 21px;
padding: 0;
}
.deleteThis span{
color: #fff
}
.image-upload-footer{
background-color: rgba(34, 34, 34, 0.87);
margin-top: -6px;
padding: 4px 10px;
}
.image-upload-footer button{
padding: 0px 5px;
border-radius: 100%;
margin-left: 15px;
}
.image-upload-footer button span,.image-upload-footer p{
color: #fff ;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<div class="col-xs-6">
<div class="image-upload">
<label for="inputFile1">
<img id="image_upload_preview1" class="img-responsive mainPic" src="http://placehold.it/350x150"/>
</label>
<input id="inputFile1" class="input-file" type="file"/>
<div class="image-upload-footer" style="display:none">
<button type="reset" custattr="http://placehold.it/350x150" class="btn btn-red reset">
<span class="fa fa-times"aria-hidden="true">X</span>
</button>
<p>remove</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="image-upload">
<label for="inputFile2">
<img id="image_upload_preview2" class="img-responsive" src="http://placehold.it/746x728" alt=""/>
</label>
<input id="inputFile2" class="input-file" type="file"/>
<div class="image-upload-footer" style="display:none">
<button type="button" custattr="http://placehold.it/746x728" class="btn btn-red reset">
<span class="fa fa-times"aria-hidden="true">X</span>
</button>
<p>remove</p>
</div>
</div>
</div>
这适用于一种类型的图像维度
$(".reset").click(function(){
$(this).closest(".image-upload").parent().find(".input-file").val("").trigger('change');
$("#"+$(this).closest(".image-upload").parent().find(".img-responsive").attr('id')).attr("src","http://placehold.it/350x150");
});
相关文章:
- 如何删除我用按钮创建的内容
- 单击按钮创建多实例jQuery UI对话框
- 如何为滑块的分页按钮创建简单的下一个和上一个触发器按钮
- Javascript使用变量通过按钮创建url
- 按钮创建无法定位功能代码错误
- 使用按钮创建新的下拉列表
- 点击按钮创建一个带有css动画的放射状进度条
- 从执行jscript列表按钮创建多个相关对象
- 在完整日历的Dayclick事件上触发jQuery qTip,然后使用其中的按钮创建事件
- 通过摇晃按钮创建小摆动
- 摆脱形式,仅使用按钮创建新记录
- 如何使用下一个和上一个按钮创建 jquery 滑块
- Chrome 扩展程序:通过单击按钮创建新标签页
- 使用按钮创建列表
- ExtJS:如何使用MessageBox按钮创建自定义模式窗口
- 如何在ASP.Net中单击按钮创建动态表
- carouFredSel:为next/prev按钮创建一个函数
- extjs如何使用单选按钮创建菜单
- 单击按钮创建表时,请选中“获取值”复选框
- 如何使按钮创建一个不同的文本,每次它是按下