我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用。

首先我们需要了解的是上传文件三要素:

1.表单提交方式:post (get方式提交有大小限制,post没有)

2.表单的enctype属性:必须设置为multipart/form-data.

3.表单必须有文件上传项:file,且文件项需要给定name值

上传文件夹需要增加一个属性webkitdirectory,像这样:

<input id="fileFolder" name="fileFolder" type="file"  webkitdirectory>

不过webkitdirectory属性有个问题,只能支持高版本的chrome,不能支持低版本的IE,如ie6,ie7,ie8,不能做到全浏览器适配,运行环境比较单一。

js中可以判断文件夹中文件数量及文件夹大小是否符合要求,不符合要求不能向后台提交:

前台HTML模板

this.GetHtmlFiles = function()

{

var acx = "";

acx += '<div class="file-item" id="tmpFile" name="fileItem">\

<div class="img-box"><img name="file" src="js/file.png"/></div>\

<div class="area-l">\

<div class="file-head">\

<div name="fileName" class="name">HttpUploader程序开发.pdf</div>\

<div name="percent" class="percent">(35%)</div>\

<div name="fileSize" class="size" child="1">1000.23MB</div>\

</div>\

<div class="process-border"><div name="process" class="process"></div></div>\

<div name="msg" class="msg top-space">15.3MB 20KB/S 10:02:00</div>\

</div>\

<div class="area-r">\

<span class="btn-box" name="cancel" title="取消"><img name="stop" src="js/stop.png"/><div>取消</div></span>\

<span class="btn-box hide" name="post" title="继续"><img name="post" src="js/post.png"/><div>继续</div></span>\

<span class="btn-box hide" name="stop" title="停止"><img name="stop" src="js/stop.png"/><div>停止</div></span>\

<span class="btn-box hide" name="del" title="删除"><img name="del" src="js/del.png"/><div>删除</div></span>\

</div>';

acx += '</div>';

//文件夹模板

acx += '<div class="file-item" name="folderItem">\

<div class="img-box"><img name="folder" src="js/folder.png"/></div>\

<div class="area-l">\

<div class="file-head">\

<div name="fileName" class="name">HttpUploader程序开发.pdf</div>\

<div name="percent" class="percent">(35%)</div>\

<div name="fileSize" class="size" child="1">1000.23MB</div>\

</div>\

<div class="process-border top-space"><div name="process" class="process"></div></div>\

<div name="msg" class="msg top-space">15.3MB 20KB/S 10:02:00</div>\

</div>\

<div class="area-r">\

<span class="btn-box" name="cancel" title="取消"><img name="stop" src="js/stop.png"/><div>取消</div></span>\

<span class="btn-box hide" name="post" title="继续"><img name="post" src="js/post.png"/><div>继续</div></span>\

<span class="btn-box hide" name="stop" title="停止"><img name="stop" src="js/stop.png"/><div>停止</div></span>\

<span class="btn-box hide" name="del" title="删除"><img name="del" src="js/del.png"/><div>删除</div></span>\

</div>';

acx += '</div>';

//上传列表

acx += '<div class="files-panel" name="post_panel">\

<div name="post_head" class="toolbar">\

<span class="btn" name="btnAddFiles">选择多个文件</span>\

<span class="btn" name="btnAddFolder">选择文件夹</span>\

<span class="btn" name="btnPasteFile">粘贴文件和目录</span>\

<span class="btn" name="btnSetup">安装控件</span>\

</div>\

<div class="content" name="post_content">\

<div name="post_body" class="file-post-view"></div>\

</div>\

<div class="footer" name="post_footer">\

<span class="btn-footer" name="btnClear">清除已完成文件</span>\

</div>\

</div>';

return acx;

};

选择文件,选择文件夹,粘贴文件和文件夹的逻辑

this.open_files = function (json)

{

for (var i = 0, l = json.files.length; i < l; ++i)

{

this.addFileLoc(json.files[i]);

}

setTimeout(function () { _this.PostFirst(); },500);

};

this.open_folders = function (json)

