2013-03-04 1 views
4

이것이 가능한지 확실하지 않지만 jQuery를 사용하여 내 자신의 파일 업로드 플러그인을 작성하고 있지만 잘 작동하고 있습니다. 사용자가 데스크톱에서 div로 파일을 드롭하고 해당 파일을 내 입력에 추가하도록 허용하여 사용자 경험을 향상 시키십시오.<input type = "file"multiple>에 누락 된 파일 추가하기

나는 끌어서 놓기 작업을 업로드와 동일하게 수행하지만 현재는 끌어서 놓기, 여러 개의 업로드와 분리되어 있습니다. 사람이 이해할 수있을 것이 도움이 할 수 있다면

<div id="dropZone"></div> 
<!--Drop area is seperate from the fileUpload below--> 
<form enctype="multipart/form-data"> 
    <input class="clear" name="nonImagefilesToUpload[]" id="nonImagefilesToUpload" type="file" multiple/> 
</form> 

this.drop = function(e){ 
    e.stopPropagation(); 
    e.preventDefault(); 
    files = e.dataTransfer.files ; 
    for (var i = 0, file; file = files[i]; i++) { 

     //pseudo code 
     if (!file.type.match(settings.imageTypeMatch)) { 
      //not an image so I want to append it to my files array 
      $('#nonImagefilesToUpload').append(file[i]); 
      //hoping this will also trigger my input change 


     }else{ 
      var reader = new FileReader(); 
      reader.onload = (function(aFile) { 
      return function(evt) { 
       if (evt.target.readyState == FileReader.DONE) 
       { 
        //code to handle my images 
        //which are uploaded seperate via xhr 
       } 
      })(file);//done reading the file 

      //read the file 
      reader.readAsDataURL(file); 
     } 
    } 


    return false; 
}; 

, 그것으로 인해 증권에 가능하지 않을 수도 있지만, I :

그래서 내 HTML5 드롭 기능에 나는 같은 것을 할 싶습니다 내가 묻는 줄 알았는데

답변

관련 문제