- 前言
- 一、文件上传按钮的三种样式
- 二、碰到的问题
- 1. html
- 2. java
- 总结
前言
最近做项目，用到了文件上传，但是自带的样式实在是太丑了，于是就想着封装一下选择文件的样式。
常用的样式有三种，楼主一一尝试了，但是会有一些bug，这里记录一下碰到的问题。
一、文件上传按钮的三种样式
此处是参考了别人的写法：
第一种方法.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; }
第二种方法.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; }
第三种方法.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表单提交的方式，是可以进行文件上传的。
经过多次测试，我果断选择了第二种方式，接下来就是代码。
代码如下（示例）：
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 uploadPhoto(MultipartFile file, HttpServletRequest request) {
Map 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;
}
}
总结
一点前端小问题耽误了我好久，看来还真的是需要好好补一下前端的知识了，总算是解决了，简单记录一下笔记。
