在ASP.NET MVC中使用Java脚本将上传的图像设置为背景

Question

In my application, I have so far managed to upload images to the server. Now I would like to set an uploaded image as a background dynamically using javascript in ASP.NET MVC5. Here is my code. This part reads file from local storage

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();

         }

     }

}   

This part stores the image into the file server system:

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"/>');

}

})

}    

This the action that is called up in the above 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);

}

So basically the image file is saved into elements-images folder. How do I then set a specific image from that folder into a background image?

Answer 1

Javascript side preview

For javascript side preview of the file, Please change your this line

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

to

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

Preview after upload on server

To show image after server response your code seems to be correct. It seems you need to change this line in action result

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

so it looks like this

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);

}