{

for (var i = 0, l = json.folders.length; i < l; ++i) {

this.addFolderLoc(json.folders[i]);

}

setTimeout(function () { _this.PostFirst(); }, 500);

};

this.paste_files = function (json)

{

for (var i = 0, l = json.files.length; i < l; ++i)

{

this.addFileLoc(json.files[i]);

}

};

后台在接收文件夹时不同之处在需要用MultipartHttpServletRequest

boolean isMultipart = ServletFileUpload.isMultipartContent(request);

FileItemFactory factory = new DiskFileItemFactory();

ServletFileUpload upload = new ServletFileUpload(factory);

List files = null;

try

{

files = upload.parseRequest(request);

}

catch (FileUploadException e)

{// 解析文件数据错误

out.println("read file data error:" + e.toString());

return;

}

FileItem rangeFile = null;

// 得到所有上传的文件

Iterator fileItr = files.iterator();

// 循环处理所有文件

while (fileItr.hasNext())

{

// 得到当前文件

rangeFile = (FileItem) fileItr.next();

if(StringUtils.equals( rangeFile.getFieldName(),"pathSvr"))

{

pathSvr = rangeFile.getString();

pathSvr = PathTool.url_decode(pathSvr);

}

}

server端的包和类

文件块处页面,验证代码部分

boolean verify = false;

String msg = "";

String md5Svr = "";

long blockSizeSvr = rangeFile.getSize();

if(!StringUtils.isBlank(blockMd5))

{

md5Svr = Md5Tool.fileToMD5(rangeFile.getInputStream());

}

verify = Integer.parseInt(blockSize) == blockSizeSvr;

if(!verify)

{

msg = "block size error sizeSvr:" + blockSizeSvr + "sizeLoc:" + blockSize;

}

if(verify && !StringUtils.isBlank(blockMd5))

{

verify = md5Svr.equals(blockMd5);

if(!verify) msg = "block md5 error";

}

if(verify)

{

//保存文件块数据

FileBlockWriter res = new FileBlockWriter();

//仅第一块创建

if( Integer.parseInt(blockIndex)==1) res.CreateFile(pathSvr,Long.parseLong(lenLoc));

res.write( Long.parseLong(blockOffset),pathSvr,rangeFile);

up6_biz_event.file_post_block(id,Integer.parseInt(blockIndex));

JSONObject o = new JSONObject();

o.put("msg", "ok");

o.put("md5", md5Svr);

o.put("offset", blockOffset);//基于文件的块偏移位置

msg = o.toString();

}

rangeFile.delete();

out.write(msg);

生成文件名称的逻辑

publicString genFile(int uid, String md5,String nameLoc) throws IOException

{

SimpleDateFormat fmtDD = newSimpleDateFormat("dd");

SimpleDateFormat fmtMM = newSimpleDateFormat("MM");

SimpleDateFormat fmtYY = newSimpleDateFormat("yyyy");

Date date = newDate();

String strDD = fmtDD.format(date);

String strMM = fmtMM.format(date);

String strYY = fmtYY.format(date);

String path = this.getRoot() + "/";

path = path.concat(strYY);

path = path.concat("/");

path = path.concat(strMM);

path = path.concat("/");

path = path.concat(strDD);

path = path.concat("/");

path = path.concat(md5);

path = path.concat(".");

path = path.concat(PathTool.getExtention(nameLoc));

File fl = newFile(path);

return fl.getCanonicalPath();//

}

以下是service层做的处理:

整体模块划分如下:

其中数据类实体逻辑处理如下

