博客内容描述了作者在实现文件上传功能时遇到的问题，具体表现为使用HTML和JavaScript进行图片上传时，代码中存在一个错误，即在<div>标签内有一个不必要的`onclick`属性。作者通过删除这个属性解决了问题，使得图片能够正常通过拖放或点击选择文件来上传。修复后的代码提高了用户体验，确保了图片预览功能的正常工作。
I also faced similar issue here is the details
when uploading logo using dropdown logo upload box
cloud_upload
var imageLoader = document.getElementById('filePhoto');
imageLoader.addEventListener('change', handleImage, false);
function handleImage(e) {
var reader = new FileReader();
reader.onload = function (event) {
$('.uploader img').attr('src',event.target.result);
}
reader.readAsDataURL(e.target.files[0]);
}
CSS.css
.uploader {
position:relative;
overflow:hidden;
height:100px;
max-width: 75%;
margin: auto;
text-align: center;
img{
max-width: 464px;
max-height: 100px;
z-index:1;
border:none;
}
.drag-drop-zone {
background: rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.12);
padding: 32px;
}
}
.uploader img{
max-width: 464px;
max-height: 100px;
z-index:1;
border:none;
}
.greyLogoBox {
width: 100%;
background: #EBEBEB;
border: 1px solid #D7D7D7;
text-align: center;
height: 100px;
padding-top: 22px;
box-sizing: border-box;
}
#filePhoto{
position:absolute;
width:464px;
height:100px;
left:0;
top:0;
z-index:2;
opacity:0;
cursor:pointer;
}
before correction my code was :
function handleImage(e) {
var reader = new FileReader();
reader.onload = function (event) {
οnclick="$('#filePhoto').click()"
$('.uploader img').attr('src',event.target.result);
}
reader.readAsDataURL(e.target.files[0]);
}
The error in console:
I solved it by removing οnclick="$('#filePhoto').click()" from div tag.
扫一扫
724
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
