파일에 파일 추가 레일에 입력

Question

레일에 클립을 사용하여 여러 파일을 업로드하고 싶습니다. 한 번에 여러 파일을 업로드하는 페이지를 만들었습니다. 이제 동일한 파일 필드를 사용하여 더 많은 파일을 선택하고 이전에 선택한 파일과 현재 선택된 파일을 업로드하고 싶습니다.

내 file_field에 따라 :

<div class="queue-empty"> 
     <span class="btn btn-primary btn-file"> 
     <span class="fileinput-new">Click to Browse</span> 
      <%= photo.file_field :image,multiple: true,id: "File-Upload"%> 
     </span> 
    </div> 

어떻게 내가 이전에 선택한 파일을 잃지 않고이 파일 필드에 파일을 추가 할 수 있습니다? 누구든지 도와 줄 수 있습니까? 고맙습니다.

Answer 1

Dropzone과 같은 자바 스크립트 솔루션 사용을 고려해보십시오.

Answer 2

동일한 문제가 있었지만 Carrierwave가 사용되었지만 클라이언트 측에서 jQuery를 사용 했으므로 여기에는 문제가 없다고 생각합니다. 나는 빈 배열을 생성하고 무슨 짓을했는지 그래서 : 당신이 파일리스트 객체의 배열을 때, 다음

$('#File-Upload input[type=file]').change(function(e){ 
    var files = $('[type="file"]').get(0).files; 
//checking if it was multiple files upload 
    if (!!$(this).prop('files') && $(this).prop('files').length > 1) {/
    files_array = $(this)[0].files //creating array of uploaded files 
    $.each(files_array, function(indx, file){//iterate over this array, pushing files one by one 
     data.push(file) 
    }) 
    } 
    else { 
    data.push($(this)[0].files[0]);// single file, just uploading 
    } 
}); 

그리고, :

data = []; 

파일 입력 변화에 배열에 업로드 된 파일을 밀어 FormData 객체를 형성하고 같이 제출에 전달할 수 : https://jsfiddle.net/rp4kup3o/

:

여기

$(document).on('click', '.some-form input[type=submit]', function(e){ 
     e.preventDefault(); 
     formdata = new FormData(); 
     $.each(data, function(i, file) { 
     formdata.append('files' + i, file); 
    }); 
    //if you need to pass other parameters from your form you can do like this: 
    //var other_data = $('.some-form').serializeArray(); 
    // $.each(other_data,function(key,input){ 
    // formdata.append(input.name,input.value); 
    // }); 
    // ... some ajax call goes here 
}); 

이 바이올린입니다