publicclassFileInf {

public FileInf(){}

publicStringid="";

publicStringpid="";

publicStringpidRoot="";

/**  * 表示当前项是否是一个文件夹项。    */

publicbooleanfdTask=false;

//   /// 是否是文件夹中的子文件  /// </summary>

publicbooleanfdChild=false;

/**  * 用户ID。与第三方系统整合使用。    */

publicintuid=0;

/**  * 文件在本地电脑中的名称   */

publicStringnameLoc="";

/**  * 文件在服务器中的名称。   */

publicStringnameSvr="";

/**  * 文件在本地电脑中的完整路径。示例:D:\Soft\QQ2012.exe */

publicStringpathLoc="";

/**  * 文件在服务器中的完整路径。示例:F:\\ftp\\uer\\md5.exe     */

publicStringpathSvr="";

/**  * 文件在服务器中的相对路径。示例:/www/web/upload/md5.exe   */

publicStringpathRel="";

/**  * 文件MD5    */

publicStringmd5="";

/**  * 数字化的文件长度。以字节为单位,示例:120125    */

publiclonglenLoc=0;

/**  * 格式化的文件尺寸。示例:10.03MB   */

publicStringsizeLoc="";

/**  * 文件续传位置。  */

publiclongoffset=0;

/**  * 已上传大小。以字节为单位 */

publiclonglenSvr=0;

/**  * 已上传百分比。示例:10%  */

publicStringperSvr="0%";

publicbooleancomplete=false;

publicDatePostedTime = newDate();

publicbooleandeleted=false;

/**  * 是否已经扫描完毕,提供给大型文件夹使用,大型文件夹上传完毕后开始扫描。  */

publicbooleanscaned=false;

}

后台数据库中的逻辑基本上都用到了上面的实体类

文件数据表操作类如下

加载所有未完成的文件列表

publicString GetAllUnComplete(int f_uid)

