Java ftpClient实现上传(附前台后台代码)
首先要导入common-net-2.0.jar包
上传下载思路:
点击“选择文件”按钮后弹出文件框,选择文件后直接锁屏(遮罩层)实现完成上传,上传完成后锁屏消失,出现已上传文件的列表,并提供了删除按钮。
该模块分为三个部分:
1.上传下载配置文件
2.后台上传下载操作文件
3.前台操作及显示效果文件
以下是主要文件:

不多说,上文件。
配置文件
 
#1:local 0:remote host uploadType=0 #store root localRoot=D: localCharSet=UTF-8 #remote host ip #servername=127.0.0.1 servername=192.168.1.123 port=21 #remoteRoot=F: #ftp direct root remoteRoot=root remoteCharSet=UTF-8 #username=test #password=test username=root password=roo
后台文件
控制器文件filecontroller.java
 
package web.controller.file; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date; import java.util.List; import java.util.Properties; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.commons.fileupload.util.Streams; import org.apache.log4j.Logger; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.util.MultiValueMap; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartFile; import org.springframework.web.multipart.MultipartHttpServletRequest; import org.springframework.web.multipart.MultipartResolver; import org.springframework.web.multipart.commons.CommonsMultipartResolver; import org.springframework.web.servlet.mvc.multiaction.MultiActionController; import com.alibaba.fastjson.JSONArray; import frame.platform.common.ResultContants; import frame.platform.utils.Conver; import web.entity.AttachementDetail; import web.entity.HandlerResult; import web.service.IAttachementDetailService; import web.interceptor.FTPUtils; import web.interceptor.Upload; @Controller //@RequestMapping(value="/file/*.do") @RequestMapping("/file") public class fileController extends MultiActionController{ //static final String DEFAULT_STORE_PATH = "D:";//默认存储地址 private Logger logger = Logger.getLogger(this.getClass()); private String uploadType; // 服务器端口 private String localRoot; // 服务器端口 private String remoteRoot; // 服务器端口 private String servername; // 服务器端口 @Autowired private IAttachementDetailService IAttachementDetailService ; /** * 初始化FTP服务器连接属性 */ public void initFTPConfig () { // 构造Properties对象 Properties properties = new Properties(); // 定义配置文件输入流 InputStream is = null; try { // 获取配置文件输入流 is = FTPUtils.class.getResourceAsStream("/config/ftp.properties"); // 加载配置文件 properties.load(is); // 读取配置文件 uploadType = (String) properties.getProperty("uploadType"); // 上传类型 1:local 0:remote localRoot = (String) properties.getProperty("localRoot"); // 上传类型 1:local 0:remote remoteRoot =(String) properties.getProperty("remoteRoot"); // 上传类型 1:local 0:remote servername =(String) properties.getProperty("servername"); // 上传类型 1:local 0:remote } catch (IOException e) { e.printStackTrace(); } } @RequestMapping(value="/saveFile") @ResponseBody public void saveFile(HttpServletRequest request,HttpServletResponse response) throws Exception { //1.数据入库 入库到 //2.文件上传到服务器 //3.上传成功后返回一个attachement_id给页面(最终一起提交完成实体与附件的关联) // 转型为MultipartHttpRequest HandlerResult result = new HandlerResult(); initFTPConfig(); try{ MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; // 获得上传的文件(根据前台的name名称得到上传的文件) MultiValueMap<String, MultipartFile> multiValueMap = multipartRequest.getMultiFileMap(); MultipartFile file = multipartRequest.getFile("file"); int type_id = Conver.convertInteger(multipartRequest.getParameter("type_id")); String realname = file.getOriginalFilename(); if(!file.isEmpty()){ //在这里就可以对file进行处理了,可以根据自己的需求把它存到数据库或者服务器的某个文件夹 AttachementDetail Attachements = new AttachementDetail(); Attachements.setType_id(type_id); Attachements.setFilestorename(Conver.convertNull(Conver.createId())); Attachements.setFilerealname(realname); //创建文件夹 String Remotepath=""; Upload uploadfile = new Upload(); String path = uploadfile.CreateFold(localRoot); if(uploadType.equals("0")){//FTP服务器 //当前日期 Calendar date = Calendar.getInstance(); Remotepath = remoteRoot+File.separator + date.get(Calendar.YEAR)+ File.separator + (date.get(Calendar.MONTH)+1) + File.separator+ date.get(Calendar.DAY_OF_MONTH); Attachements.setPath(Remotepath);//测试地址 }else{ Attachements.setPath(path);//测试地址 } String extfilename = uploadfile.getTypeName(file.getOriginalFilename()); Attachements.setFile_typename(extfilename); int i = this.IAttachementDetailService.insertAttachements(Attachements); int attache_id = Attachements.getAttache_id(); if(i > 0){ //success后 //1.copy文件到文件夹中 //2.文件重命名 //文件copy BufferedInputStream in = new BufferedInputStream(file.getInputStream()); BufferedOutputStream out = new BufferedOutputStream(new FileOutputStream(path +File.separator+file.getOriginalFilename())); Streams.copy(in, out, true); //rename String newname = Attachements.getFilestorename(); uploadfile.renameFile(path, realname, newname+extfilename); //判断是否需要远程FTP到服务器上 if(uploadType.equals("0")){//需要远程 //1.远程到FTP服务器上 //2.删掉原来本机缓存文件 FTPUtils ftputils = FTPUtils.getInstance(); //InputStream is = file.getInputStream(); //创建远程目录 //String RemotePath = uploadfile.CreateRrmoteFold(remoteRoot); String RemotePath = ftputils.CreateDirecroty(servername,remoteRoot); InputStream inputStream = new FileInputStream(new File(path+File.separator+newname+extfilename)); boolean isFtpSuccess = ftputils.storeFile(servername,File.separator+remoteRoot+RemotePath,newname+extfilename,inputStream); File delFile =new File(path+File.separator+newname+extfilename); boolean flag = false; if (delFile.isFile() && delFile.exists()) { delFile.delete(); flag = true; } if(isFtpSuccess && flag){ result.setSuccess(true); result.setCode(ResultContants.SUCCESS_CODE); result.setMsg(ResultContants.SUCCESS_MSG); result.setData(attache_id); } } result.setSuccess(true); result.setCode(ResultContants.SUCCESS_CODE); result.setMsg(ResultContants.SUCCESS_MSG); result.setData(attache_id); }else{ result.setSuccess(false); result.setCode(ResultContants.FAIL_CODE); result.setMsg(ResultContants.FAIL_MSG); } //System.out.println("================="+file.getOriginalFilename() + file.getSize()); } }catch(Exception e){ logger.error("保存附件失败", e); result.setSuccess(false); result.setCode(ResultContants.ERROR_CODE); result.setMsg(ResultContants.ERROR_MSG); } response.getWriter().print(JSONArray.toJSON(result)); } @RequestMapping(value="/deleteFile") @ResponseBody public void deleteFile(HttpServletRequest request,HttpServletResponse response) throws Exception{ HandlerResult result = new HandlerResult(); int attache_id = Conver.convertInteger(request.getParameter("attache_id")); try{ int i =this.IAttachementDetailService.deleteAttachementById(attache_id); if(i>0){ //success result.setSuccess(true); result.setCode(ResultContants.SUCCESS_CODE); result.setMsg(ResultContants.SUCCESS_MSG); }else{ result.setSuccess(false); result.setCode(ResultContants.FAIL_CODE); result.setMsg(ResultContants.FAIL_MSG); } } catch (Exception e) { result.setSuccess(false); result.setCode(ResultContants.FAIL_CODE); result.setMsg(ResultContants.FAIL_MSG); } response.getWriter().print(JSONArray.toJSON(result)); } @RequestMapping(value="/deleteFileRelation") @ResponseBody public void deleteFileRelation(HttpServletRequest request,HttpServletResponse response) throws Exception{ HandlerResult result = new HandlerResult(); int attache_id = Conver.convertInteger(request.getParameter("attache_id")); AttachementDetail attachementInfo = this.IAttachementDetailService.getAttachementById(attache_id); //String storePath = attachementInfo.getPath()+File.separator+attachementInfo.getFilestorename()+attachementInfo.getFile_typename(); try{ boolean flag = false; int i =this.IAttachementDetailService.deleteAttachementRelationById(attache_id); if(uploadType.equals("0")){//在FTP服务器上删除 FTPUtils ftputils = FTPUtils.getInstance(); flag = ftputils.deleteFile(servername,File.separator+attachementInfo.getPath()+File.separator,attachementInfo.getFilestorename()+attachementInfo.getFile_typename()); if(i>0 && flag){ //success result.setSuccess(true); result.setCode(ResultContants.SUCCESS_CODE); result.setMsg(ResultContants.SUCCESS_MSG); }else{ result.setSuccess(false); result.setCode(ResultContants.FAIL_CODE); result.setMsg(ResultContants.FAIL_MSG); } }else{ String storePath = attachementInfo.getPath()+File.separator+attachementInfo.getFilestorename()+attachementInfo.getFile_typename(); File file = new File(storePath); if(file.exists()&& file.isFile()){ flag =file.delete(); } if(flag){ //success result.setSuccess(true); result.setCode(ResultContants.SUCCESS_CODE); result.setMsg(ResultContants.SUCCESS_MSG); }else{ result.setSuccess(false); result.setCode(ResultContants.FAIL_CODE); result.setMsg(ResultContants.FAIL_MSG); } } } catch (Exception e) { result.setSuccess(false); result.setCode(ResultContants.FAIL_CODE); result.setMsg(ResultContants.FAIL_MSG); } response.getWriter().print(JSONArray.toJSON(result)); } @RequestMapping(value="/downloadFile") @ResponseBody public void downloadFile(HttpServletRequest request,HttpServletResponse response) throws Exception{ int attache_id = Conver.convertInteger(request.getParameter("attache_id")); AttachementDetail attachementInfo = this.IAttachementDetailService.getAttachementById(attache_id); String storePath = attachementInfo.getPath()+File.separator+attachementInfo.getFilestorename()+attachementInfo.getFile_typename(); String RemotePath = File.separator+attachementInfo.getPath()+File.separator; File file = new File(storePath);// path是根据日志路径和文件名拼接出来的 String filename = file.getName();// 获取文件名称 String LocalPath = remoteRoot.equals("") ? storePath : storePath.replace(remoteRoot, localRoot); //如果是上传到远程FTP服务器的话,需要先到FTP服务器上下载到我们服务器的缓冲目录(即localRoot) if(uploadType.equals("0")){//需要远程 FTPUtils ftputils = FTPUtils.getInstance(); //InputStream InputFileStream = ftputils.retrieveFile(servername,RemotePath,attachementInfo.getFilestorename()+attachementInfo.getFile_typename()); boolean downStatus = ftputils.download(servername,RemotePath,filename,LocalPath); } //如果是上传到远程FTP服务器的话,需要先到FTP服务器上下载到我们服务器的缓冲目录(即localRoot) BufferedInputStream fis = new BufferedInputStream(new FileInputStream(LocalPath)); byte[] buffer = new byte[fis.available()]; fis.read(buffer); fis.close(); response.reset(); File downfile = new File(LocalPath);// path是根据日志路径和文件名拼接出来的 String outputName = Upload.encodeFilename(attachementInfo.getFilerealname(), request);//处理中文文件名 response.addHeader("Content-Disposition", "attachment;filename=" +outputName); response.addHeader("Content-Length", "" + downfile.length()); OutputStream os = new BufferedOutputStream(response.getOutputStream()); response.setContentType("application/octet-stream"); os.write(buffer);// 输出文件 os.flush(); os.close(); if(uploadType.equals("0")){//需要远程 //最后删掉本地文件 boolean flag = false; if (downfile.isFile() && downfile.exists()) { downfile.delete(); flag = true; } } } }
FTP服务器工具类FTPUtils.java
 
