关于input[type=file]隐藏未选择文件与缩略图显示

关于input[type=file]隐藏未选择文件与缩略图显示##

前提：在网上搜了很多关于此类的问题，大多都是需要用lable+id替换原本的上传文件按钮,缩略图用到了UI等，复杂的一笔。
其实大可不必如此。
不废话,上代码:
HTML:

<input type="file" id="btn_class" onchange="test(this.value)" />
<div id="img1"></div>    <!--这个后面会用到-->

CSS:

#btn_class{
	width:70px;			/*这里根据你的按钮宽度自行调节*/
	overflow:hidden;
}

效果图:（不同浏览器可能效果不同）谷歌效果

缩略图显示:
注意事项:此时图片必须和你的HTML页面在同一个文件夹中
上述问题解决后，再加入控制缩略图显示的js代码;

```javascript
function test(src){
		console.log(src);			/*获取文件路径成功*/
		var test = document.getElementById("img1");
		test.innerHTML="";			/*由于file提交没有图片切换功能，所以我们需要先清空img再追加*/
		var s = src.split("\");  	/*将‘/’文件分隔符转义并分割成字符串*/
		var img = s[2];				/*分离出你的图片名称*/
		console.log(img);
		var imgdiv = document.createElement("img");	/*创建节点*/
		imgdiv.src=img;
		imgdiv.width="200";
		imgdiv.height="50";
		test.appendChild(imgdiv);				/*追加成功*/
		}

有疑问可以问我，或者有更好的办法也请留言。
路在脚下，学无止境。

最后

以上就是动人烧鹅为你收集整理的关于input[type=file]隐藏未选择文件与缩略图显示的全部内容，希望文章能够帮你解决关于input[type=file]隐藏未选择文件与缩略图显示所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。