利用一张图片来代替input file组件

前言:

大家知道,正常的input file组件上传文件的样式实在是太丑了,今天项目给的原型图,好像是用一张图片来代替,研究过后,记录一下!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form method="post" enctype="multipart/form-data" id="form2" class="hgform">
<table>
<tr>
<td valign="top"><b>附件2:</b></td>
<td rowspan="3"><label for="file2"><img id="xmTanImg2" src="默认图片的位置"/></td></label>
<td style="text-align: center;height: 133px;line-height: 133px;"><a href="javascript:void(0);" class="btn btn-azure" onclick="bClick()"> <i class="fa"></i><span>上传</span></a></td>
<td><input type="file" style="display:none" name="picture" id="file2" onchange="doChange2(this)"/></td>
</tr>
<tr>
<td></td>
<td valign="top"><span style="color:#F00">上传附件大小在5M之内</span></td>
</tr>
</table>
</form>

思路主要就是:将我们原来的input file 组件设置隐藏,同时加一个onchange事件,然后在一个label上面加一个for=”此处为input file 组件的id”。这label的这个属性,就是指向的意思,当我们点击这个label的时候就相当于点击了这个input file组件。

番外

###1.我们在上传图片或者文件的时候有的时候会过滤,上传的类型,时候我们要这么写:

1
<input type="file" style="display:none" name="picture"accept="image/gif, image/jpeg" id="file2" onchange="doChange2(this)"/>

如果不限制图像的格式,可以写为:accept=”image/*”。

设置这个属性,之后是可以拦截图片样式或者文件样式了,那么带来的问题就是,我们带图片的速度变慢了,甚至有的时候需要7秒左右。各有利弊吧,酌情选择。那么又不想慢,又想拦截怎么办,那么不要写这个属性,我们把验证文件类型,放在服务器端验证就好了,或者前端的js。

1
2
3
4
5
6
7
8
9
//file2为input file组件的id
var file = $("#file2").val();
if (null == file || "" == file || typeof (file) == undefined) {
$.messager.alert("提示", "请上传附件!", "warning");
return;
}else if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file)){
$.messager.alert("提示", "图片类型必须是.gif,jpeg,jpg,png中的一种!", "warning");
return;
}
1
2
3
4
5
6
7
8
MultipartResolver resolver = new CommonsMultipartResolver(request.getSession().getServletContext());
MultipartHttpServletRequest multipartRequest = resolver.resolveMultipart(request);
MultipartFile multipartFile = multipartRequest.getFile("excelFile");//input file组件的id
String suffix = multipartFile.getOriginalFilename()
.substring(multipartFile.getOriginalFilename().lastIndexOf("."));
if (".xls".equals(suffix) || ".xlsx".equals(suffix)) {
}

###2.我们有的时候会获取上传文件的大小和路径

1
2
3
4
5
6
7
8
9
<input type="file" style="display:none" name="picture" id="file2" onchange="doChange2(this)"/>
<script type="text/javascript">
function doChange2(obj){
var file = obj.files[0];
var size = file.size;//大小
var path = file.val();//路径
console.log("file.size = " + file.size); //file.size 单位为byte
}
</script>

3.上传图片之前我们需要预览(主要用到就是FileReader)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<div class="div2">
<form method="post" enctype="multipart/form-data" id="form2" class="hgform">
<table>
<tr>
<td valign="top"><b>附件2:</b></td>
<td rowspan="3"><label for="file2"><img id="xmTanImg2" src="${ctx}/static/images/u385.png"/></td></label>
<td style="text-align: center;height: 133px;line-height: 133px;"><a href="javascript:void(0);" class="btn btn-azure" onclick="bClick()"> <i class="fa"></i><span>上传</span></a></td>
<td><input type="file" style="display:none" name="picture" id="file2" onchange="doChange2(this)"/></td>
</tr>
<tr>
<td></td>
<td valign="top"><span style="color:#F00">上传附件大小在5M之内</span></td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
function doChange2(obj){
var file = obj.files[0];
console.log(obj);
console.log(file);
console.log("file.size = " + file.size); //file.size 单位为byte
if(file.size/1024/1024>5){
$.messager.alert("提示","图片大于5M,请重新上传!"+data.data,"warning");
return;
}
var reader = new FileReader();
reader.onload = function (e) {
console.log("成功读取....");
var img = document.getElementById("xmTanImg2");
img.src = e.target.result;
}
reader.readAsDataURL(file)
}
</script>
坚持原创技术分享,您的支持将鼓励我继续创作!

分享
Fork me on GitHub