ASP.net MVC 4 Razor Загрузить изображение в всплывающем окне

Question

Я новичок в asp.net mvc 4. Я разрабатываю веб-сайт с mvc 4, и я хочу загрузить изображение во всплывающем окне. На этом сайте есть блог. Я хочу загрузить 3 4 изображения за сообщение. Но если я использую управление загрузкой по умолчанию html по умолчанию, я отправляю действие для получения ссылки на изображение. Если я опубликую действие для получения ссылки на изображение, снова загрузится страница и содержимое блога исчезнет. Поэтому я хочу загрузить изображение во всплывающем окне, и это всплывающее окно возвращает ссылку на изображение пользователю. Как я могу это сделать ?

Answer 1

Считаете ли вы использование любого из решений для загрузки js? Как http://www.plupload.com/example_queuewidget.php или или http://blueimp.github.io/jQuery-File-Upload/?

Answer 2

Контроллер:

[HttpPost] 
    public ActionResult Index(HttpPostedFileBase file) 
    { 
    if (file != null && file.ContentLength > 0) 
    { 
      int len =file.ContentLength; 

      var myData = new byte[len]; 

      file.InputStream.Read(myData, 0, len); 

      var fileId = SaveOrWriteToDb(file.FileName, file.ContentType, ref myData); 
      if(fileId > 0) 
      { 
       return RedirectToAction("Index", "Home"); 
      } 

    } 

Просмотр (JavaScript берется из How can I upload files asynchronously?)

<div id="popup"> 
    @using (Html.BeginForm("Index", "File", FormMethod.Post, new { enctype = "multipart/form-data" })) 
    { 
     <input class="file" type="file" name="file" /> 
     <input class="file" type="file" name="file2" /> 
     <input class="file" type="file" name="file3" /> 
     <input id="ok" type="button" value="OK" /> 
    } 
</div> 
<script> 
$(document).ready(function() { 
    $("#ok").click(function() { 
     $.each($('.file'),function(){ 

      var filename = $(this).val(); 
      $.ajax({ 
       type: "POST", 
       url: '@Html.Action("Index","File")', 
       enctype: 'multipart/form-data', 
       data: { 
       file: filename 
       }, 
       success: function() { 
       alert("Data Uploaded:"); 
       //return image link to user here... 
       } 
      }); 
     }); 
     }); 
}); 

К сожалению, не проверить это, я надеюсь, что это работает :). Это быстрый пример того, что вам нужно сделать.