從不同文件夾上傳html5文件

我正在嘗試製作html5圖片上傳器，但html5存在多個上傳問題。從不同文件夾上傳html5文件

這是我使用的腳本：

function makeFileList() { 
     var input = document.getElementById("filez"); 
     var ul = document.getElementById("file_wrap_list"); 
     while (ul.hasChildNodes()) { 
      ul.removeChild(ul.firstChild); 
     } 
     for (var i = 0; i < input.files.length; i++) { 
      var j = i+1; 
      var li = document.createElement("li"); 
      li.innerHTML = j+'. '+input.files[i].name; 
      ul.appendChild(li); 
     } 
     if(!ul.hasChildNodes()) { 
      var li = document.createElement("li"); 
      li.innerHTML = 'No Files Selected'; 
      ul.appendChild(li); 
     } 
    }

的HTML標籤：

<input type="file" name="photo[]" id="filez" multiple onchange="makeFileList();"/>

然後提交我上傳和mysql的表中添加圖像。我想過關注js腳本，以便每次選擇iam時，他們都會創建隱藏的輸入並通常顯示他們的名字，以便客戶知道他們選擇了什麼。然後在提交表單後圖像將被上傳，但我不知道它是否會在實踐中起作用，並且我的想法似乎有點奇怪。我想知道是否有人對如何改變js腳本有任何建議，以便每次用戶點擊並選擇腳本的圖像以將圖像註冊爲數組。或者任何其他想法是受歡迎的。

來源

2014-03-30 TooCooL

你對這個數組的想法是個不錯的想法。然後，問題是確保用戶尚未選擇文件，並允許他們刪除先前選擇的文件。困難的部分是可靠地比較文件。

I tweaked your code and managed to get it working here。

// An array to store file references in 
var files = []; 

// Look in files to see if it's already in there 
function alreadySelected(newFile){ 
    var match = false; 

    // We can't just use files.indexOf(newFile), since JS can't test file equality 
    files.forEach(function compareProperties(oldFile){ 
     var key; 
     var oldProp; 
     var newProp; 

     for (key in newFile){ 
      if(newFile.hasOwnProperty(key)){ 
       oldProp = oldFile[ key ]; 
       newProp = newFile[ key ]; 

       if(newProp !== oldProp){ 
        // The root of the problem: the same date will be a different date object. 
        if(newProp instanceof Date){ 
         if(newProp.getTime() !== oldProp.getTime()){ 
          return; 
         } 
        } 
        else { 
         return; 
        } 
       } 
      } 
     } 

     match = true; 
    }); 

    return match; 
} 

window.makeFileList = function makeFileList() { 
    var input = document.getElementById("filez"); 
    var ol = document.getElementById("file_wrap_list"); 

    Array.prototype.forEach.call(input.files, function processFile(file){ 
     // If the user's already added this file to the list, move on to the next. 
     if(alreadySelected(file)){ 
      return; 
     } 

     var li = document.createElement("li"); 
     // We'll also create an 'X' link for users to remove files from the list 
     var a = document.createElement("a"); 

     li.innerHTML = file.name; 
     a.innerHTML = "X"; 

     a.addEventListener("click", function removeFile(clickEvent){ 
      clickEvent.preventDefault(); 

      // Find the file in the array and remove it 
      files.splice(files.indexOf(file), 1 ); 
      ol.removeChild(li); 
     }, false) ; 

     files.push(file); 

     li.appendChild(a); 
     ol.appendChild(li); 
    }); 

    // Reset the value. Normal file inputs won't trigger the change event if the value is the same, 
    // but a user might add a file, delete it, then try to add it again. 
    input.value = ''; 
};

來源

2014-03-30 10:50:24 Barney

你的腳本在客戶端完美工作，現在我試圖使它在服務器端工作，因爲由於某種原因，當我提交表單圖像發佈數據在服務器端變空 – TooCooL

我試過console.log（文件），並給出數組。但我認爲問題可能是window.makeFileList，因爲它發送數組而不是列表FileList – TooCooL

我發現問題，最後一行：input.value ='';總是發送文件的空陣列數據。我刪除了它，現在它工作。但是必須有一個解決方法，只是刪除它不是一個解決方案，任何想法？ – TooCooL

我相信這個問題類似於我最近試圖回答的另一個問題。我的解決方案的鏈接在這裏：HTML multiple file upload from different folders。

使用HTML和jQuery，我能夠創建一個表單，您可以動態添加多個「瀏覽器」按鈕。我還提供了一個用於處理數據服務器端的PHP解決方案！

來源

2016-07-12 09:28:57 Isaiah

從不同文件夾上傳html5文件

回答

相關問題