{

StringBuilder sb = newStringBuilder();

sb.append("select ");

sb.append(" f_id");

sb.append(",f_fdTask");

sb.append(",f_nameLoc");

sb.append(",f_pathLoc");

sb.append(",f_md5");

sb.append(",f_lenLoc");

sb.append(",f_sizeLoc");

sb.append(",f_pos");

sb.append(",f_lenSvr");

sb.append(",f_perSvr");

sb.append(",f_complete");

sb.append(",f_pathSvr");//fix(2015-03-16):修复无法续传文件的问题。

sb.append(" from up6_files ");//change(2015-03-18):联合查询文件夹数据

sb.append(" where f_uid=? and f_deleted=0 and f_fdChild=0 and f_complete=0 and f_scan=0");//fix(2015-03-18):只加载未完成列表

ArrayList<FileInf> files = newArrayList<FileInf>();

DbHelper db = newDbHelper();

PreparedStatement cmd = db.GetCommand(sb.toString());

try {

cmd.setInt(1, f_uid);

ResultSet r = db.ExecuteDataSet(cmd);

while(r.next())

{

FileInf f          = newFileInf();

f.uid              = f_uid;

f.id              = r.getString(1);

f.fdTask     = r.getBoolean(2);

f.nameLoc         = r.getString(3);

f.pathLoc         = r.getString(4);

f.md5             = r.getString(5);

f.lenLoc     = r.getLong(6);

f.sizeLoc         = r.getString(7);

f.offset     = r.getLong(8);

f.lenSvr     = r.getLong(9);

f.perSvr     = r.getString(10);

f.complete        = r.getBoolean(11);

f.pathSvr     = r.getString(12);//fix(2015-03-19):修复无法续传文件的问题。

files.add(f);

}

r.close();

cmd.getConnection().close();

cmd.close();

} catch (SQLException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

if(files.size() < 1) returnnull;

Gson g = newGson();

return g.toJson( files);//bug:arrFiles为空时,此行代码有异常

}

实现后的整体效果如下

文件夹上传完后的效果

服务器保存的文件夹数据,而且层级结构与本地客户端是一致的。这在OA系统中,或者网盘系统中使用时是非常有用的

后端代码逻辑大部分是相同的,目前能够支持MySQL,Oracle,SQL。在使用前需要配置一下数据库,可以参考我写的这篇文章:http://blog.ncmem.com/wordpress/2019/08/12/java-http%E5%A4%A7%E6%96%87%E4%BB%B6%E6%96%AD%E7%82%B9%E7%BB%AD%E4%BC%A0%E4%B8%8A%E4%BC%A0/

jsp页面实现上传文件,并且还得支持断点续传的功能的更多相关文章

  1. JSP SMARTUPLOAD组件:上传文件时同时获取表单参数

    原因很简单: 注意更改from 属性啊!否则为null! 因为你用jspsmartuploadsmart时post请求 的格式是multipart/form-data,即enctype="m ...

  2. 关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手

    关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手   本人菜鸟一枚,最近公司有需求要用到富文本编辑器,我选择的是百度的ueditor富文本编辑器,闲话不多说,进入正 ...

  3. web 开发之js---巧用iframe实现jsp无刷新上传文件

    首先要说的就是 ajax 是无法实现上传文件的,可以想一下ajax与后台通信都是通过传递字符串,怎么能传递文件呢?其实出于安全考虑js是不能操作文件的,所以就不要再说用ajax来实现文件的上传了,这是 ...

  4. JSP通过SmartUpload上传文件实例

    httpRequest.setCharacterEncoding("gbk"); String preName = genName.doMake();//设置文件前缀名 Strin ...

  5. JSP简单练习-上传文件

    注意:在编写上传文件的代码时,需确保"WEB-INF/lib"下含有jspsmartupload.jar包.否则会出错. jspSmartupload.jar下载 <!-- ...

  6. jsp页面附件上传暂存的处理

    有没有遇到页面是新建一个新对象,对象里面需要上传附件,但是只有当对象保存时才将附件一同上传到数据库的情况? 这种情况的处理可以参考狐狸的思路: @jsp页面创建一个botton bn,该button的 ...

  7. C#模拟POST上传文件帮助类(支持https、http)

    public static int PostFile(string getUrl, CookieContainer cookieContainer, HttpHeader header, string ...

  8. 三种方式上传文件-Java

    前言:负责,因为该项目他(jetty嵌入式开始SpringMvc)实现文件上传的必要性,并拥有java文件上传这一块还没有被曝光.并 Http 更多晦涩协议.因此,这种渐进的方式来学习和实践上载文件的 ...

  9. ajax +jsp+iframe无刷新上传文件[转]

    http://hi.baidu.com/zj360202/blog/item/f23e3711f929c774cb80c475.html ajax jsp 无刷新上传文件 2009-10-26 16: ...

随机推荐

  1. Java内存溢出

    中间件应用Java内存溢出常见的三种情况: 1.OutOfMemoryError: Java heap space 2.OutOfMemoryError: PermGen space 3.OutOfM ...

  2. 使用render函数渲染组件

    使用render函数渲染组件:https://www.jianshu.com/p/27ec4467a66b

  3. RPC架构下org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)

    一.调用后台接口报错 网上有很多作者列出大部分原因: 1.实体类名对应配置文件名或者路径不一致 2.spring扫描路径不全 但是本人使用的是mtbatis逆向工程生成的实体类.接口与配置文件,所以不 ...

  4. centos7 源码编译安装 nginx

    安装步骤 下载 nginx 源码包 官网 $ wget http://nginx.org/download/nginx-1.16.0.tar.gz 解压 nginx 压缩包 $ tar -zxvf n ...

  5. python3 修改大数据量excel内容

    最好使用python3 64位 对excel的修改操作: from openpyxl import load_workbook import time #打开一个excel表格.xlsx wb = l ...

  6. 两张超级大表join优化

    一个简单的两表关联,SQL跑了差不多一天一夜,这两个表都非常巨大,每个表都有几十个G,数据量每个表有20多亿,表的字段也特别多. 相信大家也知道SQL慢在哪里了,单个进程的PGA 是绝对放不下几十个G ...

  7. Java学习:通过Scanner读取文件

    Scanner不仅能够读取用户的键盘输入,还可以读取文件输入. 需要在创建Scanner对象的时候传入一个File对象作为参数.代码如下: import java.util.Scanner; impo ...

  8. linux环境查看版本信息

    1.uname -a 2.cat /proc/version 3.cat /etc/issue 4.cat /proc/cpuinfo (查看cpu相关信息)

  9. jstat命令使用

    jstat命令使用 jstat是JDK自带的一个轻量级小工具,全称"Java Virtual Machine statistics monitoring tool",它位于java ...

  10. vue video.js使用

    插件github地址:https://github.com/videojs/video.js 这边做一个切换视频vue url的解决记录 this.$nextTick(() => { let u ...