Jquery to get file name of image selected from a file input

Question

I want to have image upload in my page and I have this.

@using (Html.BeginForm())
{
<img id="sp" src="/Student/RetrieveImage" alt="Photo" height=100 width=200 />
<input type="file" name="ImageData" id="ImageData" onchange="DI()"  value="Upload" />
<input type="submit" name="submitButton" id="submitButton" value="Upload" formaction="/Student/Upload" formmethod="post" class="btn btn-primary" />
}

The image is updated as user selects a file using the javascript function DI(). This works fine.

<script>
function DI() {
  var oFReader = new FileReader();
  oFReader.readAsDataURL(document.getElementById("ImageData").files[0]);
  oFReader.onload = function (oFREvent) { document.getElementById("sp").src = oFREvent.target.result };
};

$(document).ready(function () {
  $('.ImageData').change(function () {
    $('.path').text($(this).files[0].name);
  });
});
</script>

@Html.TextBoxFor(model => model.Photo, new { htmlAttributes = new { @class = "form-control", @id="path"} })

What is not working is, I want to bind the name of the file selected to the TextBoxFor helper for the photo field so that I can save it to the database. It is better to bind the file name to the photo field without setting the value to a the TextBoxFor helper if that is possible. How can I achieve this? And if I have to set the value for the TextBoxFor helper, how can I do that? The jquery I wrote is not working.

The element with id="path" is an input which does not have a .text() property - it would need to be $('.path').val($(this).files[0].name);. But its unclear what you trying to do here - why are you not just getting the file name in the POST method when you upload the file? — user3559349
– user3559349, Commented Jun 19, 2016 at 23:00
I changed .text() to .val(), still not working. I want to set the value of the TextboxFor element becouse it is bound to the photo property of the model student, so that I can save it to the database. — Ashenafi Semu
– Ashenafi Semu, Commented Jun 20, 2016 at 5:37
When the file is uploaded you have the file name (the FileName property of HttpPostedFileBase), so what is the point of this? — user3559349
– user3559349, Commented Jun 20, 2016 at 5:42
I used the file name property and set it in the controller. Thanks. — Ashenafi Semu
– Ashenafi Semu, Commented Jun 21, 2016 at 17:18

Denys Wessels · Accepted Answer · 2016-06-20 08:11:57Z

The $('.ImageData').change() never gets executed because it get's overwriten by the explicit setting of the onhcnage event to point to a function called DI().So if you want to get the file name of the file being uploaded you need to do it in the DI() function:

function DI(upload) {

    var name = upload.files[0].name;
    var path = document.getElementsByClassName("path")[0].innerHTML = name;        

    var oFReader = new FileReader();
    oFReader.readAsDataURL(document.getElementById("ImageData").files[0]);
    oFReader.onload = function (oFREvent) { document.getElementById("sp").src = oFREvent.target.result };
};


@using (Html.BeginForm())
{
    <img id="sp" src="/Student/RetrieveImage" alt="Photo" height=100 width=200 />
    <input type="file" name="ImageData" id="ImageData" onchange="DI(this)" value="Upload" />
    <input type="submit" name="submitButton" id="submitButton" value="Upload" formaction="/Student/Upload" formmethod="post" class="btn btn-primary" />
}

<div class="path" style="border:1px solid red;height:20px;"></div>

Collectives™ on Stack Overflow

Jquery to get file name of image selected from a file input

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related