アップロードドラッグアンドドロップ画像javascriptとPHPで保存

Question

私はドラッグアンドドロップ画像アップローダを行う必要があります。 私はこのコードを持っていますが、何をしているのか分かりません。

HTML 
     <div id="drop_zone" style="width: 100%; height: 200px; "></div> 
     <output id="list"></output> 

JavaScript 

     function ManejadorDeArchivosSeleccionados(evt) { 
      evt.stopPropagation(); 
      evt.preventDefault(); 
      var files = evt.dataTransfer.files; 
      var output = []; 
      for(var i = 0, f; f = files[i]; i++) { 
       output.push('<li><strong>', escape(f.name),'</strong> (', f.type || 'n/a',') - ',f.size, 'bytes, last modified ', f.lastModifiedDate.toLocaleDateString(), '</li>'); 
      } 
      document.getElementById('list').innerHTML = '<ul>' + output.join(' ') + '</ul>'; 


     }   


     function ManejadorDragOver(evt) { 
      evt.stopPropagation(); 
      evt.preventDefault(); 
      evt.dataTransfer.dropEffect = 'copy'; 
     } 
     var dropZone = document.getElementById('drop_zone'); 
     dropZone.addEventListener('dragover',ManejadorDragOver,false); 
     dropZone.addEventListener('drop',ManejadorDeArchivosSeleccionados,false); 

出力は、ファイルの名前、種類のサイズと日付を印刷しますが、私は、フォルダに保存するホット知りません大丈夫です。私はPOSTまたはajaxを使う必要があることを知っています。私はちょうど何を送るべきではなく、それを保存するためにPHPに送る方法はありません。

Answer 1

FormDataとXmlHttpRequest2は、すべての主要なブラウザでサポートされています（つまり10+）。

 var files = evt.dataTransfer.files; 
    var data = new FormData(); 
    for(var i = 0, l=fields.length; i<l; i++){ 
     var f = files[i]; 
     data.append("files["+i+"][file]", f, f.name); 
     data.append("files["+i+"][name]", f.name); #for ie 
    } 
    var req = new XMLHttpRequest(); 
    req.open('POST', '/ajax.php', true); 
    req.onreadystatechange = function(){ 
     if(req.readyState !== 4) return; 
     console.log('all files sended'); 
    }.bind(this); 
    req.send(data);