java 图片批量上传 html5

来源：互联网发布：linux挂载新硬盘编辑：程序博客网时间：2024/05/21 17:44

这个是从外文网页上翻出来的然后自己做些修改.上传文件夹只支持谷歌浏览器. 还有些缺憾就是删除哪里还没有写. 以后补全

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>批量上传</title>
<style>
html, body {padding: 0;margin: 0;height: 100%;width: 100%;overflow: hidden;}
.linear {background: -webkit-gradient(linear, left bottom, left top,from(#eee), color-stop(0.25, #fff),to(#eee), color-stop(0.75, #fff));}
.shadow {-moz-box-shadow: 3px 3px 10px #666666;-webkit-box-shadow: 3px 3px 10px #666666;box-shadow: 3px 3px 10px #666666;}
.center {display : -webkit-box; display : -moz-box;display : box;-webkit-box-orient : vertical;-webkit-box-pack : center;-webkit-box-align : center;
-moz-box-orient : vertical;-moz-box-pack : center;-moz-box-align : center;box-orient: vertical;box-pack: center;box-align: center;}
::-webkit-scrollbar {width: 5px;height: 5px;background-color: #eee;}
::-webkit-scrollbar-thumb {background-color: rgba(0,0,0, 0.4);border-radius: 5px;}
::-webkit-scrollbar-thumb:hover {background-color: rgba(0,0,0, 0.6);}
input[type='file'] {border: 2px solid #eee;border-radius: 10px;padding: 8px;width: 93%;}
#container {display: -webkit-box;-webkit-box-orient: horizontal;height: 100%;}
#container > div {padding: 10px;}
#container > div:first-of-type {overflow-y: auto;overflow-x: hidden;width: 400px;border-right: 1px solid #ccc;}
#container > div:last-of-type {overflow-y: auto;overflow-x: hidden;-webkit-box-flex: 1;}
#thumbnails {background: -webkit-gradient(linear, left bottom, left top,from(#ccc), color-stop(0.25, #eee),to(#ccc), color-stop(0.75, #eee));
-webkit-box-shadow: inset 0 0 15px #000;}
.thumbnail {text-align: center;margin-left: 10px;width: 450px;-webkit-transition-property: opacity, -webkit-transform;-webkit-transition-duration: 0.6s, 0.2s;
-webkit-transition-timing-function: ease-in-out;opacity: 0;}
.thumbnail:hover {-webkit-transform: scale(1.5);}
.thumbnail .image {border: 1px solid #ccc;padding: 10px;background-color: #fff;}
.thumbnail .title {margin-bottom: 5px;font-family: Helvetica, sans-serif;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 300px;margin: 5px auto;}
#thumbnails img {border: 1px solid #ccc;width: 100%;}
.thumbnail .details {font-family: Helvetica, sans-serif;font-size: 10pt;}
#progress_bar {display: none;}
progress {background-color: black;margin: 10px 0;padding: 1px;border: 1px solid #000;font-size: 14px;width: auto;}
progress::-webkit-progress-bar-value {background-color: #99ccff;}
#files { margin:2em 0 5em; width:400px; }
.tree,.tree ul,.tree li { list-style:none; margin:0; padding:0; zoom: 1; }
.tree ul { margin-left:8px; }
.tree li a { color:#555; padding:.1em 7px .1em 27px; display:block; text-decoration:none; border:1px dashed #fff; background:url(icon-file.gif) 5px 50% no-repeat; }
.tree li a.tree-parent { background:url(icon-folder-open.gif) 5px 50% no-repeat; }
.tree li a.tree-parent-collapsed { background:url(icon-folder.gif) 5px 50% no-repeat; }
.tree li a:hover,.tree li a.tree-parent:hover,.tree li a:focus,.tree li a.tree-parent:focus,.tree li a.tree-item-active { color:#000; border:1px solid#eee; background-color:#fafafa; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; }
.tree li a:focus,.tree li a.tree-parent:focus,.tree li a.tree-item-active { border:1px solid #e2f3fb; background-color:#f2fafd; }
.tree ul.tree-group-collapsed { display:none; }
</style>
</head>
<body>
<div id="container">
<div style="overflow:scroll">
<form action="/web/index/picButchUpload!uploadPic.action" id="fmPic" enctype="multipart/form-data">
<input style="width:310px" type="file" id="file_input" name="file" webkitdirectory directory />
<input type="hidden" value="${sceneryId}" name="sceneryId">
<input type="button" value="上传" onclick="javascript:document.getElementById('fmPic').submit;//window.close();"/>
</form>
<ul id="dir-tree"></ul>
</div>

<div class="center" id="thumbnails"></div>
</div>

<script src="/js/index/jquery.min.js" type="text/javascript"></script>
<script src="/js/index/jquery.tree.js" type="text/javascript"></script>
<script>
// Simple JavaScript Templating

window.URL = window.URL ? window.URL : window.webkitURL ? window.webkitURL : window;

function Tree(selector) {
this.$el = $(selector);
this.fileList = [];
var html_ = [];
var tree_ = {};
var pathList_ = [];
var self = this;

this.render = function(object) {
if (object) {
for (var folder in object) {
var file_type = folder.substring(folder.lastIndexOf(".")+1);
if (!object[folder]) { // file's will have a null value
if(file_type == 'jpg'||file_type=='JPG'||file_type=='png'||file_type=='PNG')
html_.push('<li><a href="#" data-type="file"><img src="/img/btn/cancel.png" style="width:10px;height:10px;" /> ', folder, '</a></li>');
} else {
html_.push('<li><a href="#">', folder, '</a>');
html_.push('<ul>');
self.render(object[folder]);
html_.push('</ul>');
}
}
}
};

this.remove = function(object, folder){//onclick="remove('+folder+');"
object.remove(folder);
this.render(object);
};

this.buildFromPathList = function(paths) {
for (var i = 0, path; path = paths[i]; ++i) {
var pathParts = path.split('/');
var subObj = tree_;
for (var j = 0, folderName; folderName = pathParts[j]; ++j) {
if (!subObj[folderName]) {
subObj[folderName] = j < pathParts.length - 1 ? {} : null;
}
subObj = subObj[folderName];
}
}
return tree_;
};

this.init = function(e) {
// Reset
html_ = [];
tree_ = {};
pathList_ = [];
self.fileList = e.target.files;

// TODO: optimize this so we're not going through the file list twice
// (here and in buildFromPathList).
for (var i = 0, file; file = self.fileList[i]; ++i) {
pathList_.push(file.webkitRelativePath);
}

self.render(self.buildFromPathList(pathList_));

self.$el.html(html_.join('')).tree({
expanded: 'li:first'
});

// Add full file path to each DOM element.
var fileNodes = self.$el.get(0).querySelectorAll("[data-type='file']");
for (var i = 0, fileNode; fileNode = fileNodes[i]; ++i) {
fileNode.dataset['index'] = i;
}
}
};

var tree = new Tree('#dir-tree');
$('#file_input').change(tree.init);

// Initial resize to force scrollbar in when file loads
$('#container div:first-of-type').css('height', (document.height - 20) + 'px');
window.addEventListener('resize', function(e) {
$('#container div:first-of-type').css('height', (e.target.innerHeight - 20) + 'px');
});

function revokeFileURL(e) {
var thumb = document.querySelector('.thumbnail');
if (thumb) {
thumb.style.opacity = 1;
}
window.URL.revokeObjectURL(this.src);
};

tree.$el.click(function(e) {
if (e.target.nodeName == 'A' && e.target.dataset['type'] == 'file') {
var file = tree.fileList[e.target.dataset['index']];

var thumbnails = document.querySelector('#thumbnails');

if (!file.type.match(/image.*/)) {
thumbnails.innerHTML = '<h3>\u56fe\u7247\u65e0\u6cd5\u8bc6\u522b\u0021</h3>';//Please select an image!
return;
}

thumbnails.innerHTML = '<h3>Loading...</h3>';

var thumb = document.querySelector('.thumbnail');
if (thumb) {
thumb.style.opacity = 0;
}

// Render thumbnail template with the file info (data object).
//thumbnails.insertAdjacentHTML('afterBegin', tmpl('thumbnail_template', data));
thumbnails.innerHTML = '<div class="thumbnail"><div class="image shadow">'+

'<img src="'+window.URL.createObjectURL(file)+'" alt="'+file.name+'" title="'+file.name+'" onload="revokeFileURL()" />'+
'<div class="title">'+file.name+'</div><div class="details">'+file.type+'</div></div></div>';

//tmpl('thumbnail_template', data);
}
});
</script>
</body>
</html>

0 0