上传文件 前台使用ajax+botton+隐藏file向后台传递MultipartFile 实现文件上传

现在的上传一般是使用框架进行上传,都快把最基本的的上传忘了,在这里写一个普通的上传复习一下

ayui.use('upload', function () {
var $ = layui.jquery
, upload = layui.upload;
// //普通文档上传
var uploadInst = upload.render({
elem: '#uploadsubsop'
, multiple: true
, url: '/uploadword/uploadwordsop'
, accept:"file"
, before: function (obj) {
这个是个前端框架自带的上传文件模板   这种上传已经很普遍了
来个究极简单的上传
 
这是前端 

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>file文件操作测试</title>
</head>
<body>

<input type="file" id="file1" name="file1" style="display:none">

<button type="button" id="gofile">上传文件</button>

</body>

<script src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">

//提交后台
$("#gofile").on("click", function () {
$("#file1").click();
});
$("#file1").on("change", function () {
var formData = new FormData();
formData.append("files", $("#file1")[0].files[0]);
$.ajax({
type:'POST',
url:"/test/main/uploadfile",
data:formData,
contentType:false,
processData:false, 
// dataType:"json",
mimeType:"multipart/form-data",
success:function(data){
if(data=="true"){
alert("保存成功!");
}else{
alert("保存失败!");
}
}
});
}); 

</script>

</html>

后端
 

/**
* 上传
* @return
*/
@RequestMapping(value="/uploadfile",method = RequestMethod.POST)
@ResponseBody
public String uploadfile(@RequestParam("files") MultipartFile files) throws IOException{

return setFile(files)==true?"true":"false";
}
public boolean setFile(MultipartFile multipartFile) throws IOException {
boolean filetype=false;
try {
String packingId="9527";
String name = "";
if (multipartFile != null) {
name = multipartFile.getOriginalFilename();// 直接返回文件的名字
String subffix = name.substring(name.lastIndexOf(".") + 1, name.length());// 我这里取得文件后缀
String name1=name.substring(0,name.lastIndexOf(".")); // 原来文件的名字 保存到其他地方
String fileName = packingId + getDateFormat(new Date(), "YYYYMMDDHHMMSS");// 文件保存进来,我给他重新命名
String filepath = "D:\\file\\"+packingId;
File file = new File(filepath);
if (!file.exists()) {// 目录不存在就创建
file.mkdirs();
}
//这个方法就可以新增了
multipartFile.transferTo(new File(file + "\\" + fileName + "." + subffix));// 保存文件
}
filetype = true;
} catch (Exception e) {
System.out.println(e);
filetype = false;
return filetype;
}
return filetype;
}
/**
* 日期格式化
*
* @param date
* @param 格式类型
* @return
*/
public static String getDateFormat(Date date, String formatStr) {
if (!StringUtils.isEmpty(formatStr)) {
return new SimpleDateFormat(formatStr).format(date);
}
return null;
}

搞定啦 ~  当然这是建立在有下载环境的情况下

<!-- 加了这个才可以上传 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" />

 

<!-- 实现上传需要的jar -->
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.5</version>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.2</version>

</dependency>

 

 

posted @ 2019-07-30 16:39  喜欢22度的晴天  阅读(863)  评论(0编辑  收藏  举报