在ASP.NET MVC中使用Javascript設置上傳的圖像作爲背景

Question

在我的應用程序中，我至今設法將圖像上載到服務器。現在我想在ASP.NET MVC5中使用JavaScript動態地將上傳的圖像設置爲背景。這是我的代碼。這部分從本地存儲讀取文件

jQuery(document).ready(function() 
{ 
    jQuery("#imageBrowes").change(function() 
    { 
     var File = this.files; 
     if (File && File[0]) 
     { 
      ReadImage(File[0]); 
     } 

    }) 

}) 


var ReadImage = function(file) 
{ 
    var reader = new FileReader; 
    var image = new Image; 

    reader.readAsDataURL(file); 
    reader.onload = function(_file) 
    { 
     image.src = _file.target.result; 
     image.onload = function() 
     { 
      var height = this.height; 
      var width = this.width; 
      var type = file.type; 
      var size = ~~(file.size/1024) + "KB"; 

      jQuery("#targetImg").attr('src', _file.target.result); 
      jQuery("#description").text("Size:" + size + ", " + height + "X " + width + ", " + type + ""); 
      jQuery("#imgPreview").show(); 

     } 

    } 

} 

這部分存儲圖像到文件服務器系統：

var ClearPreview = function(){ 

jQuery("#imageBrowes").val(''); 
jQuery("#description").text(''); 
jQuery("#imgPreview").hide(); 

} 

var Uploadimage = function() 
{ 

var file = jQuery("#imageBrowes").get(0).files; 
var data = new FormData; 
data.append("ImageFile", file[0]); 

jQuery.ajax({ 

type: "Post", 
url: "/Home/ImageUpload", 
data: data, 
contentType: false, 
processData: false, 
success: function (response) { 
ClearPreview(); 
jQuery("#uploadedImage").append('<img src="/elements-images/' + response + '" class="img-responsive thumbnail"/>'); 

} 

}) 

}  

這是在上面的javascript調用的行動：

public ActionResult ImageUpload(ProductViewModel model) 
{ 
    var file = model.ImageFile; 

    if (file != null) 
    { 
     var fileName = Path.GetFileName(file.FileName); 
     var extention = Path.GetExtension(file.FileName); 
     var filenamewithoutextension = Path.GetFileNameWithoutExtension(file.FileName); 

     file.SaveAs(Server.MapPath("/elements-images/" + file.FileName)); 


    } 

    return Json(file.FileName, JsonRequestBehavior.AllowGet); 

} 

所以基本上圖像文件被保存到elements-images文件夾中。然後如何將該文件夾中的特定圖像設置爲背景圖像？

Answer 1

JavaScript端預覽

對於文件的JavaScript端預覽，請在服務器上上傳後更改此行

jQuery("#targetImg").attr('src', _file.target.result); 

到

jQuery("#targetImg").attr('src', "data:" + file.type + ";base64," + btoa(_file.target.result)); 

預覽

要在服務器響應後顯示圖像，您的代碼似乎是正確的。看來你需要更改行動結果此行

return Json(file.FileName, JsonRequestBehavior.AllowGet); 

，所以它看起來像這樣

public ActionResult ImageUpload(ProductViewModel model) 
{ 
    var file = model.ImageFile; 
    string fileName = string.Empty; 
    if (file != null) 
    { 
     fileName = Path.GetFileName(file.FileName); 
     var extention = Path.GetExtension(file.FileName); 
     var filenamewithoutextension = Path.GetFileNameWithoutExtension(file.FileName); 

     file.SaveAs(Server.MapPath("/elements-images/" + file.FileName)); 


    } 

    return Json(fileName, JsonRequestBehavior.AllowGet); 

}