.png)
相關(guān)關(guān)鍵詞
關(guān)于我們
最新文章
轉(zhuǎn)：flash+php實現(xiàn)圖片壓縮后上傳
圖片壓縮后上傳！Flash圖片極速上傳！提供參數(shù)控制！
需求
如果用戶使用數(shù)碼相機照的照片一般都會在很大！（2M~5M）
一般網(wǎng)站都會在用戶上傳照片后對照片進行適當(dāng)壓縮，以提高網(wǎng)頁瀏覽時照片的加載速度。
如果可以在客戶端對照片壓縮后上傳，可以節(jié)省帶寬，并且也減輕服務(wù)器壓力。會有很好的用戶體驗！以前實現(xiàn)這樣的功能都需要借助上傳組件！
其實使用Flash 10.0就可以實現(xiàn)照片壓縮后上傳。
原理
- 首先使用Flash的上傳功能讓用戶選擇要上傳的照片。
- 加載選擇照片的數(shù)據(jù)到Flash中。(此功能需要Flash10.0以上版本)
- 將數(shù)據(jù)加載到Flash的image組件中。
- 將image按照合適大小進行縮放。
- 在對image的顯示區(qū)域進行Flash截圖存入Bitmap。
- 將Bitmap轉(zhuǎn)換為Jpg格式數(shù)據(jù)。
- 使用post方式將Jpg數(shù)據(jù)發(fā)送到服務(wù)器端！
調(diào)用方法
<!DOCTYPE html>
<html>
<head>
<title>圖片壓縮上傳</title>
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body onload="showFlash();">
<div id="divFlash">
加載中...
</div>
<script type="text/javascript">
function showFlash() {
var params = {
serverUrl: "saveImage.aspx",
jsFunction: "flashReturn",
imgWidth:500,
imgHeight:500,
imgQuality:80,
btnText:'圖 片'
}
swfobject.embedSWF("imgZipUpload.swf", "divFlash", "100", "30", "10.0.0", "expressInstall.swf", params);
}
function flashReturn(type, str) {
if(type == 'error')
{
alert(str);
}
else if (type == 'complete')
{
var img1 = document.getElementById('img1');
img1.style.display = "block";
img1.src = str;
}
}
</script>
<img id="img1" style="display:none;" />
</body>
</html>
Flash參數(shù)說明
| 參數(shù) | 名稱 | 是否必填 | 默認值 | 取值范圍 |
|---|---|---|---|---|
| serverUrl | 服務(wù)器端響應(yīng)地址 | 必填項 | ||
| imgWidth | 圖片縮放寬度 | 選填 | 100 | 10-2000 |
| imgHeight | 圖片縮放高度 | 選填 | 100 | 10-2000 |
| imgQuality | 圖片質(zhì)量 | 選填 | 80 | 1-100 |
| jsFunction | 回調(diào)JS函數(shù) | 選填 | ||
| btnText | 上傳按鈕文字 | 選填 | 上 傳 |
說明：
- 用戶上傳照片會等比壓縮在指定范圍內(nèi)。
- 但當(dāng)用戶照片尺寸必需要縮放尺寸小時，不對用戶照片進行縮放。
- 上傳時只支持上傳jpg或bmp格式圖片。因為png或gif如果是透明的在壓縮后會變得不透明，所以不支持png或gif圖片上傳。
- imgQuality 圖片質(zhì)量數(shù)值越大質(zhì)量越高，但文件也會越大。
- jsFunction 回調(diào)JS函數(shù)參數(shù)type,str type 當(dāng)為error時,str為錯誤信息 當(dāng)為complete,str為服務(wù)器端返回值
- Flash中的按鈕必須用戶手動點擊后才會彈出選擇文件框！
服務(wù)器端頁面(Asp.net)
- Request.InputStream 壓縮后的jpg文件流
- Request.Headers["fileName"] 用戶圖片名稱
- Request.Headers["width"] 壓縮后寬度
- Request.Headers["height"] 壓縮后高度
- Response.Write(""); 上傳成功返回數(shù)據(jù)
實例及源碼下載：http://files.cnblogs.com/zjfree/imgZipUpload.rar
后記：
歡迎使用我的多文件版本，支持圖片壓縮后上傳，支持任意格式文件。
http://www.cnblogs.com/zjfree/archive/2011/01/06/1929100.html