开发工具 Eclipse
1.引入jar包
2.配置spring-mvc.xml,添加以下代码
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="utf-8"</property>
<property name="maxUploadSize" value="20971520">property>
bean>
3.添加上传文件工具类 FtpUtil.java
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.InputStream;
import java.util.ArrayList;
import java.util.List;
import org.apache.commons.net.ftp.FTP;
import org.apache.commons.net.ftp.FTPClient;
import org.apache.commons.net.ftp.FTPReply;
import org.apache.tomcat.util.codec.binary.Base64;
import org.springframework.mock.web.MockMultipartFile;
import org.springframework.web.multipart.MultipartFile;
/**
* 上传文件工具类
*
* 2017-12-23
* @author Liner
*
*/
public class FtpUtil {
private static FTPClient ftpClient = new FTPClient();
private static String encoding = System.getProperty("file.encoding");
/**
* Description: 向FTP服务器上传文件
*
* @Version1.0
*
* @param url
* FTP服务器hostname
* @param port
* FTP服务器端口
* @param username
* FTP登录账号
* @param password
* FTP登录密码
* @param path
* FTP服务器保存目录,如果是根目录则为“/”
*
* @param base64 数组, 前台返回的图片数据格式
*
* @return 返回服务器访问链接
*/
public static List uploadBase64(String url, int port, String username, String password, String path, String[] base64_files) {
List savelist=new ArrayList<>();
try {
int reply;
// 如果采用默认端口,可以使用ftp.connect(url)的方式直接连接FTP服务器
ftpClient.connect(url);
// ftp.connect(url, port);// 连接FTP服务器
// 登录
ftpClient.login(username, password);
ftpClient.setControlEncoding(encoding);
// 检验是否连接成功
reply = ftpClient.getReplyCode();
if (!FTPReply.isPositiveCompletion(reply)) {
System.out.println("连接失败");
ftpClient.disconnect();
return savelist;
}
// 判断文件夹是否已经存在,不存在则创建
boolean isExit = ftpClient.makeDirectory(path);
if (isExit) {
System.out.println("文件夹创建成功");
} else {
System.out.println("文件夹已存在");
}
// 转移工作目录至指定目录下
boolean change = ftpClient.changeWorkingDirectory(path);
ftpClient.setFileType(FTP.BINARY_FILE_TYPE);
if (change) {
MultipartFile file;
for (String base64 : base64_files) {
if (!base64.isEmpty()) {
//解析base64
byte[] b = Base64.decodeBase64(base64);
for (int i = 0; i < b.length; ++i) {
if (b[i] < 0) {// 调整异常数据
b[i] += 256;
}
}
//文件名称
String fileName = String.valueOf(System.currentTimeMillis())+".jpg";// 文件名 比如a.jpg
file=new MockMultipartFile(fileName, b);//转换为file
System.out.println("文件名:" + fileName);
// 自定义的文件名称
// System.out.println("执行上传方法!");
Boolean bool = ftpClient.storeFile(new String(fileName.getBytes(encoding), "iso-8859-1"),file.getInputStream() );
if (bool) {
System.out.println("ok!");
// 访问链接,保存到数据库
String savePath = WeiXinConfig.FTP_HOST + ":" + WeiXinConfig.FTP_PORT + path
+ File.separator + fileName;
System.out.println(savePath);
savelist.add(savePath);
}
}
}
}
ftpClient.logout();
} catch (IOException e) {
e.printStackTrace();
} finally {
if (ftpClient.isConnected()) {
try {
ftpClient.disconnect();
} catch (IOException ioe) {
}
}
}
return savelist;
}
}
4.Action 响应代码
/**
* 上传图片(多个文件)
* Liner 2017-12-19
* @param files
* @param request
* @param response
* @return
* @throws Exception
*/
@ResponseBody
@RequestMapping(value = "/uploadImagesBase", produces = "application/json; charset=UTF-8")
public Object uploadImagesBase(@RequestParam("files") String[] files, HttpServletRequest request,HttpServletResponse response) throws Exception {
//@RequestParam("files") MultipartFile[] files,
//System.out.println("准备上传文件!");
JSONObject json=new JSONObject();
for(int i=0;i"";
if(files.length>0){
String path = File.separator + TimeUtil.getShortDateString();
// 调用上传文件接口
List savePath=FtpUtil.uploadBase64(WeiXinConfig.FTP_HOST, WeiXinConfig.FTP_PORT,
WeiXinConfig.FTP_USER_NAME, WeiXinConfig.FTP_PASSWORD, WeiXinConfig.FTP_BASEPATH + path,files);
json.accumulate("savepath", savePath);
if(savePath.size()>0){
msg="ok";
}else{
msg="error";
}
}else{
msg="files is null";
}
json.accumulate("msg", msg);
return JSONSerializer.toJSON(json);
}
5.页面代码(部分代码参考)
参考链接:[https://www.cnblogs.com/guandekuan/p/6739190.html]
(1).选择文件监听
//选择文件监听事件(单个)
$("#selectfile").change(function(e) {
var files = e.target.files || e.dataTransfer.files;
//console.log(files);
var file = files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
var fileName = file.name; //文件名
//var src = this.result;//
//var index = fileName.lastIndexOf(".");
//var filefix = fileName.substring(index, fileName.length); //文件拓展名
msgShow('图片正在处理,请稍等...');
lrz(file, {
width: 640
})
.then(function(rst) {
console.log(rst);
//计算文件大小
//var size=Math.round(rst.fileLen/1024*100)/100;
//console.log(size);
img_count++;
count++;
var img_id = 'img' + count; //图片展示ID
var file_id = 'file' + count; //文件ID
imagesList.push(file_id); //保存ID到数组
var base = rst.base64; //base64字符串
//重命名文件
console.log(file);
file_map.put(file_id, base.split(',')[1]); //保存到文件集合
var html = '' + '' +
'')">';
$("#image-list").append(html); //追加显示图片预览
}).always(function() {
//无论是否压缩成功,都执行
});
}
$('#selectfile').val(''); //初始化
});
(2).上传文件代码
//提交(上传文件方法)
function release() {
//判断是否需要上传图片
if(imagesList.length>0){
//加载动画
layer.open({
type: 2,
shadeClose: false,
content: '正在上传文件到服务器,请稍等...',
});
var url = "${ctx}/uploadImagesBase.do";
var formData = new FormData(); // 实例化上传方法
var file;
//把base64格式的文件添加到formData
for(var i = 0; i < imagesList.length; i++) {
file = file_map.get(imagesList[i]);
formData.append("files", file);
}
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", url,true);//post方式,url为服务器请求地址,true 该参数规定请求是否异步处理。
xhr.send(formData); //开始上传,发送form数据
}else{
//没有图片需要上传,直接提交
submit();//提交
}
}
// 开始上传
function uploadProgress(evt) {
// 不做处理
}
// 上传完成方法
function uploadComplete(evt) {
console.log(evt);
var data = JSON.parse(evt.target.responseText);
if(data.msg == 'ok') {
//获取返回路径
layer.closeAll();
saveList=data.savepath;
console.log(saveList);
if(saveList.length==img_count){
//msgShow("上传成功!");
submit();//提交
}else{
msgShow("部分图片上传失败,请检查网络!");
}
} else {
layer.closeAll();
msgShow("上传失败!");
}
}
// 上传出错方法
function uploadFailed(evt) {
// 弹出层
msgShow('图片上传失败!');
}
//
function uploadCanceled(evt) {
//弹出层
msgShow('图片上传已由用户或浏览器取消删除连接!');
}
function msgShow(msg){
//提示
layer.open({
content: msg,
skin: 'msg',
time: 2 //2秒后自动关闭
});
}
6.需要注意的问题
问题1: http://blog.csdn.net/lingirl/article/details/1714806
问题2: 压缩后的base转file文件提交,IOS会出现没法提交的问题