2016-03-17 48 views
1

我有局部視圖把它們上傳後按如下所示查看圖像:多圖片上傳工作,但只有一次

@model IEnumerable<WebApplication1.Model.Image> 
@using MvcApplication1.Models 

<div id="divImages"> 




    <input type="file" id="FileUpload" multiple /> 
    <input type="submit" id="Upload" value="Upload" /> 

    <table class="table" id="tble"> 
     <tr> 
      <th> 
       @Html.DisplayNameFor(model => model.cover) 
      </th> 
      <th> 
       @Html.DisplayNameFor(model => model.Product.type) 
      <th></th> 
     </tr> 

     @foreach (var item in Model) 
     { 
      <tr> 
       <td> 
        @Html.DisplayFor(modelItem => item.cover) 
       </td> 
       <td> 
        @Html.Image("/Images/" + item.id_product + "/" + item.id_image + ".jpg", "Image", "50") 
       </td> 
       <td> 
        @Html.ActionLink("Delete", "Delete", new { id = item.id_image }) 
       </td> 
      </tr> 
     } 

    </table> 
</div> 

和AJAX如下:

<script> 
    $(document).ready(function() { 
     $("#Upload").click(function() { 
      var formData = new FormData($('form').get(0)); 
      var totalFiles = document.getElementById("FileUpload").files.length; 
      for (var i = 0; i < totalFiles; i++) 
      { 
       var file = document.getElementById("FileUpload").files[i]; 

       formData.append("FileUpload", file); 
      } 
      formData.append("Model", @Model.Take(1).Single().id_product); 
      $.ajax({ 
       type: "POST", 
       url: '/Products/Upload', 
       data: formData, 
       //dataType: 'json', 
       contentType: false, 
       processData: false, 
       success: function (response) { 
        alert('succes!!'); 
        $.get('@Url.Action("All", "Products")', { id: @Model.Take(1).Single().id_product }, function (data) { 
         $("#divImages").html(data); 
        }); 
       }, 
       error: function (error) { 
        alert("errror"); 
       } 
      }); 
     }); 
    }); 

</script> 

可以提醒後見成功上傳的用戶,局部視圖被更新。

這是我的Upload()功能:

public ActionResult Upload(int model) 
    { 

     for (int i = 0; i < Request.Files.Count; i++) 
     { 
      Image p = new Image(); 
      p.cover = true; 
      p.id_product = model; 
      db.Images.Add(p); 
      db.SaveChanges(); 
      var ims = db.Images.OrderByDescending(x => x.id_image).Take(1).Single(); 
      var file = Request.Files[i]; 
      var fileName = ims.id_image.ToString() + ".jpg"; //Path.GetFileName(file.FileName); 
      var path = Server.MapPath("~/Images/"+model.ToString()+"/"); 
      if(this.CreateFolderIfNeeded(path)) 
       file.SaveAs(path + fileName); 
     } 


     return RedirectToAction("All", new { id = model }); 
    } 

最後,我All()功能:

public PartialViewResult All(int id) 
    { 
     List<Image> model = db.Images.Where(x => x.id_product == id).ToList(); 
     if (model.Count() == 0) 
     { 
      Image i = new Image(); 
      i.id_product = id; 
      List<Image> li = new List<Image>(); 
      li.Add(i); 
      return PartialView("_File", li); 
     } 
     else 
      return PartialView("_File", model); 
    } 

,這裏是我的Image型號:

namespace WebApplication1.Model 
{ 
    using System; 
    using System.Collections.Generic; 

    public partial class Image 
    { 
     public int id_image { get; set; } 
     public int id_product { get; set; } 
     public bool cover { get; set; } 

     public virtual Product Product { get; set; } 
    } 
} 

和編輯觀點:

@model WebApplication1.Model.Product 
@using MvcApplication1.Models 

@{ 
    ViewBag.Title = "Edit"; 
} 

<head> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 
    <link href="jquery.fileupload.css" rel="stylesheet" type="text/css" /> 

    <script src="//code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
</head> 


<body> 
    <h2>Edit</h2> 

    <br /> 
    <br /> 


    <div class="form-horizontal"> 
     <div id="tabs"> 
      <ul> 
       <li> 
        <a href="#fragment-1"><span>Information</span></a> 
       </li> 
       <li> 
        <a href="#fragment-2"><span>Prices</span></a> 
       </li> 
       <li> 
        <a href="#fragment-3"><span>SEO</span></a> 
       </li> 
       <li> 
        <a href="#fragment-4"><span>Associations</span></a> 
       </li> 
       <li> 
        <a href="#fragment-5"><span>Images</span></a> 
       </li> 
      </ul> 
      @using (Html.BeginForm()) 
      { 
       @Html.AntiForgeryToken() 
       @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 
       @Html.HiddenFor(model => model.id_product) 
       <div id="fragment-1"> 

       </div> 

       <div id="fragment-2"> 


       </div> 

       <div id="fragment-3"> 


       </div> 


      <div id="fragment-4"> 

      </div> 

      <div id="fragment-5"> 


        @{ Html.RenderAction("All", "Products", new { id = Model.id_product }); } 

      </div> 

     </div> 
    </div> 

    @section Scripts { 
     @Scripts.Render("~/bundles/jqueryval") 
    } 

    <script src="external/jquery/jquery.js"></script> 
    <script src="jquery-ui.js"></script> 
    <script> 
     $("#tabs").tabs(); 
    </script> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#fileupload').fileupload({ 
       dataType: 'json', 
       url: '/Products/UploadFiles', 
       autoUpload: true, 
       done: function (e, data) { 
        $('.file_name').html(data.result.name); 
        $('.file_type').html(data.result.type); 
        $('.file_size').html(data.result.size); 
       } 
      }).on('fileuploadprogressall', function (e, data) { 
       var progress = parseInt(data.loaded/data.total * 100, 10); 
       $('.progress .progress-bar').css('width', progress + '%'); 
      }); 
     }); 
    </script> 

</body> 

現在,一切正常,上傳和刷新局部視圖。除了成功上傳後,當我想上傳其他圖片時,上傳按鈕不起作用。

我希望有人知道爲什麼。

+1

要分享的任何錯誤消息?檢查瀏覽器上的控制檯 –

+0

「上傳按鈕」不起作用是什麼意思?我認爲你的意思是它仍然是可點擊的,但是你的動作方法沒有被調用,在這種情況下,它可能是你的jQuery的一個問題。 上傳文件後,還請檢查控制檯是否有錯誤。 –

+0

@MartinMazzaDawson你讓我正確。在控制檯中沒有錯誤 –

回答

0

從主視圖中刪除以下部分後問題解決。對斯蒂芬Muecke很多感謝。

<script type="text/javascript"> 
     $(document).ready(function() { 
      $('#fileupload').fileupload({ 
       dataType: 'json', 
       url: '/Products/UploadFiles', 
       autoUpload: true, 
       done: function (e, data) { 
        $('.file_name').html(data.result.name); 
        $('.file_type').html(data.result.type); 
        $('.file_size').html(data.result.size); 
       } 
      }).on('fileuploadprogressall', function (e, data) { 
       var progress = parseInt(data.loaded/data.total * 100, 10); 
       $('.progress .progress-bar').css('width', progress + '%'); 
      }); 
     }); 
    </script>