拖拽文件至此
    

     
    
    

     開(kāi)始上傳
    
    清空所有
   
  
 
 
 

  
拖拽上傳演示模板。點(diǎn)擊下方按鈕，彈出模態(tài)框
  點(diǎn)擊上傳
 
 
 
 

.overlay{
 z-index: 99;
 position:fixed;
 display: none;
 top:0;
 left:0;
 width: 100%;
 height: 100%;
 background-color: #333;
 opacity:0.5;
}
.dropbox{
 z-index: 100;
 display: none;
 position: fixed;
 width:500px;
 height:520px;
 margin:auto;
 top:0;
 right:0;
 bottom: 0;
 left:0;
 background-color: #fff;
 border-radius:6px;
 transition-duration: 0.9s;
 -webkit-transition-duration: 0.9s;
 overflow:hidden;
 text-align: center;
}
.items-container{
 padding: 10px;
}
.content{
 border: 3px dashed gray;
 border-radius: 10px;
 margin: 10px 20px;
 height:400px;
 overflow: auto;
 padding:2px 8px;
}

.head{
 margin:0px;
 font-size:30px;
 color:#aaa;
}
.footer{
 margin:5px auto
}
.btn{
 border-radius: 20px;
 box-sizing: border-box;
 border-width: 2px;
 background-color: transparent;
 font-size: 14px;
 font-weight: 500;
 padding: 7px 18px
}
/*畫(huà)一個(gè)叉號(hào)，表示推出界面*/
.css-close{display:inline-block; width:15px; height:2px; background:#000; font-size:0; line-height:0;vertical-align:middle;-webkit-transform: rotate(45deg);}
.css-close:after { content:'.'; display:block; width:15px; height:2px; background:#000;-webkit-transform: rotate(90deg);}

/*表格樣式*/
.table{
 width:100%;
 border-collapse: collapse;
}
#content tr:first-child td{
 border-top-width: 0px;
}
#content tr td:last-child{
 cursor: pointer;
 color: red;
}
#content tr td{
 padding: 8px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow:ellipsis;
 border-top:1px solid #9A9A9A;
}
#content tr:hover{
 background-color: #d5d5d5;
}
#content tr:active{
 background-color: #9A9A9A;
}
a:link{
 color:blue;
}
a:visited{
 color:blue;
}
a:hover{
 color:blue;
}
a:active{
 color:red;
}

function showModal() { //打開(kāi)上傳框
 var modal = document.getElementById('modal');
 var overlay = document.getElementsByClassName('overlay')[0];
 overlay.style.display = 'block';
 modal.style.display = 'block';
}
function closeModal() { //關(guān)閉上傳框
 var modal = document.getElementById('modal');
 var overlay = document.getElementsByClassName('overlay')[0];
 overlay.style.display = 'none';
 modal.style.display = 'none';
}
//用DOM2級(jí)方法為右上角的叉號(hào)和黑色遮罩層添加事件：點(diǎn)擊后關(guān)閉上傳框
document.getElementsByClassName('overlay')[0].addEventListener('click', closeModal, false);
document.getElementById('close').addEventListener('click', closeModal, false);

//利用html5 FormData() API,創(chuàng)建一個(gè)接收文件的對(duì)象，因?yàn)榭梢远啻瓮献?，這里采用單例模式創(chuàng)建對(duì)象Dragfiles
var Dragfiles=(function (){
 var instance;
 return function(){
  if(!instance){
   instance = new FormData();
  }
  return instance;
 }
}());
//為Dragfiles添加一個(gè)清空所有文件的方法
FormData.prototype.deleteAll=function () {
 var _this=this;
 this.forEach(function(value,key){
  _this.delete(key);
 })
}

//添加拖拽事件
var dz = document.getElementById('content');
dz.ondragover = function (ev) {
 //阻止瀏覽器默認(rèn)打開(kāi)文件的操作
 ev.preventDefault();
 //拖入文件后邊框顏色變紅
 this.style.borderColor = 'red';
}

dz.ondragleave = function () {
 //恢復(fù)邊框顏色
 this.style.borderColor = 'gray';
}
dz.ondrop = function (ev) {
 //恢復(fù)邊框顏色
 this.style.borderColor = 'gray';
 //阻止瀏覽器默認(rèn)打開(kāi)文件的操作
 ev.preventDefault();
 var files = ev.dataTransfer.files;
 var len=files.length,
  i=0;
 var frag=document.createDocumentFragment(); //為了減少js修改dom樹(shù)的頻度，先創(chuàng)建一個(gè)fragment，然后在fragment里操作
 var tr,time,size;
 var newForm=Dragfiles(); //獲取單例
 var it=newForm.entries(); //創(chuàng)建一個(gè)迭代器，測(cè)試用
 while(i'+time+''+size+'刪除';
  console.log(size+' '+time);
  frag.appendChild(tr);
  //添加文件到newForm
  newForm.append(files[i].name,files[i]);
  //console.log(it.next());
  i++;
 }
 this.childNodes[1].childNodes[1].appendChild(frag);
 //為什么是‘1'？文檔里幾乎每一樣?xùn)|西都是一個(gè)節(jié)點(diǎn)，甚至連空格和換行符都會(huì)被解釋成節(jié)點(diǎn)。而且都包含在childNodes屬性所返回的數(shù)組中.不同于jade模板
}
function blink()
{
 document.getElementById('content').style.borderColor = 'gray';
}

//ajax上傳文件
function upload(){
 if(document.getElementsByTagName('tbody')[0].hasChildNodes()==false){
  document.getElementById('content').style.borderColor = 'red';
  setTimeout(blink,200);
  return false;
 }
 var data=Dragfiles(); //獲取formData
 $.ajax({
  url: 'upload',
  type: 'POST',
  data: data,
  async: true,
  cache: false,
  contentType: false,
  processData: false,
  success: function (data) {
   alert('succeed!') //可以替換為自己的方法
   closeModal();
   data.deleteAll(); //清空f(shuō)ormData
   $('.tbody').empty(); //清空列表
  },
  error: function (returndata) {
   alert('failed!') //可以替換為自己的方法
  }
 });
}
// 用事件委托的方法為‘刪除'添加點(diǎn)擊事件，使用jquery中的on方法
$(".tbody").on('click','tr td:last-child',function(){
 //刪除拖拽框已有的文件
 var temp=Dragfiles();
 var key=$(this).prev().prev().prev().text();
 console.log(key);
 temp.delete(key);
 $(this).parent().remove();
});
//清空所有內(nèi)容
function clearAll(){
 if(document.getElementsByTagName('tbody')[0].hasChildNodes()==false){
  document.getElementById('content').style.borderColor = 'red';
  setTimeout(blink,300);
  return false;
 }
 var data=Dragfiles(); 
 data.deleteAll(); //清空f(shuō)ormData
 //$('.tbody').empty(); 等同于以下方法
 document.getElementsByTagName('tbody')[0].innerHTML='';
}