ファイル入力から選択した画像のファイル名を取得する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は動作していません。それはあなたがファイルのファイル名を取得したい場合のはDI()。だからと呼ばれる関数を指すようにonhcnageイベントを明示的に設定することによりoverwriten得るために実行されることは決してありません

Answer 1

$('.ImageData').change()は、あなたがそれを行う必要がアップロードされています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>