Jquery獲取從文件輸入中選擇的圖像的文件名

我想要在我的頁面上載圖像，我有這個。Jquery獲取從文件輸入中選擇的圖像的文件名

@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不起作用。

來源

2016-06-19 Ashenafi Semu

與'ID = 「路徑」元素'是沒有'的.text（）'屬性的輸入 - 這將需要'$（ '路徑'）VAL。（$（本）.files [0]。名稱）;'。但它不清楚你在這裏做什麼 - 當你上傳文件時，你爲什麼不只是在POST方法中獲取文件名？ –

我將.text（）更改爲.val（），但仍然無效。我想設置TextboxFor元素的值，因爲它綁定到模型學生的photo屬性，以便我可以將其保存到數據庫。 –

當文件上傳時，你有文件名（'HttpPostedFileBase'的'FileName'屬性），那麼這有什麼意義呢？ –

的$('.ImageData').change()永遠不會被執行，因爲它獲得的由onhcnage事件的明確設置自動覆蓋指向一個名爲DI()。所以功能，如果你想獲得該文件的文件名被上傳，你需要做的是在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>

來源

2016-06-20 08:11:57

Jquery獲取從文件輸入中選擇的圖像的文件名

回答

相關問題