<script>
function InputLoadImageToBindImageElement(inputEl, imgEl) {
if (inputEl.files && inputEl.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(imgEl).attr('src', e.target.result);
}
reader.readAsDataURL(inputEl.files[0]);
}
}
</script>
HTML
<img src="" id="image1" />
<input type="file" name="name" id="iptImage1" value="" />
呼叫
<script>
$("#iptImage1").change(function () {
InputLoadImageToBindImageElement(this, $('#image1'));
});
</script>
注意:
本文中的 Script 都必須放在 Form 的後面，或者乾脆就放在頁面的最下方，以免找不到 Input 而報錯。
MVC 中可用下面的方法叫用
@model WebServiceTest.Models.UploadFileInfo
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
<div>@ViewBag.Message</div>
@using(Html.BeginForm("Index", "FileUpload",
new { ReturnUrl = ViewBag.ReturnUrl },
FormMethod.Post,
new { @class = "form-inline", role = "form", enctype = "multipart/form-data" })) {
@Html.AntiForgeryToken()
@Html.ValidationSummary()
<input id="FileName" multiple="multiple" name="FileName" type="file" />
<img id="image1" src="" />
<input id="btnSubmit" name="btnSubmit" type="submit" value="Submit" />
}
@section scripts{
<script>
$("#FileName").change(function () {
InputLoadImageToBindImageElement(this, $('#image1'));
});
function InputLoadImageToBindImageElement(inputEl, imgEl) {
if (inputEl.files && inputEl.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(imgEl).attr('src', e.target.result);
}
reader.readAsDataURL(inputEl.files[0]);
}
}
</script>
}
