We usually always do is upload files, folders and upload files to upload similar, but there are some differences, this did upload folder on the record for future use after the next.
First, we need to understand is uploaded three elements:
1. The form submission: post (get submission is limited in size, post no)
2. Form enctype attribute: must be set to multipart / form-data.
3. The form must have file upload item: file, and the file entry need given name value
Upload folder need to add a property webkitdirectory, like this:
<input id="fileFolder" name="fileFolder" type="file" webkitdirectory>
But webkitdirectory property there is a problem, can only support a higher version of chrome, can not support the lower version of IE, such as ie6, ie7, ie8, do not fit the whole browser, the operating environment is relatively simple.
js can determine the number of folders and files in the folder size meets the requirements, do not meet the requirements can not be submitted to the background:
Front HTML template
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>';
// folder template
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>';
// upload list
acx += '<div class="files-panel" name="post_panel">\
<div name="post_head" class="toolbar">\
<Span class = "btn" name = "btnAddFiles"> select multiple files </ span> \
<Span class = "btn" name = "btnAddFolder"> Select Folder </ span> \
<Span class = "btn" name = "btnPasteFile"> paste files and directories </ 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"> Clear completed file </ span> \
</div>\
</div>';
return acx;
};
Select the file, select the folder, and paste logical files and folders
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]);
}
};
Upon receiving the folder background is different in need 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)
{// parse the file data error
out.println("read file data error:" + e.toString());
return;
}
FileItem rangeFile = null;
// get all uploaded files
Iterator fileItr = files.iterator();
// loop to process all files
while (fileItr.hasNext())
{
// get the current file
rangeFile = (FileItem) fileItr.next();
if(StringUtils.equals( rangeFile.getFieldName(),"pathSvr"))
{
pathSvr = rangeFile.getString();
pathSvr = PathTool.url_decode(pathSvr);
}
}
server-side packages and classes
File block of the page, verification code portions
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)
{
// Save the file block data
FileBlockWriter res = new FileBlockWriter();
// create only the first one
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); // offset position based on the file block
msg = o.toString();
}
rangeFile.delete();
out.write(msg);
Logic generates a file name
public String genFile(int uid, String md5,String nameLoc) throws IOException
{
SimpleDateFormat fmtDD = new SimpleDateFormat("dd");
SimpleDateFormat fmtMM = new SimpleDateFormat("MM");
SimpleDateFormat fmtYY = new SimpleDateFormat("yyyy");
Date date = new Date();
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 = new File(path);
return fl.getCanonicalPath();//
}
The following is a treatment service layer to do:
Integral module divided as follows:
Wherein the following logical processing entity data class
public class FileInf {
public FileInf(){}
public String id="";
public String pid="";
public String pidRoot="";
/ ** * Indicates whether the current entry is a folder item. * /
public boolean fdTask=false;
// /// whether the child file folder /// </ summary>
public boolean fdChild=false;
/ ** * user ID. System integration with third-party use. * /
public int uid=0;
/ ** * file on the local computer name * /
public String nameLoc="";
Name / ** * files in the server. * /
public String nameSvr="";
The full path / ** * file on the local computer. Example: D: \ Soft \ QQ2012.exe * /
public String pathLoc="";
The full path / ** * files in the server. Example: F: \\ ftp \\ uer \\ md5.exe * /
public String pathSvr="";
Relative path / ** * file in the server. Example: /www/web/upload/md5.exe * /
public String pathRel="";
/ ** * File MD5 * /
public String md5="";
/ * ** digitized document length. Bytes, the example: 120125 * /
public long lenLoc=0;
/ ** * Format file size. Example: 10.03MB * /
public String sizeLoc="";
/ ** * Resume file location. * /
public long offset=0;
/ ** * uploaded size. In bytes * /
public long lenSvr=0;
/ ** * uploaded percentage. Example: 10% * /
public String perSvr="0%";
public boolean complete=false;
public Date PostedTime = new Date();
public boolean deleted=false;
/ ** * whether the scan is completed, to provide a large folder with a large start scanning the folder after the upload. * /
public boolean scaned=false;
}
Back-end database basically uses a logical entity classes above
File data table class of operation is as follows
Load a list of all files incomplete
public String GetAllUnComplete(int f_uid)
{
StringBuilder sb = new StringBuilder();
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): fix the problem can not resume file.
sb.append ( "from up6_files"); // change (2015-03-18): Joint inquiry folder data
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): only load uncompleted list
ArrayList<FileInf> files = new ArrayList<FileInf>();
DbHelper db = new DbHelper();
PreparedStatement cmd = db.GetCommand(sb.toString());
try {
cmd.setInt(1, f_uid);
ResultSet r = db.ExecuteDataSet(cmd);
while(r.next())
{
FileInf f = new FileInf();
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): fix the problem can not resume file.
files.add(f);
}
r.close();
cmd.getConnection().close();
cmd.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace ();
}
if(files.size() < 1) return null;
Gson Gson g = new ();
return g.toJson (files); // bug: arrFiles is empty, this line of code abnormal
}
To achieve the following overall effect after
Upload folder after effects
Save the server folder data, and the local hierarchy and the client is the same. This OA system or network disk system is very useful when using
Most of the back-end code logic is the same, currently supports MySQL, Oracle, SQL. Before using the need to configure the database, you can refer me to write this article: 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 /
Welcome to the discussion group "374 992 201" together