版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】移動(dòng)端圖片上傳方法【更好的兼容安卓IOS和微信】
之前的移動(dòng)端上傳的方法，有些朋友測(cè)試說(shuō)微信支持不是很好，還有部分安卓機(jī)也不支持，其實(shí)我已經(jīng)有了另一個(gè)方法，但是例子還沒(méi)整理出來(lái)，而聯(lián)系我的很多朋友需要，所以就提前先發(fā)出來(lái)了，并且做一個(gè)簡(jiǎn)單的說(shuō)明，就不做一個(gè)demo了。<!doctype
html>
<html>
<head>
<meta
charset="utf-8">
<meta
name="viewport"
content="width=device-width,
initial-scale=1,
maximum-scale=1,
user-scalable=0">
<title>圖片壓縮</title>
<style>
body
{
margin:0;
padding:0;
}
html
{
font-size:62.5%;
}
.imgzip
{
padding:1em;
}
.imgzip
.itm
{
padding-bottom:1em;
word-break:break-all;
font-size:1.2rem;
line-height:1.5em;
}
.imgzip
.itm
.tit
{
margin-bottom:.5em;
background-color:#e71446;
color:#FFF;
padding:.5rem
1rem;
border-radius:3px;
}
.imgzip
.itm
.cnt
{
padding:1rem;
}
.imgzip
.itm
.cnt
img
{
display:block;
max-width:100%;
}
.imgzip
textarea
{
width:100%;
height:20em;
}
</style>
</head>
<body>
<script
src="/jquery-1.8.3.js"></script>
<input
type="file"
accept="image/*;capture=camera"
class="input">
<div
class="imgzip"></div>
<script>
document.addEventListener('DOMContentLoaded',
init,
false);
function
init()
{
var
u
=
new
UploadPic();
u.init({
input:
document.querySelector('.input'),
callback:
function
(base64)
{
$.ajax({
url:"{:U('upload')}",
data:{str:base64,type:this.fileType},
type:'post',
dataType:'json',
success:function(i){
alert();
}
})
},
loading:
function
()
{
}
});
}
function
UploadPic()
{
this.sw
=
0;
this.sh
=
0;
this.tw
=
0;
this.th
=
0;
this.scale
=
0;
this.maxWidth
=
0;
this.maxHeight
=
0;
this.maxSize
=
0;
this.fileSize
=
0;
this.fileDate
=
null;
this.fileType
=
'';
this.fileName
=
'';
this.input
=
null;
this.canvas
=
null;
this.mime
=
{};
this.type
=
'';
this.callback
=
function
()
{};
this.loading
=
function
()
{};
}
UploadPtotype.init
=
function
(options)
{
this.maxWidth
=
options.maxWidth
||
800;
this.maxHeight
=
options.maxHeight
||
600;
this.maxSize
=
options.maxSize
||
3
*
1024
*
1024;
this.input
=
options.input;
this.mime
=
{'png':
'image/png',
'jpg':
'image/jpeg',
'jpeg':
'image/jpeg',
'bmp':
'image/bmp'};
this.callback
=
options.callback
||
function
()
{};
this.loading
=
options.loading
||
function
()
{};
this._addEvent();
};
/**
*
@description
綁定事件
*
@param
{Object}
elm
元素
*
@param
{Function}
fn
綁定函數(shù)
*/
UploadPtotype._addEvent
=
function
()
{
var
_this
=
this;
function
tmpSelectFile(ev)
{
_this._handelSelectFile(ev);
}
this.input.addEventListener('change',
tmpSelectFile,
false);
};
/**
*
@description
綁定事件
*
@param
{Object}
elm
元素
*
@param
{Function}
fn
綁定函數(shù)
*/
UploadPtotype._handelSelectFile
=
function
(ev)
{
var
file
=
ev.target.files[0];
this.type
=
file.type
//
如果沒(méi)有文件類型，則通過(guò)后綴名判斷（解決微信及360瀏覽器無(wú)法獲取圖片類型問(wèn)題）
if
(!this.type)
{
this.type
=
this.mime[.match(/\.([^\.]+)$/i)[1]];
}
if
(!/image.(png|jpg|jpeg|bmp)/.test(this.type))
{
alert('選擇的文件類型不是圖片');
return;
}
if
(file.size
>
this.maxSize)
{
alert('選擇文件大于'
+
this.maxSize
/
1024
/
1024
+
'M，請(qǐng)重新選擇');
return;
}
this.fileName
=
;
this.fileSize
=
file.size;
this.fileType
=
this.type;
this.fileDate
=
file.lastModifiedDate;
this._readImage(file);
};
/**
*
@description
讀取圖片文件
*
@param
{Object}
image
圖片文件
*/
UploadPtotype._readImage
=
function
(file)
{
var
_this
=
this;
function
tmpCreateImage(uri)
{
_this._createImage(uri);
}
this.loading();
this._getURI(file,
tmpCreateImage);
};
/**
*
@description
通過(guò)文件獲得URI
*
@param
{Object}
file
文件
*
@param
{Function}
callback
回調(diào)函數(shù)，返回文件對(duì)應(yīng)URI
*
return
{Bool}
返回false
*/
UploadPtotype._getURI
=
function
(file,
callback)
{
var
reader
=
new
FileReader();
var
_this
=
this;
function
tmpLoad()
{
//
頭不帶圖片格式，需填寫格式
var
re
=
/^data:base64,/;
var
ret
=
this.result
+
'';
if
(re.test(ret))
ret
=
ret.replace(re,
'data:'
+
_this.mime[_this.fileType]
+
';base64,');
callback
&&
callback(ret);
}
reader.onload
=
tmpLoad;
reader.readAsDataURL(file);
return
false;
};
/**
*
@description
創(chuàng)建圖片
*
@param
{Object}
image
圖片文件
*/
UploadPtotype._createImage
=
function
(uri)
{
var
img
=
new
Image();
var
_this
=
this;
function
tmpLoad()
{
_this._drawImage(this);
}
img.onload
=
tmpLoad;
img.src
=
uri;
};
/**
*
@description
創(chuàng)建Canvas將圖片畫至其中，并獲得壓縮后的文件
*
@param
{Object}
img
圖片文件
*
@param
{Number}
width
圖片最大寬度
*
@param
{Number}
height
圖片最大高度
*
@param
{Function}
callback
回調(diào)函數(shù)，參數(shù)為圖片base64編碼
*
return
{Object}
返回壓縮后的圖片
*/
UploadPtotype._drawImage
=
function
(img,
callback)
{
this.sw
=
img.width;
this.sh
=
img.height;
this.tw
=
img.width;
this.th
=
img.height;
this.scale
=
(this.tw
/
this.th).toFixed(2);
if
(this.sw
>
this.maxWidth)
{
this.sw
=
this.maxWidth;
this.sh
=
Math.round(this.sw
/
this.scale);
}
if
(this.sh
>
this.maxHeight)
{
this.sh
=
this.maxHeight;
this.sw
=
Math.round(this.sh
*
this.scale);
}
this.canvas
=
document.createElement('canvas');
var
ctx
=
this.canvas.getContext('2d');
this.canvas.width
=
this.sw;
this.canvas.height
=
this.sh;
ctx.drawImage(img,
0,
0,
img.width,
img.height,
0,
0,
this.sw,
this.sh);
this.callback(this.canvas.toDataURL(this.type));
ctx.clearRect(0,
0,
this.tw,
this.th);
this.canvas.width
=
0;
this.canvas.height
=
0;
this.canvas
=
null;
};
</script>
</body>
</html>這個(gè)也是把圖片轉(zhuǎn)成了base64去傳送，個(gè)人不建議去用js改變圖片的大小，建議裁切縮放還是PHP來(lái)做吧。this.maxWidth
=
options.maxWidth
||
800;
this.maxHeight
=
options.maxHeight
||
600;
this.maxSize
=
options.maxSize
||
3
*
1024
*
1024;
this.input
=
options.input;
this.mime
=
{'png':
'image/png',
'jpg':
'image/jpeg',
'jpeg':
'image/jpeg',
'bmp':
'image/bmp'};這一部分是對(duì)上傳圖片的配置，應(yīng)該可以看懂，可以自己去改$.ajax({
url:"{:U('upload')}",
data:{str:base64,type:this.fileType},
type:'post',
dataType:'json',
success:function(i){
alert();
}這部分是上傳以后ajax發(fā)送base64碼到php,base64碼帶有圖片的說(shuō)明字符串，所以得用正則去掉，然后base64解碼保存到圖片的文件中。并且返
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 創(chuàng)新初中體育教案2024年版
- 三角形分類全解析：2024年教學(xué)新方法
- 七年級(jí)下冊(cè)期末語(yǔ)文測(cè)試卷（B卷）
- 探究2024：八年級(jí)上冊(cè)物理教案全新設(shè)計(jì)
- 2024年多媒體課件評(píng)分標(biāo)準(zhǔn)：助力教育現(xiàn)代化
- 第45屆世界技能大賽全國(guó)選拔賽汽車噴漆項(xiàng)目技術(shù)工作文件
- 科目一科目四理論考試記憶口訣-駕考實(shí)操
- 2024屆上海市某中學(xué)高考化學(xué)全真模擬密押卷含解析
- 掌握2024年視覺(jué)盛宴：AE基礎(chǔ)培訓(xùn)教程從入門到精通
- 2024年C語(yǔ)言程序設(shè)計(jì)教案新編教程
- 大學(xué)生辯論賽評(píng)分標(biāo)準(zhǔn)表
- 診所污水污物糞便處理方案及周邊環(huán)境
- 江蘇開(kāi)放大學(xué)2023年秋《馬克思主義基本原理 060111》形成性考核作業(yè)2-實(shí)踐性環(huán)節(jié)（占過(guò)程性考核成績(jī)的30％）參考答案
- 《我是班級(jí)的主人翁》的主題班會(huì)
- 酒店安全設(shè)施及安全制度
- 近代化的早期探索與民族危機(jī)的加劇 單元作業(yè)設(shè)計(jì)
- 租賃機(jī)械設(shè)備施工方案
- 屋面融雪系統(tǒng)施工方案
- 二年級(jí)家長(zhǎng)會(huì)語(yǔ)文老師課件
- 結(jié)構(gòu)加固改造之整體結(jié)構(gòu)加固教學(xué)課件
- 教堂安全風(fēng)險(xiǎn)分級(jí)管控體系方案全套資料(2019-2020新標(biāo)準(zhǔn)完整版)
評(píng)論
0/150
提交評(píng)論