選擇文件,回顯圖片以及轉base64格式後字符串隱藏提交文本域
<div class="col-sm-8 contain_img">
<img src="" style="display: none"></img>
<input class="form-control" id="image" type="file" onchange="imgChange()">
<div style="display: none">
<textarea id="frontIcon" class="summernote" name="frontIcon" ></textarea>
</div>
</div>
觸發onchange事件
function imgChange(){
var reader = new FileReader();
//上傳圖片最大值(單位字節)( 2 M = 2097152 B )超過2M上傳失敗
var AllowImgFileSize = 2100000;
var file = $("#image")[0].files[0];
if (file) {
//將文件以Data URL形式讀入頁面
reader.readAsDataURL(file);
reader.onload = function (e) {
var base64Code=reader.result
if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
alert( '上傳失敗,請上傳不大於2M的圖片!');
return;
}else{
$('.contain_img>img').css('display','block');//回顯標籤顯示
$("img").attr("src",base64Code);//回顯圖片添加
$("#frontIcon").val(base64Code);//存入隱藏提交域
}
}
}
}
表單提交到後臺,base64格式直接使用String字符串格式接收。