Home / Questions / 321068
Accepted
Claudio
Asked: 2020-01-11 09:12:27 +0800 CST 2020-01-11 09:12:27 +0800 CST

How to Get the absolute path of an image to pass it to the Controller? - ASP.NET MVC

  • 772

I want to get the path of the image to pass it to the Controller and from there save the path to the MySql database.

I'm using a <input type="file" />to search for the image, but of course! when I pass the data to the controller this type of inputonly gives me the name of the image and not the path.

how could i do? Here I show visually.

enter image description here

The .cshtml

 @using (Html.BeginForm("LibroInsertado", "Home", FormMethod.Post))
    {
        <br />
        <input type="Text" class="form-control" id="txt_bookName" name="txt_bookName" placeholder="Nombre de libro" required />
        <br />
        <input type="number" class="form-control" id="nbr_lanzamiento" name="nbr_lanzamiento" min="500" max="9999" placeholder="Año de lanzamiento ej: 2019" required />
        <br />

        <div class="form-group">
            <label for="exampleFormControlSelect1">Autor</label>
            <select name="ddlAutor" class="form-control" id="exampleFormControlSelect1" required>
                <option></option>
                @foreach (Autor item in autorList)
                {
                    <option [email protected]>@item.Nombre</option>
                }
            </select>
        </div>

        <div class="form-group">
            <label for="exampleFormControlSelect1">Categoria</label>
            <select name="ddlCategory" class="form-control" id="exampleFormControlSelect1" required>
                <option></option>
                @foreach (Categoria item in categoryList)
                {
                    <option [email protected]>@item.Nombre</option>
                }
            </select>
        </div>

        <div class="form-group">
            <label for="exampleFormControlSelect1">Editorial</label>
            <select name="ddlEditorial" class="form-control" id="exampleFormControlSelect1" required>
                <option></option>
                @foreach (Editorial item in editorialList)
                {
                    <option [email protected]>@item.Nombre</option>
                }
            </select>
        </div>

        <textarea name="txta_description" maxlength="300" class="form-control" rows="4" cols="40" placeholder="Descripcion del libro" required></textarea>
        <br />
        <input type="number" class="form-control" value="nbr_cantidad" name="nbr_cantidad" min="1" max="10000" placeholder="Cantidad de unidades" required />
        <br />
        @*poner que acepte coma en el precio*@
        <input type="number" class="form-control" id="nbr_price" name="nbr_price" maxlength="10" min="1" max="500000" placeholder="Precio $" required /><br />
        <input type="file" class="form-control" id="itf_urlImage" name="itf_urlImage" placeholder="Url imagen" required /><br />
        @*<input type="Text" class="form-control" id="txt_urlImage" name="txt_urlImage" maxlength="500" placeholder="Url imagen" required /><br />*@

        <input type="submit" name="btn_AgregarLibro" value="Agregar Libro" />
        <input type="reset" value="Restaurar">
    }

c#

2 Answers

  1. Best Answer

    Unfortunately what you ask cannot be done that way. For security reasons, browsers are not allowed to access the FileSystem.

    You can still try to do it using jQuery , although it's not certain that it will work for all browsers.

    For IE 11: You can access the information when you select an image like this:

    $('input[type=file]').change(function () {
   console.log(this.value);
   console.log(this.files[0]);
 })

    For Mozilla:

     $('input[type=file]').change(function () {
    console.log(this.files[0].mozFullPath);
 });

    Note: Test examples for the console.log().

    UPDATE 1:

    Based on your new comments in the question, the required path would be the Server path and NOT the Client path .

    In this case, the correct option to obtain the complete (absolute) Path of your image would be the following:

    var nombreImagen = Request.Form["itf_urlImage"];
var path = Path.Combine(Server.MapPath("~/principal/imagenes/"), nombreImagen);

    UPDATE 2:

    I leave a recommended reading about the <input type="file" />in ASP.NET MVC: How to upload files to the server in an ASP.NET MVC application

    • 2

  2. I solved it this way in the Controller: Create a variable String ruta = "principal/imagenes/";that contains the path of the images folder that I have inside my project and then I make a concatenation with the name of the image that it provides me<input type="file" />

    here the controller

    [HttpPost]
        public ActionResult LibroInsertado()
        {
            ViewBag.Message = "Your contact page.";
            String ruta = "principal/imagenes/";
            Libro book = new Libro();

            book.Nombre = Request.Form["txt_bookName"];
            book.AnioDeLanzamiento = Convert.ToInt32(Request.Form["nbr_lanzamiento"]);
            book.IdAutor = Convert.ToInt32(Request.Form["ddlAutor"]);
            book.IdCategoria = Convert.ToInt32(Request.Form["ddlCategory"]);
            book.IdEditorial = Convert.ToInt32(Request.Form["ddlEditorial"]);
            book.Descripcion = Request.Form["txta_description"];
            book.Cantidad = Convert.ToInt32(Request.Form["nbr_cantidad"]);
            book.Precio = Convert.ToSingle(Request.Form["nbr_price"]);
            book.UrlImagen = ruta.Replace("\\", "/") + Request.Form["itf_urlImage"];
            book.Estado = true;
            return View(book);
        }

    • 0