当我上传图片时,我预览了我正在上传的图片。
我现在需要的是一个功能,当我上传时可能我选择了一个错误的图片,而不是我想选择特定的图像..或者更多..并删除所选图像和输入的来源..
<div class="row">
<div class="decoration decoration-margins-photos"></div>
<div class="col-xs-4 fileContainer padding-box">
<div class="pic-box">
<img class="img-upload img-responsive" src="http://icons.iconarchive.com/icons/graphicloads/colorful-long-shadow/256/Home-icon.png">
<div class="plus-box">+</div>
<input id="input-3" class="input-upload" accept="image/*" type="file">
</div>
</div>
<div class="col-xs-4 fileContainer padding-box">
<div class="pic-box">
<img class="img-upload img-responsive" src="http://icons.iconarchive.com/icons/graphicloads/colorful-long-shadow/256/Home-icon.png">
<div class="plus-box">+</div>
<input id="input-4" class="input-upload" accept="image/*" type="file">
</div>
</div>
<div class="col-xs-4 padding-box">
<div class="default-remove">
<div class="text-center" style="padding-top:10px;">Default</div>
<div style="padding:0px 5px 0px 5px;">
<div class="decoration decoration-margins-default"></div></div>
<div class="text-center" style="padding-bottom:5px;">Remove</div>
</div>
</div>
JS功能:
<script type="text/javascript">
$(document).ready(function() {
function readURL(input) {
if (input.files && input.files.length) {
console.log(input.files.length);
var reader = new FileReader();
reader.onload = function(e) {
$(input).siblings('img.img-upload').prop('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(".input-upload").change(function() {
readURL(this);
console.log(this.id);
});
});
</script>