## html代碼
```
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<title>文件上傳</title>
</head>
<body>
<input id="good_img" name="good_img" class="weui-uploader__input" type="file" accept="image/*" multiple="">
<input type="hidden" id="imgBase64">
<button type="button" id="upload_btn">上傳</button>
<div class="upload_div"></div>
</body>
</html>
```
## js代碼
```
<script>
$('#upload_btn').click(function(){
var img = $('#imgBase64').val();
if (img) {
console.log(111);
}else{
alert('請選擇上傳圖片');
}
})
//圖片上傳
$("#good_img").on('change',function(){
var filePath = $(this).val(), //獲取到input的value，里面是文件的路徑
fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
imgBase64 = '', //存儲圖片的imgBase64
fileObj = this.files[0]; //上傳文件的對象,要這樣寫才行，用jquery寫法獲取不到對象
// 檢查是否是圖片
if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {
alert('上傳錯誤,文件格式必須為：png/jpg/jpeg');
return;
}
// 調用函數，對圖片進行壓縮
compress(fileObj,function(imgBase64){
imgBase64 = imgBase64; //存儲轉換的base64編碼
$('#imgBase64').val(imgBase64);
var str='<img src="'+imgBase64+'"/>';
$(".upload_div").html(str);
});
});
// 不對圖片進行壓縮，直接轉成base64
function directTurnIntoBase64(fileObj,callback){
var r = new FileReader();
// 轉成base64
r.onload = function(){
//變成字符串
imgBase64 = r.result;
console.log(imgBase64);
callback(imgBase64);
}
r.readAsDataURL(fileObj); //轉成Base64格式
}
// 對圖片進行壓縮
function compress(fileObj, callback) {
if ( typeof (FileReader) === 'undefined') {
console.log("當前瀏覽器內核不支持base64圖標壓縮");
//調用上傳方式不壓縮
directTurnIntoBase64(fileObj,callback);
}else if(fileObj.size<250000){ //圖片小于250k就不壓縮
console.log("不需要壓縮");
directTurnIntoBase64(fileObj,callback);
} else {
try {
var reader = new FileReader();
reader.onload = function (e) {
var image = $('<img/>');
image.load(function(){
square = 700, //定義畫布的大小，也就是圖片壓縮之后的像素
canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
imageWidth = 0, //壓縮圖片的大小
imageHeight = 0,
offsetX = 0,
offsetY = 0,
data = '';
canvas.width = this.width;
canvas.height = this.height;
context.clearRect(0, 0, square, square);
context.drawImage(this, 0, 0, this.width, this.height);
var data = canvas.toDataURL('image/jpeg');
//壓縮完成執行回調
callback(data);
});
image.attr('src', e.target.result);
};
reader.readAsDataURL(fileObj);
}catch(e){
console.log("壓縮失敗!");
//調用直接上傳方式 不壓縮
directTurnIntoBase64(fileObj,callback);
}
}
}
</script>
```
