利用Kindeditor、nginx和FTP实现文件上传
来源：互联网 发布：淘宝复古连衣裙 编辑：程序博客网 时间：2024/06/10 19:46
之前图片都是上传到Tomcat中，导致部署新的war包时，原来上传的图片消失了，后来考虑使用nginx+ftp来上传图片到图片服务器。
1 首先要加入kindeditor的相关js和css文件，具体的直接在网上搜一个。
2 创建一个controller，用于接受前台传递过来的请求。
@Controller@RequestMapping("/upload")public class FileUploadController { @Autowired private FileUploadService fileUploadService; @RequestMapping("/saveImage") @ResponseBody public Map<String, Object> saveImage(HttpServletRequest request,String dirs){ return fileUploadService.SavepointManager(request,dirs); }}3 然后是service，处理图片上传的具体逻辑。
@Servicepublic class FileUploadService { /** * 保存图片 * @param request * @return */ public Map<String, Object> SavepointManager(HttpServletRequest request,String dir){ // 定义允许上传的文件扩展名 HashMap<String, String> extMap = new HashMap<String, String>(); extMap.put("image", "gif,jpg,jpeg,png,bmp"); Map<String, Object> returnMap = new HashMap<String, Object>(); // 最大文件大小 long maxSize = 1000000; if (!ServletFileUpload.isMultipartContent(request)) { returnMap.put("error", "请选择文件！"); return returnMap; } String dirName = request.getParameter("dir"); if (dirName == null) { dirName = "image"; } if (!extMap.containsKey(dirName)) { returnMap.put("error", "目录名不正确!"); return returnMap; } MultipartHttpServletRequest mRequest = (MultipartHttpServletRequest) request; Map<String, MultipartFile> fileMap = mRequest.getFileMap(); String fileName = null; try { for (Iterator<Map.Entry<String, MultipartFile>> it = fileMap.entrySet().iterator(); it.hasNext();) { Map.Entry<String, MultipartFile> entry = it.next(); MultipartFile mFile = entry.getValue(); fileName = mFile.getOriginalFilename(); // 检查文件大小 if (mFile.getSize() > maxSize) { // return "上传文件大小超过限制!"; } String fileExt = fileName.substring(fileName.lastIndexOf(".")+1); if (!Arrays.<String> asList(extMap.get(dirName).split(",")).contains(fileExt)) { // return "上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式!"; } //上传到ftp //上传文件名 String newName = WpDate.getNo(2) +"."+ fileExt; //上传的路径 String imagePath = dir+"/"+WpDate.dateToStrShort(new Date()); String saveUrl = FTPUtil.uploadFile(imagePath,newName,mFile.getInputStream()); System.out.println(saveUrl); returnMap.put("url", saveUrl); returnMap.put("error", 0); } } catch (IOException e) { e.printStackTrace(); } return returnMap; }}4 下面是自定义的FTP上传工具类，用于处理具体的文件上传。
/** * FTP工具类 * @Title: FTPUtil.java * @Description: FTP工具类 * @date 2016-03-17 下午12:58:16 * @version V1.0 */public class FTPUtil { private static final String FTP_IP = "***";//FTP连接地址 private static final int FTP_PORT = 21;//FTP连接端口 private static final String FTP_USERNAME = "***";//FTP用户名 private static final String FTP_PASSWORD = "***..";//FT平密码 private static final int FTP_CONNECTION_TIMEOUT = 60 * 1000;//FTP连接超时时间 private static String separator=File.separator; private static final String FTP_BASEPATH = "/public/images/iec/"; private static final String IMAGE_BASE_URL = "http://***/public/images/iec/"; /** * Description: 向FTP服务器上传文件 * @param filePath FTP服务器文件存放路径。例如分日期存放：/2015/01/01。文件的路径为basePath+filePath * @param filename 上传到FTP服务器上的文件名 * @param input 输入流 * @return 成功返回true，否则返回false */ public static String uploadFile(String filePath, String filename, InputStream input) { String result = ""; FTPClient ftp = new FTPClient(); try { int reply; ftp.connect(FTP_IP, FTP_PORT);// 连接FTP服务器 // 如果采用默认端口，可以使用ftp.connect(host)的方式直接连接FTP服务器 ftp.login(FTP_USERNAME, FTP_PASSWORD);// 登录 reply = ftp.getReplyCode(); if (!FTPReply.isPositiveCompletion(reply)) { ftp.disconnect(); return result; } //切换到上传目录 if (!ftp.changeWorkingDirectory(FTP_BASEPATH+filePath)) { //如果目录不存在创建目录 String[] dirs = filePath.split("/"); String tempPath = FTP_BASEPATH; for (String dir : dirs) { if (null == dir || "".equals(dir)) continue; tempPath += "/" + dir; if (!ftp.changeWorkingDirectory(tempPath)) { if (!ftp.makeDirectory(tempPath)) { return result; } else { ftp.changeWorkingDirectory(tempPath); } } } } //设置上传文件的类型为二进制类型 ftp.setFileType(FTP.BINARY_FILE_TYPE); //上传文件 if (!ftp.storeFile(filename, input)) { return result; } input.close(); ftp.logout(); result = IMAGE_BASE_URL+filePath+"/"+filename; } catch (IOException e) { e.printStackTrace(); } finally { if (ftp.isConnected()) { try { ftp.disconnect(); } catch (IOException ioe) { } } } return result; } private static String getSeparator(String path) { if(path.lastIndexOf(separator)==-1){ if(separator.equals("/")){ return "\\"; }else{ return "/"; } } return separator; }}5 然后是前端页面，首先我们要初始化kindeditor的配置数据，将图片上传插件当初拿出来。
var TT = WP = { // 编辑器参数 kingEditorParams : { //指定上传文件参数名称 filePostName : "uploadFile", //指定上传文件请求的url。 uploadJson : '${pageContext.request.contextPath}/upload/saveImage', imageSizeLimit : '10MB', //批量上传图片单张最大容量 imageUploadLimit : 3 ,//批量上传图片同时上传最多个数 //上传类型，分别为image、flash、media、file dir : "vegoods" }, init : function(data,picNum,dir,name){ // 初始化图片上传组件 this.initPicUpload(data,picNum,dir,name); this.initItemCat(data,type); }, // 初始化图片上传组件 initPicUpload : function(data,picNum,dir,name){ $(".picFileUpload").each(function(i,e){ var _ele = $(e); _ele.siblings("div.pics").remove(); _ele.after('\ <div class="pics">\ <ul></ul>\ </div>'); // 回显图片 if(data && data.pics){ var imgs = data.pics.split(","); for(var i in imgs){ if($.trim(imgs[i]).length > 0){ _ele.siblings(".pics").find("ul").append("<li><a href='"+imgs[i]+"' target='_blank'><img src='"+imgs[i]+"' width='80' height='50' /></a></li>"); } } } //给“上传图片按钮”绑定click事件 $(e).click(function(){ var form = $(this).parentsUntil("form").parent("form"); //打开图片上传窗口 KindEditor.editor({ //指定上传文件参数名称 filePostName : "uploadFile", //指定上传文件请求的url。 uploadJson : '${pageContext.request.contextPath}/upload/saveImage?dirs='+dir, imageSizeLimit : '10MB', //批量上传图片单张最大容量 imageUploadLimit : picNum ,//批量上传图片同时上传最多个数 //上传类型，分别为image、flash、media、file dir : dir }).loadPlugin('multiimage',function(){ var editor = this; editor.plugin.multiImageDialog({ clickFn : function(urlList) { var imgArray = []; KindEditor.each(urlList, function(i, data) { imgArray.push(data.url); form.find(".pics ul").append("<li><a href='"+data.url+"' target='_blank'><img src='"+data.url+"' width='80' height='50' /></a></li>"); }); form.find("[name="+name+"]").val(imgArray.join(",")); form.find("[name=press]").hide(); editor.hideDialog(); } }); }); }); }); }, // 初始化选择类目组件 initItemCat : function(data,type){ $(".selectItemCat").each(function(i,e){ var _ele = $(e); if(data && data.cid){ _ele.after("<span style='margin-left:10px;'>"+data.cid+"</span>"); }else{ _ele.after("<span style='margin-left:10px;'></span>"); } _ele.unbind('click').click(function(){ var hid = document.getElementById("hospital_id"); hid = hid==null?0:hid.value; $("<div>").css({padding:"5px"}).html("<ul>") .window({ width:'500', height:"450", modal:true, closed:true, iconCls:'icon-save', title:'选择类目', onOpen : function(){ var _win = this; $("ul",_win).tree({ url:'${pageContext.request.contextPath}/goods/ecs_category/categoryList?hospital_id='+hid, animate:true, onClick : function(node){ if($(this).tree("isLeaf",node.target)){ // 填写到cid中 _ele.parent().find("[name=cat_id]").val(node.id); _ele.next().text(node.text).attr("cat_id",node.id); document.getElementById("cat_name").style.display="none"; $(_win).window('close'); if (type ==1){ getgoods("${pageContext.request.contextPath}/goods/ecs_goods/getcat_goods?cat_id="+node.id); } if(data && data.fun){ data.fun.call(this,node); } } } }); }, onClose : function(){ $(this).window("destroy"); } }).window('open'); }); }); }, createEditor : function(select){ return KindEditor.create(select, TT.kingEditorParams); }, /** * 初始化单图片上传组件 <br/> * 选择器为：.onePicUpload <br/> * 上传完成后会设置input内容以及在input后面追加<img> */ initOnePicUpload : function(){ $(".onePicUpload").click(function(){ var _self = $(this); var dirname = _self.siblings("input").attr("name"); KindEditor.editor({ //指定上传文件参数名称 filePostName : "uploadFile", //指定上传文件请求的url。 uploadJson : '${pageContext.request.contextPath}/upload/saveImage?dirs='+dirname, //上传类型，分别为image、flash、media、file }).loadPlugin('image', function() { this.plugin.imageDialog({ showRemote : false, clickFn : function(url, title, width, height, border, align) { var input = _self.siblings("input"); input.parent().find("img").remove(); input.val(url); input.after("<br/><a href='"+url+"' target='_blank'><img src='"+url+"' width='80' height='50'/></a>"); this.hideDialog(); } }); }); }); }};这里初始化了多图片上传以及单图片上传插件并在上传之后将数值填入指定的位置。
然后初始化kindeditor插件
var itemAddEditor ; $(function(){ $("#save").on("click",function(){ itemAddEditor.sync(); validator.submitForm(false); }); }); //页面初始化完毕后执行此方法 $(function(){ //创建富文本编辑器 itemAddEditor = WP.createEditor("#desc"); //初始化类目选择和图片上传器 TT.initOnePicUpload(); });最后不要忘了导入kindeditor的js
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script><script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/lang/zh_CN.js"></script>这个是HTML代码
<a href="javascript:void(0)" class="easyui-linkbutton onePicUpload">图片上传</a>6 然后要在服务器中搭建一个ftp服务器，配置nginx反向代理（PS都是在服务器端）。
下载一个nginx的windows版本，打开conf目录找到nginx.conf。如果端口号重复的话，修改端口号listen。
listen 9999; server_name localhost;重点是修改下面的root，就是你服务器上ftp的根目录。
location / { root C:\jimingyang; index index.html index.htm; }阅读全文
0 0
- 利用Kindeditor、nginx和FTP实现文件上传
- SSM框架中-使用KindEditor+Nginx服务器+FTP服务，实现多文件上传
- 利用nginx实现文件上传和进度条功能
- 利用Nginx的上传模块和上传进度模块实现网页上传文件
- 利用Nginx的上传模块和上传进度模块实现网页上传文件
- 利用Nginx的上传模块和上传进度模块实现网页上传文件
- 利用Apache的commons-net实现FTP的文件读取、上传、下载、删除和移动功能
- 利用Apache的commons-net实现FTP的文件读取、上传、下载、删除和移动功能
- shell实现ftp上传和下载文件
- java ftp实现文件上传和删除
- ftp实现文件上传和下载
- FTP上传和下载文件--C++实现
- ftp实现文件的上传和下载
- 利用ftp多线程上传文件
- 利用edtftpj组件实现FTP文件的上传
- 利用edtftpj组件实现FTP文件的上传。
- 利用Socket 实现 FTP 文件上传和文件下载
- 利用commons-net-3.2.jar实现ftp文件上传功能
- mysql case when 中可以使用and
- Google Instant Apps VS 微信小程序
- java.lang.ArrayIndexOutOfBoundsException（数组越界）处理方法
- 未来10年，最夯的行业大汇总，有你的职位吗？
- Convolutional Neural Network
- 利用Kindeditor、nginx和FTP实现文件上传
- cmd写java（含package）
- Spring Boot 使用 Druid 和监控配置
- 插入排序
- Spark配置
- 如何在一数组中找到相同的值
- Train Problem I
- 支付宝大规模SOA系统(转载)
- Leetcode算法学习日志-215 Kth Largest Element in an Array
