前面我写过关于<input type="file">上传图片,消除原有样式,获取图片的文章。
今天更新的是我最近发现,点击上传按钮的那一整行都可以调出本地上传图片的窗口。
之前也是发现多一个INPUT 的影响区域,用下面的方法清除了。
“用过两次都发现页面自动生成另一个大的<input>,点击同样会弹出文件选择框,可以用下面的代码清除这个多的。
input[type="file" i]::-webkit-file-upload-button {
-webkit-appearance: push-button;
white-space: nowrap;
font-size: inherit;
-webkit-user-modify: read-only;
margin: 0px;
display:none;//主要是这个
}”
再遇到的时候,以为是没清除成功,但是,右键检查找不到这个区域。
百思不得其解。
一行一行检查代码突然看到了LABEI标签,好像应该可能是他的原因。
改LABEI为DIV后,
一切正常了。
贴出,原错误代码:
<label class="choseImglabel">
<strong class="choseImgTitle">封面</strong>
<p class="choseNotice">小图片建议尺寸:200像素 * 200像素</p>
<div class="uploadType">
<a class="btn_upload">从图片库选择
<input type="file" id="camera" accept="image/*"/></a>
<span id="saveBtn" class="saveBtn"><button type="button" onclick="uploadImg()">保存图片</button></span>
</div>
</label>
看这个HTML会发现,标签完全用错了。这个label出现的毫无意义,我也不知道当时怎么用了一个label。。。。
将label改成DIV即可。
原因,我猜想可能是<label><input/></label>这种label标签中包含了input,点击label的整个区域会调用input。
将label的闭合标签移到<strong>前面去。试一试。
没错,再次点击label的区域是不会弹出图片选择窗口的,只有点击INPUT 的时候才会出现。
虽然不知道是不是我想的那个原因,但结果好像符合的。
写HTML的时候,结构一定要考虑好,就算写完以后也要检查一下,做好做到语义化,精简一点。
很多人说不要管为什么,实现了就好。
但是我觉得,应该要往前再想一想。填鸭式的学习又怎么好消化吸收转化为自己的知识呢。