upload.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="/JsUtils/KH/fileUtil/css/basic.css">
<link rel="stylesheet" type="text/css" href="/JsUtils/KH/fileUtil/css/button.css">
<link rel="stylesheet" type="text/css" href="/JsUtils/KH/fileUtil/css/Html5PicUpload.css">
<script type="text/javascript" src="/GF/lib/easyui/jquery.min.js"></script>
<script type="text/javascript" src="/JsUtils/KH/fileUtil/js/fileUtil.js"></script>
<script type="text/javascript">
$(function(){
//初始化
KH.FileUtil.Html5PicUpload.init();
//綁定上傳按鈕事件
$("#confirmUpload").click(function(){
uploadToServer();
});
});
function upload(){
//先獲取框選的文件名
var files=document.getElementById('upload').files;
console.log(files);
for(var i=0;i<files.length;i++){
KH.FileUtil.Html5PicUpload.showUploadFile(files[i]);
}
//清空input空間
var file = $("#upload");
file.after(file.clone().val(""));
file.remove();
}
function uploadToServer(){
var url=encodeURI(encodeURI('/gf_doc/servlet/file?act=upload&path='));
KH.FileUtil.Html5PicUpload.uploadToServer(url);
};
</script>
</head>
<body>
<a href="javascript:;" class="file">上傳圖片
<input type="file" multiple="multple" id="upload" οnchange="upload()">
</a>
<!-- <div id="uploadBOX"></div> 這個爲最基礎的控件核心 -->
<div id="uploadBOX">
</div>
<button type="button" class="btn" id="confirmUpload">確定上傳</button>
<div id="template">
<li>
<img src="">
<span class="state"></span>
<span class="progress">
<span class="progress_left"></span>
</span>
<span class="canel"></span>
</li>
</div>
</body>
</html>
fileUtil.js
/*
* User:XTY
* Date:15-7-21
*/
var KH = {};
KH.FileUtil = {};
KH.FileUtil.Html5PicUpload=(function(){
var UPLOAD_BOX_ID="uploadBOX";
var no_drag="將文件拖拽至此區域或點擊上傳圖片,在點擊上傳按鈕即可上傳!";
var drag_over="釋放鼠標!";
var uploadElement=null;
var uploadObjectArray=[];
var uploadObjectArrayindex=0;
/**
* 初始化對象與時間
* @public
*/
function _init(){
_uploadElement=document.getElementById(UPLOAD_BOX_ID);
_uploadElement.οndragenter=_onDragEnter;//當被鼠標拖動的對象進入其容器範圍內時觸發此事件
_uploadElement.οndragοver=_onDragOver;//當某被拖動的對象在另一對象容器範圍內拖動時觸發此事件
_uploadElement.οndragleave=_onDragLeave;//當被鼠標拖動的對象離開其容器範圍內時觸發此事件
_uploadElement.οndrοp=_onDrop;//在一個拖動過程中，釋放鼠標鍵時觸發此事件
_setStatusNoDrag();
};
/**
* 正在拖拽狀態
* @private
*/
function _setDragOverStatus()
{
if (_checkContatinsElements())return;
_uploadElement.innerText = drag_over;
_uploadElement.style.border = "2px dashed #777";
$(_uploadElement).css({lineHeight: $(_uploadElement).height() + "px"});
};
/**
* 初始化狀態
* @private
*/
function _setStatusNoDrag()
{
if (_checkContatinsElements())return;
_uploadElement.innerText = no_drag;
_uploadElement.style.border = "2px dashed #777";
$(_uploadElement).css({lineHeight: $(_uploadElement).height() + "px"});
};
/**
* 當ondragenter觸發
* @private
*/
function _onDragEnter(e)
{
_setDragOverStatus();
};
/**
* 當ondargmove觸發
* @private
*/
function _onDragOver(e)
{
//ondragover中必須組織事件的默認行爲，默認地，無法將數據/元素放置到其他元素中。
e.preventDefault();
};
/**
* 當dragleave觸發
* @private
*/
function _onDragLeave(ev)
{
_setStatusNoDrag();
};
/**
* ondrop觸發
* @private
*/
function _onDrop(e)
{
//drop 事件的默認行爲是以鏈接形式打開，所以也需要阻止其默認行爲。
e.preventDefault();
_setDropStatus();
//拿到拖入的文件
var files = e.dataTransfer.files;
var len = files.length;
for (var i = 0; i < len; i++)
{
//頁面上顯示需要上傳的文件
_showUploadFile(files[i]);
}
};
/**
* 判斷是否已經上傳文件了
* @private
*/
function _checkContatinsElements(){
return !!$(_uploadElement).find("li").size();
};
/**
* 上傳文件操作
* @private
*/
function _setDropStatus(){
if(_checkContatinsElements())return;
_uploadElement.innerText="";
_uploadElement.style.border="1px solid #444";
$(_uploadElement).css({lineHeight:"1em"});
$(_uploadElement).append("<ul></ul>");
};
/**
* 頁面上顯示需要上傳的文件
* @public
*/
function _showUploadFile(file)
{
var reader = new FileReader();
//判斷文件類型
if (file.type.match(/image*/))
{
reader.onload = function (e)
{
var formData = new FormData();
var obj={};
var li = $("#template li").clone();
var img = li.find("img");
li.find(".state").hide();
li.find(".progress").hide();
var canel=li.find(".canel");
canel.click(function(){
for(var i=0;i<uploadObjectArray.length;i++){
if(uploadObjectArray[i].li==li){
uploadObjectArray.splice(i,1);
li.remove();
}
}
});
img.attr("src", e.target.result);
if(!_checkContatinsElements())_setDropStatus();
$("ul", $(_uploadElement)).append(li);
formData.append("uploadFile", file);
obj.formData=formData;
obj.li=li;
uploadObjectArray.push(obj);
};
reader.readAsDataURL(file);
}else{
alert("此" + file.name + "不是圖片文件！無法上傳");
_setStatusNoDrag();
}
};
/**
* 上傳文件到服務器
* @public
*/
function _uploadToServer(url)
{
for(var i=uploadObjectArrayindex;i<uploadObjectArray.length;i++){
_XMLHttp(uploadObjectArray[i].li,uploadObjectArray[i].formData,url);
uploadObjectArrayindex++;
}
};
/**
* 上傳文件到服務器
* @private
*/
function _XMLHttp(li,formData,url){
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest', 'Content-Type', 'multipart/form-data;');
//HTML5新增的API，存儲了上傳過程中的信息
xhr.upload.onprogress = function (e)
{
var percent = 0;
if (e.lengthComputable)
{
//更新頁面顯示效果
li.find(".progress").show();
li.find(".canel").hide();
var progress_left=li.find(".progress_left");
percent = 100 * e.loaded / e.total;
progress_left.width(percent);
if(percent >= 100){
li.find(".state").show();
li.find(".progress").hide();
}
}
};
xhr.send(formData);
}
//把方法公佈出去
return{
init: _init,
showUploadFile: _showUploadFile,
uploadToServer: _uploadToServer
};
})();
basic.css
*{
margin: 0px;
padding: 0px;
}
ol, ul {
list-style: none;
}
button.css
.btn {
display: inline-block;
*display: inline;
padding: 4px 12px;
margin-bottom: 0;
*margin-left: .3em;
font-size: 14px;
line-height: 20px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
*background-color: #e6e6e6;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
border: 1px solid #cccccc;
*border: 0;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
*zoom: 1;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
color: #333333;
background-color: #e6e6e6;
*background-color: #d9d9d9;
}
.btn:active,
.btn.active {
background-color: #cccccc \9;
}
.btn:first-child {
*margin-left: 0;
}
.btn:hover,
.btn:focus {
color: #333333;
text-decoration: none;
background-position: 0 -15px;
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}
.btn:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn.active,
.btn:active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn.disabled,
.btn[disabled] {
cursor: default;
background-image: none;
opacity: 0.65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
Html5PicUpload.css
#uploadBOX{
width: 650px;
height: 500px;
background-color: #fff;
border: 1px solid #777;
overflow: auto;
font-size: 1.5em;
text-align: center;
}
#uploadBOX ul{
list-style: none;
width: auto;
}
#uploadBOX ul li{
float: left;
position: relative;
margin-left: 5px;
margin-top: 5px;
}
#uploadBOX li img
{
border: 1px solid #D1D1D1;
width: 198px;
height: 112px;
vertical-align: middle;
}
#uploadBOX li .state{
display: block;
width: 69px;
height: 69px;
top: 23px;
left: 65px;
position: absolute;
background: url("../img/done.png");
}
#uploadBOX li .progress{
display: block;
width: 200px;
height: 20px;
bottom: 0px;
left: 0px;
position: absolute;
background: #000;
color: #fff;
text-align: center;
opacity: .5;
}
#uploadBOX li .progress_left{
display: block;
height: 20px;
background-color: #3DD23D;
}
#uploadBOX li .canel{
display: block;
height: 22px;
width: 22px;
background:url("../img/cancel.png");
background-size: 100% 100%;
position: absolute;
right: 3px;
top: 3px;
}
#uploadBOX li .canel:hover{
top: 5px;
}
.file {
position: relative;
display: inline-block;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
line-height: 20px;
}
.file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
.file:hover {
background: #AADFFD;
border-color: #78C3F3;
color: #004974;
text-decoration: none;
}
