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()的函数。所以如果你想获得要上传的文件的文件名，您需要在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>

Jquery获取从文件输入中选择的图像的文件名

1 个答案: