文件上传、图片上传
FormData上传
通过获取元素把文件放在虚拟化表单FormData中,然后用ajax提交表单.
前端
$(function(){
//文件上传控件,空间里类型不重要,重要的是控件要有onChange事件,这样才能实现文件上传获取图片web路径功能
$('#file_upload').filebox({
buttonText: '选择文件', //按钮文本
buttonAlign: 'right', //按钮对齐
//multiple: true, //是否多文件
accept: "image/gif,image/bmp,image/jpeg,image/jpg,image/png", //文件类型
/*只要控件的图片改变,就自动上传图片,然后返回图片的web路径*/
onChange: function (e) {
//获取上传控件value,用于判断是否存在
var value = $("#file_upload").filebox('getValue');
//获取上传控件的file参数
var files = $("#file_upload").next().find('input[type=file]')[0].files;
//如果存在文件
if (value && files[0]){
//构造表单
var formData = new FormData();
//formData.enctype="multipart/form-data";
//添加字符串参数
formData.append("pathfolder",'img');
//添加文件参数
formData.append('file', files[0]);
}
//ajax上传文件文件form表单
$.ajax({
url: '/${appName}/uploadController/upload', //单文件上传
type: 'POST',
//不序列化数据,直接使用data;发送 DOMDocument或不需要转换成查询字符串的数据，将此选项设置为false。
//默认:true,以对象形式上传的数据时将被转换为字符串来匹配contentType的默认值application/x-www-form-urlencoded,
processData: false,
//类型：Boolean或者String; 默认：'application/x-www-form-urlencoded;charset=UTF-8'
//只能设置为false,如果设为multipart/form-data,那么请求头contentType后面会缺少boundary=----部分
contentType: false,
data: formData,
success: function (json) {
//转义JSON为对象
var data = $.parseJSON(json);
//将图片的web路径放到表单的隐藏input中
$('#logo_add').val(data.path);
//预览图片,每次更换都可预览
$("#img_preview").attr('src','/${appName}/'+decodeURIComponent(data.path));
//console.info(data);
},
error: function (xhr, status, error) {
$.messager.alert("提示", "操作失败"); //xhr.responseText
}
});
}
});
});
后端接口
package com.autumn.base.controller;
import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.io.OutputStream;
import java.net.URLEncoder;
import java.text.SimpleDateFormat;
import java.util.Date;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.jboss.logging.Param;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.multipart.MultipartFile;
@Controller
@RequestMapping(value = "/uploadController", method = { RequestMethod.GET,RequestMethod.POST })
public class UploadController {
/**
* 图片上传
* TODO
* @param file
* @param pathfolder
* @param req
* @param resp
* @return
* @throws Exception
*/
@RequestMapping(value = "/upload", method = {RequestMethod.POST })
public String Upload(@Param MultipartFile file,@Param String pathfolder,HttpServletRequest req, HttpServletResponse resp)throws Exception{
req.setCharacterEncoding("utf-8");
/*@Param参数无法引入,即jboss-logging-3.1.0.GA.jar没有引入时用原生request和org.springframework.web-3.1.1.RELEASE.jar中的MultipartHttpServletRequest获取两个参数
List<MultipartFile> files = ((MultipartHttpServletRequest) req).getFiles("file");
MultipartFile file = files.get(0);
String pathfolder = req.getParameter("pathfolder");
*/
if (file.isEmpty()) {
String json = "{\"success\":false,\"message\":\"file is empty!\"}";
resp.getOutputStream().write(json.getBytes("utf-8"));
} else {
Date time =new Date();
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
String dateNowStr = sdf.format(time);
//得到上传文件的保存目录，将上传的文件存放于WEB-INF目录下，不允许外界直接访问，保证上传文件的安全
String folderPath = File.separator+"upload"+File.separator+pathfolder+File.separator+dateNowStr;
String savePath = req.getSession().getServletContext().getRealPath(folderPath);
File fileFolder = new File(savePath);
//判断上传文件的保存目录是否存在
if (!fileFolder.exists() && !fileFolder.isDirectory()) {
//创建目录
fileFolder.mkdirs();
}
//文件保存目录
String filesavepath = savePath+File.separator+file.getOriginalFilename();
//IO流写入
OutputStream outputStream=new FileOutputStream(filesavepath);
InputStream inputStream = file.getInputStream();
//FileUtil.copyStream(inputStream, outputStream);
byte[] bytes = new byte[1024];
int len = 0;
while((len = inputStream.read(bytes))!=-1){ //读取到文件末尾的话可以读到-1
outputStream.write(bytes,0,len);
}
//flush输出流
outputStream.flush();
//关闭流文件
inputStream.close();
outputStream.close();
//图片存储路径(web用)
String webPath = folderPath+File.separator+file.getOriginalFilename();
//因为URLEncoder.encode会把空格改为+号,要手动把加号改为%20
webPath = URLEncoder.encode(webPath,"utf-8").replace("+", "%20");
String json = "{\"success\":true,\"message\":\"文件上传成功！\",\"path\":\""+ webPath +"\"}";
resp.resetBuffer();
resp.setContentType("text/html;charset=UTF-8");
resp.getOutputStream().write(json.getBytes("utf-8"));
resp.getOutputStream().flush();
}
return null;
}
}
