JQuery для получения имени файла изображения, выбранного из входного файла

Question

Я хочу иметь загрузку изображения на моей странице, и у меня есть это.

@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" /> 
} 

Изображение обновляется по мере того, как пользователь выбирает файл, используя функцию javascript DI(). Это прекрасно работает.

<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"} }) 

Что не работает, я хочу, чтобы связать имя файла, выбранного для помощника TextBoxFor для поля фотографии, так что я могу сохранить его в базу данных. Лучше привязать имя файла к полю фотографии, не устанавливая значение для помощника TextBoxFor, если это возможно. Как я могу это достичь? И если мне нужно установить значение для помощника TextBoxFor, как я могу это сделать? Jquery, который я написал, не работает.

Answer 1

$('.ImageData').change() никогда не будет выполнено, так как это получить-х перезаписаны явной установкой на onhcnage события, чтобы указать на функцию, называемую DI() .so, если вы хотите, чтобы получить имя файла загружаемого файла вы должны сделать это в DI() функция:

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>