[JQUERY] asp.net MVC에 jQuery를 아약스 업로드 파일

asp.net MVC에 jQuery를 아약스 업로드 파일

해결법

1. ---

   1.ASP.Net MVC에서 AJAX를 사용하여 파일 업로드

   ASP.Net MVC에서 AJAX를 사용하여 파일 업로드

   상황이 HTML5 이후 변경된

   자바 스크립트

   document.getElementById('uploader').onsubmit = function () {
       var formdata = new FormData(); //FormData object
       var fileInput = document.getElementById('fileInput');
       //Iterating through each files selected in fileInput
       for (i = 0; i < fileInput.files.length; i++) {
           //Appending each file to FormData object
           formdata.append(fileInput.files[i].name, fileInput.files[i]);
       }
       //Creating an XMLHttpRequest and sending
       var xhr = new XMLHttpRequest();
       xhr.open('POST', '/Home/Upload');
       xhr.send(formdata);
       xhr.onreadystatechange = function () {
           if (xhr.readyState == 4 && xhr.status == 200) {
               alert(xhr.responseText);
           }
       }
       return false;
   }   
   

   제어 장치

   public JsonResult Upload()
   {
       for (int i = 0; i < Request.Files.Count; i++)
       {
           HttpPostedFileBase file = Request.Files[i]; //Uploaded file
           //Use the following properties to get file's name, size and MIMEType
           int fileSize = file.ContentLength;
           string fileName = file.FileName;
           string mimeType = file.ContentType;
           System.IO.Stream fileContent = file.InputStream;
           //To save file, use SaveAs method
           file.SaveAs(Server.MapPath("~/")+ fileName ); //File will be saved in application root
       }
       return Json("Uploaded " + Request.Files.Count + " files");
   }
   

   편집 : HTML

   <form id="uploader">
       <input id="fileInput" type="file" multiple>
       <input type="submit" value="Upload file" />
   </form>
   

2. ---

   2.AJAX 파일 업로드는 $ 아약스 요청의 데이터 속성에 FormData 객체를 전달하여 지금 가능합니다.

   AJAX 파일 업로드는 $ 아약스 요청의 데이터 속성에 FormData 객체를 전달하여 지금 가능합니다.

   영업 이익은 구체적으로 jQuery를 구현 요청으로, 여기 있습니다 :

   <form id="upload" enctype="multipart/form-data" action="@Url.Action("JsonSave", "Survey")" method="POST">
       <input type="file" name="fileUpload" id="fileUpload" size="23" /><br />
       <button>Upload!</button>
   </form>
   

   $('#upload').submit(function(e) {
       e.preventDefault(); // stop the standard form submission
   
       $.ajax({
           url: this.action,
           type: this.method,
           data: new FormData(this),
           cache: false,
           contentType: false,
           processData: false,
           success: function (data) {
               console.log(data.UploadedFileCount + ' file(s) uploaded successfully');
           },
           error: function(xhr, error, status) {
               console.log(error, status);
           }
       });
   });
   

   public JsonResult Survey()
   {
       for (int i = 0; i < Request.Files.Count; i++)
       {
           var file = Request.Files[i];
           // save file as required here...
       }
       return Json(new { UploadedFileCount = Request.Files.Count });
   }
   

   MDN에서 FormData에 대한 자세한 정보

3. ---

   3.당신은 아약스를 통해 파일을 업로드 할 수 없습니다, 당신은 전체 포스트 백을 수행하는 iframe이 또는 다른 속임수를 사용해야합니다. 이 보안 문제에 주로 기인한다.

   당신은 아약스를 통해 파일을 업로드 할 수 없습니다, 당신은 전체 포스트 백을 수행하는 iframe이 또는 다른 속임수를 사용해야합니다. 이 보안 문제에 주로 기인한다.

   여기 괜찮은 쓰기까지 스티브 샌더슨에 의해 SWFUpload와 ASP.Net MVC를 사용하여 샘플 프로젝트를 포함합니다. 그것은 희망이 당신을 위해 도움으로, 난이 Asp.Net MVC와 적절하게이 작업을 받고 (I가 아니라 시간에 MVC에 새로웠다)를 읽어 최초의 일이다.

4. ---

   4.나는 vuejs 버전에서이 같은 샘플을 가지고 : v2.5.2를

   나는 vuejs 버전에서이 같은 샘플을 가지고 : v2.5.2를

   <form action="url" method="post" enctype="multipart/form-data">
       <div class="col-md-6">
           <input type="file" class="image_0" name="FilesFront" ref="FilesFront" />
       </div>
       <div class="col-md-6">
           <input type="file" class="image_1" name="FilesBack" ref="FilesBack" />
       </div>
   </form>
   <script>
   Vue.component('v-bl-document', {
       template: '#document-item-template',
       props: ['doc'],
       data: function () {
           return {
               document: this.doc
           };
       },
       methods: {
           submit: function () {
               event.preventDefault();
   
               var data = new FormData();
               var _doc = this.document;
               Object.keys(_doc).forEach(function (key) {
                   data.append(key, _doc[key]);
               });
               var _refs = this.$refs;
               Object.keys(_refs).forEach(function (key) {
                   data.append(key, _refs[key].files[0]);
               });
   
               debugger;
               $.ajax({
                   type: "POST",
                   data: data,
                   url: url,
                   cache: false,
                   contentType: false,
                   processData: false,
                   success: function (result) {
                       //do something
                   },
   
               });
           }
       }
   });
   </script>
   

5. ---

   5.당신이 아약스를 사용하여 양식을 게시하는 경우에는 다음 당신은 할 수 없습니다 $ 아약스 방법을 사용하여 이미지를 전송, 당신은 이미지를 저장하기위한 고전 xmlHttpobject 방법을 사용해야합니다 그것의 다른 대안은 버튼 대신 유형을 제출 사용

   당신이 아약스를 사용하여 양식을 게시하는 경우에는 다음 당신은 할 수 없습니다 $ 아약스 방법을 사용하여 이미지를 전송, 당신은 이미지를 저장하기위한 고전 xmlHttpobject 방법을 사용해야합니다 그것의 다른 대안은 버튼 대신 유형을 제출 사용

from https://stackoverflow.com/questions/2428296/jquery-ajax-upload-file-in-asp-net-mvc by cc-by-sa and MIT license