如何在ASP.NET MVC4中使用本地驱动器路径

Question

I have saved File in local drive and now stuck with fetching it back to screen.

Scenario-

 public ActionResult Upload(HttpPostedFileBase file, CardModel card) {
        CardTable cardtable = new CardTable();
        if (file != null && file.ContentLength > 0) {
            // TODO: storing uploaded files to the App_Data folder on the server. 
            // Adjust this location to fit your requirements
            var drivepath = "D:\\FunRanger2\\FunRangerPhotos";
            var filepath = Path.Combine(drivepath, Path.GetFileName(file.FileName));
            file.SaveAs(filepath);
            cardtable.CardFileName = file.FileName;
            cardtable.CardFilePath = filepath;
            cardtable.CardDate = DateTime.Now;
            cardtable.CardTitle = card.cardTitle;
            cardtable.CardHashCode = card.cardHashCode == null ? "" : card.cardHashCode;
            db.CardTables.InsertOnSubmit(cardtable);
            db.SubmitChanges();
        }

As an example I saved file- Desert.png into this directory location.

So database CardFilePath column is updated this this path-

D:\\FunRanger2\\FunRangerPhotos\\Desert.png

On view side-

I check that this path is coming in model value-

@Model.cardFilePath is D:\\FunRanger2\\FunRangerPhotos\\Desert.png

Trying to get it in image-

 <img src="@Model.cardFilePath" height="300" width="300"  />

All I get is no Image there.

How Can I get this image on viewpage?

Answer 1

You need to put that image relative to your site so it can be served. For example, if you place the image in the root of your website the path would just be the image name. If you put it in a folder named images it would be something like /images/{image_name} .

Think about what the browser is doing. It's trying to access a file at D:\\FunRanger2\\FunRangerPhotos on the client machine.

Answer 2

You must create an action with File result: instead of returning a view, return a file like this:

return File("FileName", "img/png");

This overload have two parameters. The first one is the path to the file. The seocond one, is the MIME type of your file, which is related to the file type/extension, and you can easily find a lis of this types, for example, here .

Then you simply have to point the src attribute to this, for example with Url.Action() :

<img src="@Url.Action(...)" height="300" width="300"  />

You'd rather use an id in this action, instead of whowing the server path. For example:

public Image(int id)
{
    // get the filePath using the id:
    string filePath = ...;
    // get the mime type from the file extension
    string mimeType;
    return File(filePath, mimeType);
}

Use it in your Razor:

<img src="@Url.Action("Image", "ControllerName", new { id = ...})" 
    height="300" width="300"  />

Answer 3

You can map the folder as a virtual directory in IIS. First Store the files in D Drive as you are doing. Map the location of D Drive Images as a Virtual Directory (Simply right click the website node in IIS and select Add Virtual Directory) in the Website as shown below.

This will make all the D Drive location accessible using relative path.

Once you add it as Virtual Directory, you can use it as following in your code.

<img src='~/Images/.....your image name...' />

Answer 4

you can read the image as bytearray and return it to the view

public ActionResult Picture()
        {
            Byte[] Picture;

            var filePath = "D:\FunRanger2\FunRangerPhotos\Desert.png";
            if (System.IO.File.Exists(filePath))
            {
                Picture = System.IO.File.ReadAllBytes(filePath);
            }

            return File(Picture, "image/png");
        }