前端圖片回顯
阿新 • • 發佈:2018-11-17
<form>
<label>書名</label><input type="text" id="name" name="name" /> <br />
<label>作者</label><input type="text" id="author" name="author" /> <br />
<label>出版社</label><input type="text" id="press" name="press" /> <br />
< label>出版時間</label><input type="date" id="pressDate" name="pressDate" /> <br />
<label>圖書描述</label><input type="text" id="describe" name="describe" /> <br />
<!--選擇檔案後觸發函式-->
<input type="file" onchange="change(this)" id="bookImg" name="bookImg" > <br />
<img id="upLoadImg" /> <br /> <input type="submit" id="submitButton" />
</form>
function change(img) {
var file = img.files[0];
//獲取一個指向該元素的地址
var path = window.URL.createObjectURL(file);
console.log(path);
$("#upLoadImg").attr('src', path);
}
//如果不使用this,也可以使用jq直接獲取控制元件
$("bookImg").get(0).files[0]
//js獲取
var inputTag = document.getElementById("bookImg");
var img = inputTag.files[0];