这里设置<input type=”file”>的透明度为0，然后在覆盖上自己需要的样式，主要代码如下：
<form id="assess-form" style="height:auto"> <textarea class="assess-text" placeholder="请输入相关评价内容"></textarea> <div class="upload-img"> <div class="horizontal"></div> <div class="vertical"></div> </div> <input class="upload-img-file" id="file_input" type="file"> <span class="upload-img-font">手机晒图</span> </form>
通过js语句动态创建img元素，元素具体属性根据情况而定，主要代码如下：
//上传图片并预览
var input = document.getElementById("file_input");
var imageType = /image.*/;
var getOnloadFunc = function(aImg) {
return function(evt) {
aImg.src = evt.target.result;
};
}
input.addEventListener("change", function(evt) {
for (var i = 0, numFiles = this.files.length; i < numFiles; i++) {
var file = this.files[i];
if (!file.type.match(imageType)) {
continue;
}
var img = document.createElement("img");
img.style.width="70px";
img.style.height="70px";
img.style.marginLeft="10px";
img.id="upload-img-show";
var _img=document.getElementById("assess-form");
_img.appendChild(img);
img.onclick=function(){
if (confirm("删除照片？")) {
img.style.display="none";
}
else {
return false;
};
// img.style.display="none";
}
var reader = new FileReader();
reader.onload = getOnloadFunc(img);
reader.readAsDataURL(file);
}
}, false);
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索前端
， 代码
， this
， 属性
用户
，以便于您获取更多的相关知识。
时间： 2024-09-20 00:08:26