2014-05-05 253 views
2

這是我第一次在ASP.NET MVC中使用文件上傳,並且我已經能夠上傳圖像,調整大小,保存它到服務器,重命名src字符串,以便src圖像反映產品名稱(例如:「ProductImages/Original/FIFA14.jpg」)。圖像src也存儲在我使用的Url.Action()在視圖中顯示圖像的數據庫中。Asp.Net MVC編輯上傳圖像(HTTPPostedFileBase)編輯獲取

對於我的編輯帖子,我希望用戶能夠像往常一樣更改產品信息。每當用戶提交表單時,之前上傳的圖像將被上傳的新圖像文件覆蓋。

當我輸入編輯產品獲取視圖時,文件輸入顯示「沒有文件被選中」。 我希望它顯示用戶在他的本地計算機上創建產品之前上傳的圖像文件。

真的有辦法嗎,以及如何?

下面是編輯查看我的文件輸入:

 <div class="form-group"> 
     @Html.LabelFor(model => model.ProductImageViewModel.ImageUpload, new { @class = "control-label col-md-2" }) 
     <div class="col-md-10"> 
      <input type="file" name="imageUpload" id="imageUpload" /> 
      @Html.ValidationMessageFor(model => model.ProductImageViewModel.ImageUpload) 
     </div> 
    </div> 

爲編輯在控制器方法獲取:

// GET: /Product/Edit/5 
    public ActionResult Edit(Guid id) 
    { 
     Product product = _productRepository.GetById(id); 


     var productViewModel = new ProductViewModel 
     { 
      Id = product.Id, 
      Name = product.Name, 
      Description1 = product.Description1, 
      Description2 = product.Description2, 
      Description3 = product.Description3, 
      Status = product.Status, 
      Image = product.Image, 
      Weight = product.Weight, 
      Price = product.Price, 
      ReleaseDate = product.ReleaseDate, 
      Category = product.Category, 
      Categories = GetCategoryDropDownListForEdit(product), 
      ProductStatuses = GetStatusDropDownListForEdit(product),     
     }; 



     return View(productViewModel); 
    } 

這是我上傳的創建方法中的圖像:

// POST: /Product/Create 
    [HttpPost] 
    public ActionResult Create(ProductViewModel model, HttpPostedFileBase imageUpload) 
    { 
     if (UploadedFileIsValidImage(imageUpload)) 
     { 
      byte[] productPicture = new byte[imageUpload.ContentLength]; 
      imageUpload.InputStream.Read(productPicture, 0, imageUpload.ContentLength); 

      WebImage img = new WebImage(imageUpload.InputStream); 
      img.Resize(200, 200); 

      var fileName = imageUpload.FileName; 

      string imageName = model.Name; 
      string extension = Path.GetExtension(fileName); 


      var productImageFileName = imageName + extension; 

      img.FileName = productImageFileName; 
      var filePathOriginal = Server.MapPath("~/ProductImages/Originals"); 
      var filePathThumbNail = Server.MapPath("~/ProductImages/ThumbNails"); 
      string savedImageFileName = Path.Combine(filePathOriginal, productImageFileName); 
      img.Save(savedImageFileName); 
      model.ProductImageViewModel.ImageSrc = savedImageFileName; 
      model.Image = savedImageFileName; 


      try 
      { 
       var guid = new Guid(model.SelectedCategory); 
       _manager.AddProduct(
        model.Name, model.Description1, model.Description2, model.Description3, Convert.ToDecimal(model.Price), 
        Convert.ToDateTime(model.ReleaseDate), 
        Convert.ToDouble(model.Weight), model.ProductImageViewModel.ImageSrc, guid); 
       _categoryRepository.Save(); 
       return RedirectToAction("Index"); 
      } 
      catch 
      { 
       return View(); 
      } 
     } 
     else 
     { 
      model.Categories = CategoryDropDownListForCreate(); 
      return View(model); 
     } 
    } 

那麼如何獲得輸入以在文件輸入中顯示此產品的當前上傳文件?

+0

使用img標籤解決它顯示它,例如:

+0

也許我的問題不夠具體。我希望顯示文件輸入而不是「不選擇文件」,而是創建產品時(從計算機)上次上載的文件的文件名。不是它在數據庫中顯示圖像src的文件名。 – Assassin87

回答

0

當輸入的類型是「文件」時,您不能設置它的值。通常您會在編輯視圖中添加一個鏈接以下載當前上傳的文件。

1

你不能這樣做,因爲這是一個安全問題。如果試圖通過JavaScript 與下面的代碼段

<script type="text/javascript"> 
     document.forms["form1"].elements["uploadImage"].value = "C:\Users\Public\Pictures\Sample Pictures\Chrysanthemum.jpg"; 

</script> 

設置,如果你可以檢查你的瀏覽器控制檯,它輸出錯誤信息說

SecurityError: The operation is insecure.

0

嘗試這種方式(不解決方案,但需要一種工作方式),

在編輯視圖中,並排顯示上傳圖像和圖像上傳控件的鏈接。 如果用戶想查看/預覽上傳的圖片,可以使用圖片鏈接。 對於新的圖像,密切取代舊圖像。你可以檢查這是控制器Edit的方法。如果HttpPostedFileBase imageUpload不爲空,則更新,否則將模型保存到數據庫中。

正如已經被其他用戶提到,for security reason you cannot assign the path to input control.

0

首先我救了我的DB圖像的URL,然後我不得不去解決問題以及與此

// Add this to your controller to check if the file is coming empty, If yes then I copy my previous Url to the new edited object 
else if (file== null) 
     { 
      Product thisProduct = db.Products.Where(p => p.Id == product.Id).FirstOrDefault(); 
      product.Url = thisProduct.Url; 
     } 


    if (ModelState.IsValid) 
    { 
// had to use AddOrUpdate instead of Modified 

     db.Set<Product>().AddOrUpdate(product); 
     //db.Entry(product).State = EntityState.Modified; 
     db.SaveChanges(); 
     return RedirectToAction("Index"); 
    }