前言
最近做项目,用到了文件上传,但是<input type="file">
自带的样式实在是太丑了,于是就想着封装一下选择文件的样式。
常用的样式有三种,楼主一一尝试了,但是会有一些bug,这里记录一下碰到的问题。
一、文件上传按钮的三种样式
此处是参考了别人的写法:
<!--html结构-->
<!--第一种方法:通过定位+透明度来实现(不推荐)-->
<div class="first">
第一种方法
<button>上传图片</button>
<input type="file">
</div>
/*css代码*/
/*第一种的按钮样式*/
.first{
position: relative;
height: 30px;
line-height: 30px;
}
.first button,.first input{
position: absolute;
left: 85px;
top: 0;
width: 100px;
height: 30px;
color: #fff;
background-color: skyblue;
border-radius: 5px;
border: none;
outline: none;
cursor: pointer;
}
.first input{
opacity: 0;
width: 185px;
left: 0;/*这里是为了让cursor效果在按钮内完全生效,但是弊端就是宽度增加,在按钮左侧看不见的位置也能点击到*/
}
<!--html结构-->
<!--第二种方法:通过label的关联属性来实现-->
<div class="item">
第二种方法
<label for="file1">上传图片</label>
<input type="file" id="file1">
</div>
/*css代码*/
/*第二种的按钮样式*/
.item label{
display: inline-block;
width: 100px;
height: 30px;
text-align: center;
color: #fff;
line-height: 30px;
background-color: skyblue;
border-radius: 5px;
cursor: pointer;
}
.item input{
display: none;
}
<!--html结构-->
<!--第三种方法:通过js事件绑定来实现(推荐)-->
<div class="item">
第三种方法
<button class="btn">上传图片</button>
<input type="file" id="file">
</div>
/*css代码*/
/*第三种的按钮样式*/
.item button{
width: 100px;
height: 30px;
color: #fff;
background-color: skyblue;
border-radius: 5px;
border: none;
outline: none;
cursor: pointer;
}
.item input{
display: none;
}
// js代码
// 第三种方法
document.querySelector('.btn').addEventListener('click',function () {
document.querySelector('#file').click();
});
上面三种方法的样式都是一样的,如图:
图片描述
二、碰到的问题
以上三种文件上传按钮的方法都可以用,我最开始用的是第三种的方式,前台是使用AJAX封装的FormData来进行文件上传,但是后台接收文件的时候,一直提示为空。反复寻找也没找到原因,经过测试,只是知道了第三种方式在form表单中选择完文件不显示文件名,但是直接使用form表单提交的方式,是可以进行文件上传的。
经过多次测试,我果断选择了第二种方式,接下来就是代码。
1. html
代码如下(示例):
<style>
.item label{
width: 8%;
height: 40px;
text-align: center;
color: #fff;
background-color: #314690;
border-radius: 5px;
cursor: pointer;
padding: 8px;
font-size: 18px;
}
.item input{
display: none;
}
</style>
<div style="margin-top: 10px;" class="item">
<label for="file">本地上传</label>
<input type="file" id="file" name="file">
</div>
function save(){
var formData = new FormData($("#form")[0]);
$.ajax({
type: "post",
url: "./uploadFile.do",
data: formData,
cache: false,
processData: false,
contentType: false,
dataType: "json",
sync: false,
success: function (data) {
alert(data.msg);
}
})
}
2. java
代码如下(示例):
package com.banxia.utils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
//图片上传
@Controller
public class UploadFileController {
@RequestMapping(value = "/uploadFile", method = RequestMethod.POST)
@ResponseBody
// anjularJS上传文件的话,需要指定这个属性 @RequestParam(value = "file")
public Map<String, String> uploadPhoto(MultipartFile file, HttpServletRequest request) {
Map<String, String> ret = new HashMap<>();
if (file == null) {
ret.put("type", "error");
ret.put("msg", "选择要上传的文件!");
return ret;
}
if (file.getSize() ==0) {
ret.put("type", "error");
ret.put("msg", "请先选择文件!");
return ret;
}
if (file.getSize() > 1024 * 1024 * 20) {
ret.put("type", "error");
ret.put("msg", "文件大小不能超过20M!");
return ret;
}
//获取文件后缀
String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".") + 1);
if (!"doc,docx,txt".toUpperCase().contains(suffix.toUpperCase())) {
ret.put("type", "error");
ret.put("msg", "请选择doc,docx,txt格式的文件!");
return ret;
}
//获取项目根目录加上图片目录 webapp/static/imgages/upload/
String savePath = request.getSession().getServletContext().getRealPath("/") + "/file/";
File savePathFile = new File(savePath);
if (!savePathFile.exists()) {
//若不存在该目录,则创建目录
savePathFile.mkdir();
}
String filename = new Date().getTime() + "." + suffix;
try {
//将文件保存指定目录
file.transferTo(new File(savePath + filename));
} catch (Exception e) {
ret.put("type", "error");
ret.put("msg", "保存文件异常!");
e.printStackTrace();
return ret;
}
ret.put("type", "success");
ret.put("msg", "论文上传成功!");
//返回给前端的路径 "filepath":"/file/"
ret.put("filepath", request.getSession().getServletContext().getContextPath() + "/file/");
ret.put("filename", filename);
return ret;
}
}
总结
一点前端小问题耽误了我好久,看来还真的是需要好好补一下前端的知识了,总算是解决了,简单记录一下笔记。