다른 폴더에서 html5 파일 업로드

Question

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의 테이블에 이미지를 추가 제출

이

은 내가 사용하는 스크립트입니다. iamges가 선택 될 때마다 숨겨진 입력을 만들고 일반적으로 클라이언트가 자신이 선택한 것을 알 수 있도록 일반적으로 이름을 표시하도록 js 스크립트를 chaning하는 것에 대해 생각했습니다. 그리고 양식을 제출 한 후에 이미지가 업로드 될 것입니다. 그러나 그것이 실제로 작동하는지 그리고 제 생각이 좀 이상하게 보일지는 모르겠습니다. 누구든지 js 스크립트를 변경하는 방법에 대한 제안 사항이 있는지 알고 싶습니다. 사용자가 클릭하여 이미지를 선택하면 스크립트가 이미지를 배열에 등록합니다. 또는 다른 아이디어를 환영합니다.

Answer 1

배열에 대한 귀하의 생각은 좋습니다. 문제는 사용자가 아직 파일을 선택하지 않았는지 확인하고 이전에 선택한 파일을 제거 할 수있게하는 것입니다. 어려운 부분은 파일을 안정적으로 비교하는 것입니다.

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 = ''; 
}; 

Answer 2

저는이 질문이 최근에 다른 시도와 비슷하다고 생각합니다. 내 솔루션 링크는 HTML multiple file upload from different folders입니다.

HTML과 jQuery를 사용하여 여러 개의 "브라우저"버튼을 동적으로 추가 할 수있는 양식을 만들 수있었습니다. 또한 데이터 서버 측을 처리하기위한 PHP 솔루션을 제공했습니다!