파일 입력 필드에 파일을 추가하는 방법

Question

file drag and drop 기능을 만들려고합니다.

나는 div에서 끌어서 놓기 작업을하고 파일을 처리했습니다.

이제이 파일을 양식 Input[type=file]에 첨부하고 싶습니다.

어떻게하면됩니까?

나는 uploadFormData.append("files[]",f);과 파생물을 시도했지만 작동하지 않습니다. 내 디버깅은 양식을 제출하고 파일이 전송되었는지 확인하기 위해 헤더를 확인했습니다.

아무도 나에게 올바른 방향을 제시 할 수 있습니까?

<form enctype="multipart/form-data" id="yourregularuploadformId"> 
     <input type="file" name="files[]" multiple="multiple"> 
    </form> 

<script> 
     var uploadFormData = new FormData(jQuery("#yourregularuploadformId")[0]); 

     function handleFileSelect(evt) { 
     evt.stopPropagation(); 
     evt.preventDefault(); 

     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++) { 
      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ', 
         f.size, ' bytes, last modified: ', 
         f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a', 
         '</li>'); 
       uploadFormData.append("files[]",f); 
     } 

     document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>'; 
     } 
</script> 

Answer 1

나는이 허용 된 경우, 말은 당신이 어떤 검증없이 사용자의 컴퓨터에서 모든 파일을 잡아 수 있습니다해서 당신이 동적으로 <input type="file" ....>을 채울 수 없기 때문에 당신이이 방법을 수행 할 수 없습니다 두려워.

div에서 .change()과 같은 이벤트를 바인드하면 파일을 드래그 할 때 트리거하고, 해당 바인드에서 파일을 업로드하는 아약스 호출을 작성한 다음 파일 이름을 가져올 수 있습니다 업로드가 끝나면 원하는대로) ajax 콜백에서 원하는대로 처리하십시오.