js圖片轉base64字符串格式上傳

選擇文件,回顯圖片以及轉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字符串格式接收。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章