동적으로 생성 된 FineUploader 및 양식 데이터 직렬화 (모델 바인딩 용 와이어 형식)

Question

MVC C# 응용 프로그램 내에서 Fineuploader (v5.3) 용 jquery 래퍼로 작업하고 있습니다.

내 컨트롤러는 내보기의 모양 ('n'개의 텍스트 필드 및 'n'개의 업로드 컨트롤)에 대한 메타 데이터 모음을 가져 와서보기로 전달합니다. BAM. 이러한 동적 업로드 컨트롤을 만들려면 Dynamic Multiple Upload Instances 이미 해결되었습니다. 현재의 이슈는 업로드 및 양식 게시가 한 번에 (파일을 저장하기위한 중간 위치가 아님) 함께 작업해야하는 점에서 약간 다릅니다. 또한,보기에서 컨트롤러로 무엇이 전달 될지 모르는 것을보고, 중요한 사전 정보와 그 값을 모두 추적하기 위해 사전 콜렉션을 활용하고 있습니다. 보기에서 컨트롤러로 텍스트 콜렉션을 직렬화하면 잘 작동합니다 (예 : fieldName [0] .property = value. 자세한 내용은 Hanselman 's Wire Format for Model Binding here 참조).

실제 문제는 무엇인가요? 업 로더의 파일에 대해이 와이어 포맷 직렬화를 사용하면 양식과 함께 올바로 게시 할 수 있습니다.

지금부터는 상위 수준의 문제에 대해 자세히 설명 드리겠습니다. 여기

을 어떤 업로드 정보없이 형태의 포스트 :

다음은 컨트롤러 모델의 현재 행동 와이어 형식을 볼 수 있습니다. 멋지게 직렬화합니다.

여기 동적으로 숨겨진 html 필드를 만들고 키와 값을 추가합니다. 은 UserText 사전 속성으로 잘 정리합니다. 그 여기를 참조하십시오 :

가 여기 내 FineUploader jQuery 코드입니다. Razor를 사용하여 인스턴스에 카운터를 추가하여 각각 고유합니다. 동적으로 내 양식에 2 업로드 컨트롤을 추가하고이를 게시 한 후

$('#files-upload@(counter)').fineUploader({ 
    debug: false, 
    autoUpload: false, 
    template: 'qq-template-@(counter)',  
    form: { 
     element : '@formId' 
    }, 
    validation: { 
     acceptFiles: ['image/*', 'application/acrobat', 'application/x-pdf', 'text/pdf', 'text/x-pdf'], 
     allowedExtensions: ['jpeg', 'jpg', 'pdf', 'tif', 'tiff'], 
     sizeLimit: 1024 * 1024 * 9, 
     stopOnFirstInvalidFile: false 
    }, 
    multiple: false 
}).on('submitted', function (event, id, filename) {  
    alert('submitted from ' + @counter); 
}).on('complete', function (event, id, filename, responseJSON) { 
    var element = $("li[qq-file-id=" + id + "] .qq-upload-status-text");  
    element.html("Success"); 
    alert('complete individual from ' + @counter); 
}).on('allComplete', function (succeeded, failed) {  
    alert('ALL complete from ' + @counter); 
}).on('error', function (event, id, name, errorReason, xhr) {  
    alert('Error[@(counter)]: ' + errorReason); 
}); 

: 내가 업로드하여 제출하면

$('#files-upload0').fineUploader('uploadStoredFiles'); 

$('#files-upload1').fineUploader('uploadStoredFiles'); 

$('#@formId').submit(); 

내가이 양식 데이터를 볼은을 제어합니다 . 또한 setForm을 나는 아직도의 onComplete 이벤트가 필요한 경우 내가 궁금하네요 등

, 와이어를 사용하는 경우 :

나는 내가 그것을 사용하는 방법을 잘 모르겠어요 불구하고, setForm 문서를 검토 한 결과 직렬화 된 컬렉션에 대한 아이디어 형식, 들어오는 파일의 속성 이름은 어디에서 변경합니까? 예를 들어, qqfile [0] .HttpPostedFile, qqfile [0] .ContentLength, qqfile [0] .InputStream 등이 있어야 직렬 변환기가 속성을 연결하고 할당 할 수 있다고 생각합니다. 현재 게시 된 내용으로는 두 번째 파일 업로드 세부 정보 (llama.jpg) 만 전송됩니다. 내가 설명하려고하는 것이 의미가 있는지, 또는 이것에 대해 더 쉬운 방법을 생각할 수 있습니까?

Answer 1

setForm API 메소드를 사용하면 상세 업 로더를 특정 <form> 요소에 연결할 수 있습니다.이는 파인 업 로더 인스턴스를 만들 때 존재하지 않는 양식을 등록하거나 대상 양식이 변경된 경우 유용합니다. 예를 들어

:

var uploader = new qq.FineUploader({}); 
uploader.setForm(document.querySelector('form')) 

자세한 내용은 문서 사이트의 form feature page에서 찾을 수 있습니다.