如何在Visual Studio 2012的（数据库）表中手动存储图像并在ASP.NET MVC中使用jquery ajax进行检索

Question

My database table

First I tried storing images with datatype image/varbinary but it is giving error:

"Invalid Value The changed value in this cell was not recognized as being valid. .Net Framework Data Type: Byte[] Error Message: You cannot use the result pane to set this Field data to values other than NULL Type a value appropriate for the data type or press ESC to cancel the change".

How can I store image in my database table manually and retireve them through jquery ajax method.

Answer 1

use in C# Button Submit with data source

   if (FileUpload1.PostedFile != null && FileUpload1.PostedFile.FileName != null)
            {
            byte[] img = new byte[Request.Files[0].ContentLength];
            Request.Files[0].InputStream.Read(img, 0, Request.Files[0].ContentLength);
            datasource.Photo = img; --here you can save file to Database
            }

for retrieving image from dbserver use belowed

img.ImageUrl = "data:image/jpg;base64," + Convert.ToBase64String(Upprofile.Photo);

Answer 2

Have you ever tried other ways to store images ?
I have never used such a way to store image in database if you want my two cents it would be better to save your image on host and save its url in the database. You only need url to show picture in browser...!

Answer 3

I'm not sure if this works in VS2012, but you can try this approach that I'm using in my MVC projects:

public action UploadFile(HttpPostedFileBase file) //this is how you get the file that was submited from your form
{
    //so now that I have the file, i need to save it somewhere
    //let's see if we have a folder for that, if not let's create it

    if(!Directory.Exists(Server.MapPath("~/The path from the root of the app to the uploaded files folder/")))
    {
        Directory.CreateDirectory(Server.MapPath("~/The path from the root of the app to the uploaded files folder/"));
    } //the ~ symbol is part of the code, it returns the physical path to the root of the application
    var storage = Server.MapPath("~/The path from the root of the app to the uploaded files folder/");

    //now we need a name, we can generate one as a GUID for example, or we can get it's own.

    var fileName = file.FileName.Substring(file.FileName.LastIndexOf("\"), file.Name.Length + 1);

    //Now you might have to play a bit with the substring arguments, I'm not sure i wrote that right, 
    //it might not need the +1 part, or it might need it on the LastIndexOf as well, 
    //anyway, now we have the name and the folder where to save our file, let's do that:

    path = String.Format("{0}\{1}", storage, filename);
    try
    {
        file.SaveAs(path); //Now the file is on the server, 
        //just save this path and whatever else you need in the database so you can
        //grab it later.
    } 
    catch 
    {
        //do your exception handling here
    }

    Saving to database here...
}

In order to grab it you just get that object from the database like any other objects like so:

Let's presume you're doing everything in your controller, which you shouldn't,

public Action GetFile(int id)
{
    using(context = new YourDbContext())
    {
        var file = context.Files.FirstOrDefault(p => p.Id == id);
    }
    return View(file);
}

And put it's path for the src in html to show the image like so:

<img src="@Model.path" /> //Considering that in your controller you will `return View(file);` 
//So your file object is the model.

One more thing, I'm not sure if in paths you'll need \\ or /, I always get it wrong the first time so debug it on the first run and if your path looks like Folder1Folder2Folder3File it means you need to change it :).

I hope this helped, good luck.

PS, there might be better ways to do it, but this is how I'm doing it and it seams to work fine for me.

Answer 4

On server, you convert image to a base64 string and save to database.

using (Image image = Image.FromFile(Path))
{                 
    using (MemoryStream m = new MemoryStream())
    {
        image.Save(m, image.RawFormat);
        byte[] imageBytes = m.ToArray();

        // Convert byte[] to Base64 String
        string base64String = Convert.ToBase64String(imageBytes);
        return base64String;
    }                  
}

Beside Client, you put base64 string in Image object

var image = new Image();
image.src = 'data:image/png;base64,your base64 string';
document.body.appendChild(image);

I think store image on the disk better.