package web.interceptor; import java.io.BufferedOutputStream; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import java.util.Calendar; import java.util.Properties; import org.apache.log4j.Logger; import org.apache.commons.net.ftp.FTPClient; import org.apache.commons.net.ftp.FTPFile; import org.apache.commons.net.ftp.FTPReply; import sun.net.ftp.FtpClient; /** * FTP服务器工具类 */ public class FTPUtils { private static FTPUtils ftpUtils; private FTPClient ftpClient; private String port; // 服务器端口 private String username; // 用户登录名 private String password; // 用户登录密码 private String remoteCharSet; private String localCharSet; private InputStream is; // 文件下载输入流 private Logger logger = Logger.getLogger(this.getClass()); /** * 私有构造方法 */ private FTPUtils() { initConfig(); if (null == ftpClient) { ftpClient = new FTPClient(); } } /** * 获取FTPUtils对象实例 * @return * FTPUtils对象实例 */ public synchronized static FTPUtils getInstance () { if (null == ftpUtils) { ftpUtils = new FTPUtils(); } return ftpUtils; } /** * 初始化FTP服务器连接属性 */ public void initConfig () { // 构造Properties对象 Properties properties = new Properties(); // 定义配置文件输入流 InputStream is = null; try { // 获取配置文件输入流 is = FTPUtils.class.getResourceAsStream("/config/ftp.properties"); // 加载配置文件 properties.load(is); // 读取配置文件 port = (String) properties.getProperty("port"); // 设置端口 username = (String) properties.getProperty("username"); // 设置用户名 password = (String) properties.getProperty("password"); // 设置密码 remoteCharSet = (String) properties.getProperty("remoteCharSet"); localCharSet = (String) properties.getProperty("localCharSet"); } catch (IOException e) { e.printStackTrace(); } finally { // 判断输入流是否为空 if (null != is) { try { // 关闭输入流 is.close(); } catch (IOException e) { e.printStackTrace(); } } } } /** * 连接(配置通用连接属性)至服务器 * * @param serverName * 服务器名称 * @param remotePath * 当前访问目录 * @return * <b>true</b>:连接成功 * <br/> * <b>false</b>:连接失败 */ public boolean connectToTheServer (String serverName, String remotePath) { // 定义返回值 boolean result = false; try { // 连接至服务器,端口默认为21时,可直接通过URL连接 ftpClient.connect(serverName, Integer.parseInt(port)); System.out.println(ftpClient.getReplyCode()); // 登录服务器 ftpClient.login(username, password); System.out.println(ftpClient.getReplyCode()); // 判断返回码是否合法 if (!FTPReply.isPositiveCompletion(ftpClient.getReplyCode())) { // 不合法时断开连接 ftpClient.disconnect(); // 结束程序 return result; } // 设置文件操作目录 if(remotePath.indexOf(File.separator)>-1){ //多级目录要递归进入到目录内 int maxIndex=10; int start = 0; int end = 0; if (remotePath.startsWith(File.separator)) { start = 1; } else { start = 0; } end = remotePath.indexOf(File.separator, start); while (true) { String subDirectory = new String(remotePath.substring(start,end)); ftpClient.changeWorkingDirectory(subDirectory); start = end + 1; end = remotePath.indexOf(File.separator, start); if (end <= start) { break; } if (maxIndex == 0) break; maxIndex--; } //多级目录递归 }else{ result = ftpClient.changeWorkingDirectory(remotePath); } // 设置文件类型,二进制 result = ftpClient.setFileType(FTPClient.BINARY_FILE_TYPE); // 设置缓冲区大小 ftpClient.setBufferSize(3072); // 设置字符编码 ftpClient.setControlEncoding("UTF-8"); } catch (IOException e) { e.printStackTrace(); } return result; } /** * 上传文件至FTP服务器 * * @param serverName * 服务器名称 * @param storePath * 上传文件存储路径 * @param fileName * 上传文件存储名称 * @param is * 上传文件输入流 * @return * <b>true</b>:上传成功 * <br/> * <b>false</b>:上传失败 */ public boolean storeFile (String serverName, String storePath, String fileName, InputStream is) { boolean result = false; try { // 连接至服务器 result = connectToTheServer(serverName, storePath); // 判断服务器是否连接成功 if (result) { // 上传文件 //当前日期 result = ftpClient.storeFile(fileName, is); } // 关闭输入流 is.close(); } catch (IOException e) { e.printStackTrace(); } finally { // 判断输入流是否存在 if (null != is) { try { // 关闭输入流 is.close(); } catch (IOException e) { e.printStackTrace(); } } // 登出服务器并断开连接 //ftpUtils.logout(); } return result; } /** * 下载FTP服务器文件至本地 * 操作完成后需调用logout方法与服务器断开连接 * * @param serverName * 服务器名称 * @param remotePath * 下载文件存储路径 * @param fileName * 下载文件存储名称 * @return * <b>InputStream</b>:文件输入流 */ public InputStream retrieveFile (String serverName, String remotePath, String fileName) { try { boolean result = false; // 连接至服务器 result = connectToTheServer(serverName, remotePath); // 判断服务器是否连接成功 if (result) { // 获取文件输入流 is = ftpClient.retrieveFileStream(fileName); } } catch (IOException e) { e.printStackTrace(); } return is; } /** * 从ftp服务器上下载文件到本地 * @param remoteFileName:ftp服务器上文件名称 * @param localFileName:本地文件名称 * @return * @throws IOException */ public boolean download(String serverName, String remotePath, String remoteFileName, String localFileName) throws IOException { boolean flag = false; File outfile = new File(localFileName); BufferedOutputStream bos = null; try { boolean result = false; // 连接至服务器 result = connectToTheServer(serverName, remotePath); // 判断服务器是否连接成功 if (result) { /*FTPFile[] files = ftpClient.listFiles(); for (int i=0;i<files.length;i++){ System.out.println(files[i]); }*/ bos = new BufferedOutputStream(new FileOutputStream(outfile)); ftpClient.enterLocalPassiveMode(); flag = ftpClient.retrieveFile(remoteFileName, bos); System.out.println(ftpClient.getReplyCode()); } } catch (IOException e) { flag = false; return flag; } finally { try { if (bos != null) bos.flush(); bos.close(); } catch (Exception e) { e.printStackTrace(); } // 登出服务器并断开连接 ftpUtils.logout(); } return flag; } /** * 删除FTP服务器文件 * * @param serverName * 服务器名称 * @param remotePath * 当前访问目录 * @param fileName * 文件存储名称 * @return * true:删除成功 * false:删除失败 */ public boolean deleteFile (String serverName, String remotePath, String fileName) { boolean result = false; // 连接至服务器 result = connectToTheServer(serverName, remotePath); // 判断服务器是否连接成功 if (result) { try { // 删除文件 result = ftpClient.deleteFile(fileName); System.out.println(ftpClient.getReplyCode()); } catch (IOException e) { e.printStackTrace(); } finally { // 登出服务器并断开连接 ftpUtils.logout(); } } return result; } /** * 检测FTP服务器文件是否存在 * * @param serverName * 服务器名称 * @param remotePath * 检测文件存储路径 * @param fileName * 检测文件存储名称 * @return * <b>true</b>:文件存在 * <br/> * <b>false</b>:文件不存在 */ public boolean checkFile (String serverName, String remotePath, String fileName) { boolean result = false; try { // 连接至服务器 result = connectToTheServer(serverName, remotePath); // 判断服务器是否连接成功 if (result) { // 默认文件不存在 result = false; // 获取文件操作目录下所有文件名称 String[] remoteNames = ftpClient.listNames(); // 循环比对文件名称,判断是否含有当前要下载的文件名 for (String remoteName: remoteNames) { if (fileName.equals(remoteName)) { result = true; } } } } catch (IOException e) { e.printStackTrace(); } finally { // 登出服务器并断开连接 ftpUtils.logout(); } return result; } /** * 登出服务器并断开连接 * * @param ftp * FTPClient对象实例 * @return * <b>true</b>:操作成功 * <br/> * <b>false</b>:操作失败 */ public boolean logout () { boolean result = false; if (null != is) { try { // 关闭输入流 is.close(); } catch (IOException e) { e.printStackTrace(); } } if (null != ftpClient) { try { // 登出服务器 result = ftpClient.logout(); } catch (IOException e) { e.printStackTrace(); } finally { // 判断连接是否存在 if (ftpClient.isConnected()) { try { // 断开连接 ftpClient.disconnect(); } catch (IOException e) { e.printStackTrace(); } } } } return result; } /** * CreateDirecroty(递归创建远程服务器目录) * @param remoteFileDir 远程服务器文件绝对路径 * @param ftpClient FTPClient对象 * @return 目录创建是否成功 * @throws IOException e */ public String CreateDirecroty(String serverName,String defaultFold) throws IOException { boolean result = false; result = connectToTheServer(serverName, defaultFold); //当前日期 Calendar date = Calendar.getInstance(); String directory = File.separator + date.get(Calendar.YEAR)+ File.separator + (date.get(Calendar.MONTH)+1) + File.separator+ date.get(Calendar.DAY_OF_MONTH)+File.separator; // 判断服务器是否连接成功 if (result) { //格式化并转换String类型 if (!directory.equalsIgnoreCase(defaultFold)){ // 如果远程目录不存在,则递归创建远程服务器目录 int maxIndex = 10;// 最大创建层级数 int start = 0; int end = 0; if (directory.startsWith(File.separator)) { start = 1; } else { start = 0; } end = directory.indexOf(File.separator, start); while (true) { String subDirectory = new String(directory.substring(start, end)); if (!ftpClient.changeWorkingDirectory(subDirectory)) { if (ftpClient.makeDirectory(subDirectory)) { ftpClient.changeWorkingDirectory(subDirectory); } else { logger.error("创建目录失败"); return ""; } } start = end + 1; end = directory.indexOf(File.separator, start); // 检查所有目录是否创建完毕 if (end <= start) { break; } if (maxIndex == 0) break; maxIndex--; } } } //logout(); return directory; } }
前台文件
展示文件html
 
<tr><td colspan="2" width="20%"><div>请上传以下文件:</div><div class="attachesuggest">(单个文件请限定在10MB以内)</div></td><td colspan="9" width="80%"><div class="row"><div class="col-xs-2"><label style="padding-top:10px;" class=" pull-left"><span class="orange1 pull-left mustAttache" style="color:#e4007f;width:10px;">*</span><span>结算表</span><span class="hidden typeidready">4</span></label></div><div class="col-xs-8 typeid4"><a style="display:inline-block; width:100px; height:40px;line-height:40px;float:left;text-decoration:none;border:1px solid #eee;border-radius:5px !important; position:relative; overflow:hidden;"><input type="file" id="file" class=" pull-left" style="position:absolute; right:0; top:0; font-size:100px; opacity:0; filter:alpha(opacity=0);" onchange="eventStart(this,4)" value="选择文件">选择文件</a><div class="pull-right uploadFileHover" style="width:300px;background:#eee;border-radius:5px;padding:5px;"><input name="myfile" type="file" style="display:none;"><input type="text" name="type_id" class="hidden" value="4"><input type="text" class="hidden" name="attache_id[]" value="1168"><a href="/webwork/file/downloadFile.do?attache_id=1168" class="uploadFileList">项目评审表.docx</a><div class="pull-right"><div><img src="/webwork/images/attache/delete.png" style="float:right; " onclick="DeleteFile(this)"></div><div> </div><div style="clear: both; display: block;" class="uploadSuccess">提交成功</div></div></div></div></div><div class="row" style="margin-top:10px;"><div class="col-xs-2"> </div><div class="col-xs-8"><div class="pull-right uploadFileHover" style="width:300px;background:#eee;border-radius:5px;padding:5px;"><input name="myfile" type="file" style="display:none;"><input type="text" name="type_id" class="hidden" value="4"><input type="text" class="hidden" name="attache_id[]" value="1212"><a href="/webwork/file/downloadFile.do?attache_id=1212" class="uploadFileList">项目评审表.docx</a><div class="pull-right"><div><img src="/webwork/images/attache/delete.png" style="float:right; " onclick="DeleteFile(this)"></div><div> </div><div style="clear: both; display: block;" class="uploadSuccess">提交成功</div></div></div></div></div><div class="row" style="margin-top:10px;"><div class="col-xs-2"> </div><div class="col-xs-8"><div class="pull-right uploadFileHover" style="width:300px;background:#eee;border-radius:5px;padding:5px;"><input name="myfile" type="file" style="display:none;"><input type="text" name="type_id" class="hidden" value="4"><input type="text" class="hidden" name="attache_id[]" value="1210"><a href="/webwork/file/downloadFile.do?attache_id=1210" class="uploadFileList">技术支撑申请单.docx</a><div class="pull-right"><div><img src="/webwork/images/attache/delete.png" style="float:right; " onclick="DeleteFile(this)"></div><div> </div><div style="clear: both; display: block;" class="uploadSuccess">提交成功</div></div></div></div></div></td></tr>
操作效果js
 
function eventStart(obj,type_id){ var eventHtml=''; var attachesize=$(obj).get(0).files[0].size; var attachesizeM=(attachesize/1024)/1024; if(attachesizeM>10){ PM.show_alert('warn', '', '提示', '确定', '单个文件请限定在10MB以内!'); return false; } var fileId = createMarker(); if($(obj).parent().parent().find(".uploadFileList").length==0){ eventHtml+='<div class="pull-right uploadFileHover file'+fileId+'" style="width:300px;background:#eee;border-radius:5px;padding:5px;"><input name="myfile" type="file" style="display:none;"><a href ="javascript:return false;" class="uploadFileList" >'+$(obj).parent().parent().find("#file").get(0).files[0].name+'</a><div class="pull-right"><div><img src="/webwork/images/attache/delete.png" style="float:right; " onClick="DeleteFile(this)"></div><div> </div><div style="clear:both;display:none;" class="uploadSuccess">提交成功</div></div></div>'; $(obj).parent().parent().append(eventHtml); $(obj).parent().parent().parent().parent().find("input[name='myfile']").last().get(0).files[0]=$(obj).parent().parent().find("#file").get(0).files[0]; }else{ eventHtml+='<div class="row" style="margin-top:10px;">'; eventHtml+='<div class="col-xs-2">'; eventHtml+=' </div>'; eventHtml+='<div class="col-xs-8">'; eventHtml+='<div class="uploadFileHover pull-right file'+fileId+'" style="width:300px;background:#eee;border-radius:5px;padding:5px;"><input name="myfile" type="file" style="display:none;"><a href ="javascript:return false;" class="uploadFileList">'+$(obj).parent().parent().find("#file").get(0).files[0].name+'</a><div class="pull-right"><div><img src="/webwork/images/attache/delete.png" onClick="DeleteFile(this)" style="float:right;"></div> <div> </div><div style="clear:both;display:none;" class="uploadSuccess">提交成功</div></div></div>'; eventHtml+='</div>'; eventHtml+='</div>'; $(obj).parent().parent().parent().parent().append(eventHtml); $(obj).parent().parent().parent().parent().find("input[name='myfile']").last().get(0).files[0]=$(obj).parent().parent().find("#file").get(0).files[0]; } $(".uploadFileHover").hover(function(){ $(this).find("img").attr("src","/webwork/images/attache/delete_pre.png"); },function(){ $(this).find("img").attr("src","/webwork/images/attache/delete.png"); }); upLoadFile(obj,type_id,fileId); } function upLoadFile(obj,type_id,fileId){ var uploadFileObj=$(obj); var FileController = basePath+'file/saveFile.do'; var DownController = basePath+'file/downloadFile.do'; //XMLHttpRequest 对象 var xhr = new XMLHttpRequest(); xhr.open("post", FileController, true); var fileObj = uploadFileObj.get(0).files[0]; // js 获取文件对象 if(typeof(fileObj) == "undefined"){ return false; } var FileController = basePath+'file/saveFile.do'; var DownController = basePath+'file/downloadFile.do'; // FormData 对象 var form = new FormData(); form.append("type_id", type_id); // 可以增加表单数据 form.append("file", fileObj); // 文件对象 //alert(fileId); // XMLHttpRequest 对象 var xhr = new XMLHttpRequest(); xhr.open("post", FileController, true); PM.upload_loading_show("正在为您上传附件,请稍后!"); xhr.onload = function() { var obj = JSON.parse(xhr.response); if(obj.success==true){ PM.upload_loading_remove(); console.log($(".file"+fileId)); //alert(obj.data); var downLink =DownController+'?attache_id='+obj.data; $(".file"+fileId).find(".uploadFileList").attr("href",downLink); $(".file"+fileId).find('.uploadSuccess').css("display","block"); var innerHtml = "<input name='attache_id[]' type='hidden' value='"+obj.data+"'><input name='type_id' type='hidden' value="+type_id+">"; $(".file"+fileId).find(".uploadFileList").append(innerHtml); }else{ PM.show_alert('no', '', '提示', '确定', '上传失败!'); return false; } }; xhr.onerror = function() { PM.show_alert('tips', '', '提示', '确定', '服务器连接失败!'); }; xhr.send(form); } // /* * 遮罩层提示信息 * */ upload_loading_show: function(text){ $('body').append('<div id="upload_loading" class="cover"><div class="coverIn"><img class="coverimage" src="/webwork/images/pages/loading.gif"><br /><div class="covertext">'+text+'</div></div></div>'); $('body').css("overflow","hidden"); $("#upload_loading").show(); setTimeout('$("#cover").hide();', 1000); }
漏掉一个方法:
upload_loading_remove: function(text){
    $("#upload_loading").remove();
}
遮罩层样式文件
 
.upload_loading{ position:fixed; top: 0px; right:0px; bottom:0px;filter: alpha(opacity=60); background-color: #777; background-color: RGBA(0,0,0,0.5); z-index: 1002; left: 0px; display:none; /*opacity:0.5; -moz-opacity:0.5;*/ } .coverIn{ width: 300px; height: 150px; margin: 0 auto; position: relative; top: 0px; background-color: fff; font-size: 20px; color: #000; text-align: center; -moz-border-radius: 5px !important; /* Firefox */ -webkit-border-radius: 5px !important; /* Safari 和 Chrome */ border-radius: 5px !important; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */ } .coverimage{ margin-top:26px; } .covertext{ margin-top:15px; }
看看完整效果吧:


就这么多了,可能不太完整,记录下,以备后期用到。


 
 
                
            
         浙公网安备 33010602011771号
浙公网安备 33010602011771号