（asp）FileUpload控件美化以及预览图片

FileUpload控件美化

你会发现原来的控件样式（我加了一个边框）并不好看，虽然说我们可以给这个控件设置宽度，高度等常规样式，但是旁边的未选择任何文件以及选择文件按钮都在，无法去掉，至少单单设置这个input的样式我是没有成功

那么既然可以设置宽度，高度，那么我们就设置为130px 40px，设置好之后是这样的，我还设置了border，之前通过一番捯饬，我发现里面的选择文件按钮不能设置宽高

那么怎么美化呢？
1.通过css用容器遮盖
在与这个FileUpload控件同级创建一个div（不是同级也行），里面写上信息“点击选择图片”，设置它的宽高和这个upload一样为130px 40px，设置背景颜色等样式

<div id="big">
	<input type="file" />
	<div id="new">点击选择图片</div>
</div>

#new{
	width: 130px;
	height: 40px;
	background-color: #ededed;
	text-align: center;
	line-height: 40px;
}

先给包裹它们的容器设置position，利用父相子绝

#big{
	position: relative;
}
#new{
	position: absolute;
	//具体的top，left等参数请以具体为准
	top: 0px;
}

然后用绝对定位将这个#new容器移动到FileUpload上，遮住，如图，利用F12的检查功能细调

再设置FileUpload的样式，同样设置为绝对定位，top设置为0px（具体可能会改变）就行保证它俩的位置是一样的
接下来调整图层顺序，input的图层顺序一定要比遮盖的容器要大

input{
	z-index: 2;
}
#new{
	z-index: 1;
}

效果如图

接下来利用opacity（透明度）属性，将FileUpload的透明度设置为0，完全不显示，和display还是有区别的

input{
	opacity: 0;
}

效果如图，鼠标悬浮上去还有title提示

2.通过js
下面是结构，样式，美化啥的就靠自己吧，23333
首先不管干啥，先把FileUpload给display none掉

<div id="big">
	<input type="file" id="file"/>
	<input type="button" id="btn" value="点击选择图片"/>
</div>

#file{
	display: none;
}

那么就只剩一个按钮孤零零的一个真是满地飘零

接下来写JQuery，没有引用JQuery文件的小伙伴记得先引用哦

$(function(){
	$("#btn").click(function(){
		$("#file").click()
	})
})

这样的话就可以通过按钮的单击引用FileUpload的单击事件，整体结构是这样：

<div id="big">
	<input type="file" id="file"/>
	<input type="button" id="btn" value="点击选择图片"/>
</div>
<!-- 这个JQuery的引用路径请以实际为准 -->
<script src="jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script>
	$(function(){
		$("#btn").click(function(){
			$("#file").click()
		})
	})
</script>

FileUpload控件联合img预览图片

1.点击选择图片之后图片预览
首先用的是之前的css方法，这是结构，定位啥的参考前面

<div id="big">
	<input type="file" id="file"/>
	<div id="new">点击选择图片</div>
	<img src="" >
</div>

写下如下Js，利用JQuery：

$(function(){
	$("#file").change(function(){
		//图片路径设置为FileUpload控件获得的路径值
		$("img").attr('src',URL.createObjectURL($(this)[0].files[0]))
		$("#new").text("点击更换图片").css("background-color", "#3dcccc").css("color", "white");
	})
})

点击选择图片之后效果如图，我还将文字做了改变，背景色也变化了，因为使用了绝对定位，脱离了文档流，所以图片顶上去了。
鼠标悬浮上去还有文件名
使用asp的小伙伴就可以用hasfile属性判断并使用相关属性获取文件名再用saveas保存啦（属性名应该没打错叭）

2.选择图片过程中弹出来的选择文件窗口点击取消图片跟随消失

看着这个标题你会有点迷糊，为什么要跟着消失掉？（亦可以不跟随消失）因为使用的遮盖方法，鼠标悬浮上去有title提示图片名（如上图）或者有未选择图片的title，用上面的js方法美化FileUpload就不会有这个title出现，其实也可以不管，但这是个细节问题，如图：

看了很多，都说不能监听取消选择的事件，但是可以使用value，那我们就监听value，当FileUpload的change事件之后就打开定时器，不断验证FileUpload的value值是否为 “” 。

function start() {
    var timer = setInterval(function () {
        //判断upload的值，如果为空用户就点击了取消
        var $url = $("#file").val();
        //要用变量接收再判断，不然是undefined
        if ($url == "") {
            //置空图片的src
            $("img").attr('src', "");
            //变回样式
            $("#new").text("点击选择图片").css("background-color", "#ededed").css("color", "black");
            //停止计时器
            //也可以不停止，看你个人，哼哼~
            clearInterval(timer);
        }
    }, 1000)
}
//FileUpload控件选择图片之后
$("#file").change(function () {
    //获取图片路径并给图片设置src
    $("img").attr('src', URL.createObjectURL($(this)[0].files[0]));
    //改变覆盖在FileUpload上的容器样式
    $("#new").text("点击更换图片").css("background-color", "#3dcccc").css("color", "white");
    //启动定时器
    start();
})

碎碎念，当然还有更好的方法，我之前研究这个的时候就打开那些图片转换网站的Js仔细瞅瞅，问题就是每个字都认识，但是连在一起就不认识惹