asp.net mvc3 & knockout.js 파일 업로드에 대한 좋은 예를 찾고

Question

asp.net mvc3 & knockout.js를 사용하여 여러 파일 업로드의 포괄적 인 예를 찾으려고합니다. 주변을 둘러 보았지만 시작부터 끝까지 솔루션을 보여주는 것은 아무것도 아닙니다! 녹아웃 바인딩이 필요한 것을 보여주는 예제가 있지만 "컨트롤러"에서 파일을 읽는 방법을 보여주지는 않습니다. 목표는 db에 파일을 업로드하고 저장합니다. AWS S3 스토리지에 저장하는 예는 장점입니다. 도와주세요.

코 바인딩 :

또한

<input type="file" data-bind="value: fileToUpload, fileUpload: fileToUpload, url : 'Client/Upload' " /> 

ko.bindingHandlers.fileUpload = { 
    update: function (element, valueAccessor, allBindingsAccessor) { 
      var value = ko.utils.unwrapObservable(valueAccessor()) 
      if (element.files.length && value) { 
       var file = element.files[0]; 
       var url = allBindingsAccessor().url 


xhr = new XMLHttpRequest(); 
      xhr.open("post", url, true); 
      xhr.setRequestHeader("Content-Type", "image/jpeg"); 
      xhr.setRequestHeader("X-File-Name", file.name); 
      xhr.setRequestHeader("X-File-Size", file.size); 
      xhr.setRequestHeader("X-File-Type", file.type); 
      console.log("sending") 
      // Send the file (doh) 
      xhr.send(file); 
     } 
    } 
} 



[HttpPost] 
     public ActionResult Upload() 
     { 
      //Not sure what to do here. 
     } 

여러 파일을 업로드 할 필요가? 뷰 모델을 설정하는 방법을 잘 모릅니다.

Answer 1

자바 스크립트 쪽에서는 fineuploader http://fineuploader.com/을 사용하는 것이 좋습니다. 응답을 사용하여 viewmodel을 갱신하기위한 사용자 정의 Y 인딩을 작성할 수 있습니다.

<div data-bind="fileupload: viewModel.fileName"></div> 

ko.bindingHandlers.fileUpload = { 
init: function (element, valueAccessor) { 
     var $element = $(element); 
     var fileNameVal = valueAccessor; 
     var uploader = new qq.FineUploader({ 
      element: $element[0], 
      request: { 
      endpoint: 'server/your_upload_service' 
      }, 
      multiple: true, 
      validation: { 
       allowedExtensions: ['jpeg', 'jpg', 'txt'] 
      }, 
      callbacks: { 
      onComplete: function(id, fileName, responseJSON) { 
       if (responseJSON.success) { 
        // update your value 
        valueAccessor(fileName) 
        //may need to change this if you pass a reference back 
        // in your responseJSON such as an s3 key 
       } 
      } 
      } 
     }); 
    } 
}; 

은 서버 측에 관해서는 나는 ASP.net에 익숙하지 오전하지만 당신은 엔드 포인트에서 요청 데이터와 상호 작용 및 이미지 데이터를 포함하는 멀티 인코딩 된 형태의 부품을 추출 할 수 있어야한다.

는

MVC 3 file upload and model binding

File Upload ASP.NET MVC 3.0

또한 fineuploader가 나는 샘플 코드를 편집 키 "qqfile"