2014-09-12 6 views
1

Я хотел, чтобы загрузить изображение в форме AJAX и сделал это со ссылкой на эту Articleзагрузки файла с помощью AnguarJS

То, что я сделал:

Контроллер:

$scope.uploadImage = function() { 
    var result; 
    var formdata = new FormData(); 
    var fileInput = document.getElementById('fileInput'); 
    for (var i = 0; i < fileInput.files.length; i++) { 
     formdata.append(fileInput.files[i].name, fileInput.files[i]); 
    } 
    var xhr = new XMLHttpRequest(); 
    xhr.open('POST', '/Common/Image_upload?imageType=' + $scope.imageType); 
    xhr.send(formdata); 
    xhr.onreadystatechange = function() { 
     if (xhr.readyState == 4 && xhr.status == 200) { 
      alert(xhr.responseText); 
     } 
    } 
}; 

Вид:

<form id="uploader" ng-submit="uploadImage()"> 
    <input id="fileInput" type="file"> 
    <input type="submit" value="Upload file" /> 
</form> 

MVC контроллер:

[HttpPost] 
public JsonResult Image_upload(string imageType) 
{ 
    .... 
    success = ProductImage_insert(Image); 
    message = success ? "Image uploaded successfully!" : "Image was not uploaded!"; 
    return Json(message, JsonRequestBehavior.AllowGet); 
} 

Требование: мне нужно, чтобы поймать этот ответ JSON в контроллере, как я могу это сделать?

Заранее спасибо.

ответ

1

Вы можете сделать это в угловом образом:

$scope.uploadImage = function() { 
     var fileInput = document.getElementById('fileInput'); 
     var messageHeaders = { 'Content-Type': 'application/x-www-form-urlencoded' }; 
     messageHeaders['X-File-Name'] = encodeURI(fileInput.files[0].name); 
     messageHeaders['X-File-Type'] = encodeURI(fileInput.files[0].type); 
     var fileData = fileInput.files[0]; 

     $http({ 
      url: '/Common/Image_upload', 
      method: "POST", 
      data: fileData, 
      headers: messageHeaders 
     }).success(function (data, status, headers, config) { 
      // do what you want with the response 
     }); 
    } 

на сервере читать Request.InputStream для содержимого файла

[HttpPost] 
public virtual ActionResult Image_upload(productType) 
{ 
    var xfileName = HttpUtility.UrlDecode(Request.Headers["X-File-Name"]); 
    var xfileType = HttpUtility.UrlDecode(Request.Headers["X-File-Type"]); 
    var inputStream = Request.InputStream; 
    var fileLenght = (int)inputStream.Length; 
    var bytes = new byte[fileLenght]; 
    Request.InputStream.Read(bytes, 0, fileLenght); 

    System.IO.File.WriteAllBytes(Server.MapPath("/MyFiles/" + xfileName), bytes); 

    // return status code 200 or any other data 
    return new HttpStatusCodeResult(200); 
} 
+0

можно добавить часть после того, как вар FileInput в сервис/фабричный метод ? – RandomUser

+0

также мне нужно отправить строку 'type = 'Product'' в метод действия, как я могу это сделать? – RandomUser

+1

@RandomUser вы можете отправить его с параметром строки запроса (как это было в вашем примере) или настраиваемым заголовком HTTP. –

Смежные вопросы