範例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<label>圖片預覽:</label>
<div id="previewDiv">
</div>
<!-- IMG.END -->
<button type="button">
上傳相片
</button>
<input type="file" id="upimg" accept=".png, .jpg, .jpeg" onchange='imgUploadCheck(this)' />
<button type="button" id="btnRemovePic"
class="am-btn am-btn-default am-radius am-btn-sm" style="display:none">移除圖片</button>
</div>
<script>
$(function(){
});
//圖片上傳檢查
/* 1.只能是jpg/jpeg 2.檔名只接受小寫英文、數字、底線、連字號 3.不可超過150KB*/
function imgUploadCheck(input){
//清空網址上傳欄位
/*$('#upimg').val('');
$('#img_previewPic').attr({
src: ''
});
$('#imgErrorTip').html('').hide();*/
var file = $(input)[0].files;
//為空值>重置
if(file.length==0){
$('#btnRemovePic').click();
$(input).parent().removeClass('am-form-error');
$('#imgErrorTip').html('').hide();
return false;
}
var fileName = file[0].name;
var fileType = file[0].type;
var fileSize = file[0].size;
console.log(file,fileType,fileSize);
var typeRule = ["image/jpg", "image/jpeg", "image/png"];
if ($.inArray(fileType, typeRule) < 0) {
alert(input,'檔案格式不符，請上傳 jpg/png 檔案');
return false;
}
if((fileSize/1024) > 150){
//lert('圖片大於150KB');
$("#previewDiv").empty(); // 清空當下預覽
previewFiles(file) // this即為<input>元素
//--------------
}
else{
console.log('圖片OK');
$("#previewDiv").empty(); // 清空當下預覽
previewFiles(file); // this即為<input>元素
}
}
// 預覽圖片，將取得的files一個個取出丟到convertFile() ,IE不支援
function previewFiles(files) {
console.log('previewFiles',files);
if (files && files.length >= 1) {
$.map(files, file => {
convertFile(file)
.then(data => {
console.log(data) // 把編碼後的字串輸出到console
showPreviewImage(data, file.name)
})
.catch(err => console.log(err))
})
}
}
// 在頁面上新增<img>
function showPreviewImage(src, fileName) {
/*let image = new Image(250) // 設定寬250px
image.name = fileName
image.src = src // <img>中src屬性除了接url外也可以直接接Base64字串
$("#previewDiv").append(image).append(`<p>File: ${image.name}`)*/
$('#div_previewPic').show();
$('#btnRemovePic').show();
$("#previewDiv").html('');
$("#previewDiv").html('<a href="'+src+'" data-fancybox="gallery">\
<img src ="'+src+'" alt ="'+fileName+'" width="250"/></a>\
<p>檔案：'+fileName+'</p>');
}
// 使用FileReader讀取檔案，並且回傳Base64編碼後的source ,IE不支援(2022-06-15停用)
function convertFile(file) {
return new Promise((resolve,reject)=>{
// 建立FileReader物件
let reader = new FileReader()
// 註冊onload事件，取得result則resolve (會是一個Base64字串)
reader.onload = () => { resolve(reader.result) }
// 註冊onerror事件，若發生error則reject
reader.onerror = () => { reject(reader.error) }
// 讀取檔案
reader.readAsDataURL(file)
});
}
</script>
</body>
</html>
沒有留言:
張貼留言