HTML5拖放順序上傳

我有一個網絡應用程序，我使用HTML5拖放上傳。這是我第一次使用這項技術，所以我研究了一下，發現了一個簡單的腳本，使它可以工作。HTML5拖放順序上傳

一切工作正常，但我需要的腳本不是一次上傳所有文件，而是對每個文件分別請求並上傳它們（我在這裏是否使用了正確的詞？）。

有沒有辦法做到這一點？

謝謝

P.S.我使用PHP作爲服務器端語言（不是說它會在這個問題上產生任何影響）

2014-01-11 Adi Ulici

這是我前段時間偶然發現的一些代碼的一個變體，作爲使用DND api和進度的實驗酒吧。希望能幫助到你。您正在尋找的核心功能是ajaxSingleFileUpload和handleFileSelect。

<!DOCTYPE html> 
    <html> 
    <head> 
     <title></title> 
     <style type="text/css"> 
      .dropZone { 
       position: relative; 
       width: 200px; 
       height: 200px; 
       border-radius: 10px; 
       line-height: 200px; 
       text-align: center; 
       border: dotted 1px gray; 
      } 
      .dropZoneHover { 
       background: gray; 
       box-shadow: inset 1px 1px 5px gray; 
      } 
      .jsProgressBar{ 
       border:solid 1px rgba(0,0,0,0.3); 
       height: 1em; 
       border-radius: 1em; 
      } 
      .jsProgress{ 
       background-image: linear-gradient(90deg, rgba(255,0,0,0.5), rgba(0,255,0,0.5)); 
       border-radius: 1em; 
      } 
     </style> 
    </head> 
    <body> 
    <div id="drop_zone" class="dropZone">Drop files here</div> 
    <output id="list"></output> 

    <script> 
     var $id = function (id) {return document.getElementById(id)}; 
     Element.prototype.on = Element.prototype.addEventListener; 
     CSSStyleDeclaration.prototype.add=function(css){ 
      var tmpCSS = this.cssText; 
      if(typeof css == 'object'){ 
       for(var o in css){ 
        if(Object.prototype.hasOwnProperty.call(css,o)){ 
         tmpCSS+=';'+o+':'+css[o]+';'; 
        } 
       } 
      } 
      else if(typeof css=='string'){ 
       tmpCSS+=';'+css+';'; 
      } 
      tmpCSS.replace(/;;;/gi,';').replace(/;;/gi,';'); 
      this.cssText=tmpCSS; 
     }; 
     Event.prototype.stop = function() { 
      this.stopPropagation(); 
      this.preventDefault(); 
     }; 

     function changePercent(progressBar,val){ $id(progressBar).value(val); } 

     function ProgressBar(el,width){ 
      el=$id(el); 
      el.classList.add("jsProgressBar"); 
      var p=document.createElement('div'); 
      var t=document.createElement('div'); 
      var fh= Math.round(el.clientHeight*0.9)+'px'; 
      el.style.add({ 
          display: 'inline-block', 
          'box-shadow': 'inset 0 0 5px rgba(0,0,0,0.2)', 
          position: 'relative', 
          padding:0, 
          margin: '0 auto' 
         }); 
      p.classList.add("jsProgress"); 
      p.style.add({width:'0',height:'100%'}); 

      t.style.add({width:'100%','text-align':'center',position:'absolute',top:0,bottom:0,left:0,'font-size':fh,'line-height':(el.clientHeight+'px'),'font-weight':'bold'}); 

      el.appendChild(p); 
      el.appendChild(t); 
      el.value=function(val){ 
       if(typeof val != 'undefined'){ 
        val=(val>100)?100:(val<0)?0:val; 
        p.style.width=val+'%'; 
        t.innerHTML=(val==0)?'':val+'%'; 
        return el; 
       } 
       return t.innerHTML.replace(/%/g,''); 
      }; 
      return el; 
     } 
     function _progressCallback(progressBar){ 
      return function(evt){ 
       var percent=(evt.loaded/evt.total *100); 
       changePercent(progressBar, Math.round(percent)); 
       //$id('status').innerHTML = Math.round(percent)+'% uploaded... pleas wait'; 
      } 
     } 

     function ajaxSingleFileUpload(url, fileData, successCallback, failCallback, progressCallback, abortCallback) { 
      var ajax = new XMLHttpRequest(), boundary = "FileUpload" + btoa("" + (Math.random())); 
      ajax.open('POST', url); 
      ajax.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary); 
      var blob = fileData.blob;//atob(fileData.blob.split(',')[1]); 
      var multipartHeader = ['--' , 
           boundary , 
           '\r\nContent-Disposition: form-data; name="file"; filename="' , 
           fileData.name , 
           '"\r\nContent-Type: ', 
           fileData.fileType, 
           '\r\n\r\n'].join(''); 
      var multipartTrailer = ['\r\n--', boundary , '--\r\n'].join(''); 
      var iaHeader = new Uint8Array(multipartHeader.length); 
      for (var c = 0, l = multipartHeader.length; c < l; c++) { 
       iaHeader[c] = multipartHeader.charCodeAt(c); 
      } 
      multipartHeader=iaHeader; 

      if(!!progressCallback){ajax.upload.addEventListener('progress',progressCallback,false);} 
      if(!!successCallback){ajax.addEventListener('load',successCallback,false);} 
      if(!!failCallback){ajax.addEventListener('error',failCallback,false);} 
      if(!!abortCallback){ajax.addEventListener('abort',abortCallback,false);} 
      ajax.send(new Blob([multipartHeader,blob,multipartTrailer])); 
     } 

     function handleFileSelect(evt) { 
      evt.stop(); 
      var files = evt.dataTransfer.files; // FileList object. 
      // files is a FileList of File objects. List some properties. 
      var output=[]; 
      for (var i = 0, f; f = files[i]; i++) { 
       var fileReader = new FileReader(); 
       fileReader.onload = (function (theFile, id) { 
        return function (e) { 
         var fileData = e.target.result, 
           xFile = { 
            name:  theFile.name, 
            fileType: theFile.type, 
            blob:  fileData 
           }; 
         ajaxSingleFileUpload('fileUpload.php', xFile,undefined,undefined,_progressCallback('progress'+id)); 
         var img = document.createElement('img'); 
         img.title = theFile.name; 
         img.id = 'thumb' + id; 
         img.src = fileData; 
         if (img.width > img.height) { 
          img.style.width = (img.width > 60 ? '60' : img.width) + 'px'; 
         } 
         else { 
          img.style.height = (img.height > 60 ? '60' : img.height) + 'px'; 
         } 
         $id('list').insertBefore(img, null); 
        } 
       })(f, i); 

       fileReader.readAsArrayBuffer(f); 
       output.push('<div><strong>', f.name, '</strong> (', f.type || 'n/a', ') - ', 
          f.size, ' bytes, last modified: ', 
          f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a', 
          '</div><div id="progress'+i+'" style="width:200px;height:15px;"></div>'); 
      } 
      document.getElementById('list').innerHTML = output.join(''); 
      for(i=0;i<files.length;i++){ 
       ProgressBar('progress'+i); 
      } 
     } 

     function handleDragOver(evt) { 
      evt.stop(); 
      evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy. 
     } 
     var dropZone = $id('drop_zone'); 

     function handleDragOver2(evt) { 
      dropZone.classList.add('dropZoneHover'); 
     } 
     function handleDragLeave2(evt) { 
      dropZone.classList.remove('dropZoneHover'); 
     } 

     // Setup the dnd listeners. 
     dropZone.on('dragover', handleDragOver, false); 
     dropZone.on('dragover', handleDragOver2, false); 
     dropZone.on('dragleave', handleDragLeave2, false); 
     dropZone.on('drop', handleFileSelect, false); 
     dropZone.on('drop', handleDragLeave2, false); 
    </script> 

    </body> 
    </html>

而對於PHP端（你將有你想要的路徑修改testUploads）：

<?php 
    $fileName=$_FILES['file']['name']; 
    $fileTmpLoc=$_FILES['file']['tmp_name']; 
    $fileType=$_FILES['file']['type']; 
    $fileSize=$_FILES['file']['error']; 

    if(!$fileTmpLoc){ 
     //file not chosen 
     echo 'Error: Please browse for a file before clicking the upload button.'; 
     exit(); 
    } 

    if(move_uploaded_file($fileTmpLoc,"testUploads/$fileName")){ 
     echo "$fileName upload is complete."; 
    } 
    else{ 
     echo "Unable to save the file on the server."; 
    }

來源

2014-01-11 12:06:17

非常感謝，我會從檢查你的代碼，但我看到它看起來這是我需要的。謝謝！ –

HTML5拖放順序上傳

回答

相關問題