图片上传:SWFUpload 图片上传前预览：使用base64

1 使用SWFUPLOAD

官方网站：

http://code.google.com/p/swfupload/

本文中使用了SWFUpload_v250_beta_3_core.zip 版中的resize. Demo

2 上传前预览的思路

1》利用SWFUpload本身功能进行上传图片。

2》在SWFUpload自身的选择图片后，进行图片缩放。

3》对缩放后的图片进行缩略图的生成。　

4》对缩略图进行base64编码

5》调用javascript将图片生成在页面上。

2.1 利用SWFUpload本身功能进行上传图片

var swfu;

window.onload = function () {

swfu = new SWFUpload({

// Backend Settings

upload_url: "upload.php",

post_params: {"PHPSESSID": "b32nvlm8ctnvgatcnmiqsojgh0"},

// File Upload Settings

file_size_limit : "20 MB",

file_types : "*.jpeg;*.jpg;*.png",

file_types_description : "JPG Images; PNG Image",

file_upload_limit : 0,

// Event Handler Settings - these functions as defined in Handlers.js

// The handlers are not part of SWFUpload but are part of my website and control how

// my website reacts to the SWFUpload events.

swfupload_preload_handler : preLoad,

swfupload_load_failed_handler : loadFailed,

file_queue_error_handler : fileQueueError,

file_dialog_complete_handler : fileDialogComplete,

upload_progress_handler : uploadProgress,

upload_error_handler : uploadError,

upload_success_handler : uploadSuccess,

upload_complete_handler : uploadComplete,

// Button Settings

button_image_url : "images/SmallSpyGlassWithTransperancy_17x18.png",

button_placeholder_id : "spanButtonPlaceholder",

button_ 180,

button_height: 18,

button_text : '<span class="button">Select Images <span class="buttonSmall">(2 MB Max)</span></span>',

button_text_style : '.button { font-family: Helvetica, Arial, sans-serif; font-size: 12pt; } .buttonSmall { font-size: 10pt; }',

button_text_top_padding: 0,

button_text_left_padding: 18,

button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,

button_cursor: SWFUpload.CURSOR.HAND,

// Flash Settings

flash_url : "../swfupload/swfupload.swf",

flash9_url : "../swfupload/swfupload_fp9.swf",

custom_settings : {

upload_target : "divFileProgressContainer",

thumbnail_height: 400,

thumbnail_ 400,

thumbnail_quality: 100

// Debug Settings

debug: true

});

};

</script>

</head>

2.2 在SWFUpload自身的选择图片后，进行图片缩放。

首先下载了SWFUpload开源项目 SWFUpload_v250_beta_3_core，使用FlashDevelop打开。

经过程序分析，找到ImageResizer.as

编辑以下代码：

private function loader_Complete(event:Event):void {

// Get the image data

var bmp:BitmapData = null;

// var bmp:BitmapData = Bitmap(loader.content).bitmapData;

if (loader.width > this.targetWidth || loader.height > this.targetHeight)

{

bmp = scaleBitmap(loader.content, this.newWidth, this.newHeight);

}

else

{

bmp = Bitmap(loader.content).bitmapData;

}

// 从上传图片生成指定缩放的小些的图片

public function scaleBitmap(src: DisplayObject, newWidth: Number, newHeight: Number): BitmapData

{

var bmd: BitmapData = null;

bmd = new BitmapData(newWidth, newHeight, true, 0x000000);

var m: Matrix = new Matrix();

m.identity();

m.createBox(newWidth / src.width, newHeight / src.height);

bmd.draw(src, m, null, null, null, true);

return bmd;

}

2.3 对缩放后的图片进行缩略图的生成。

private function BuildSmallImage(bmp:BitmapData):void {

// add by liangzhimy 2012.10.9

// start ----------------------------------------------

var resizedBmp:BitmapData;

var smallWidth:int = 100;

var smallHeight:int = 100;

if (smallWidth < bmp.width || smallHeight < bmp.height)

{

var matrix1:Matrix = new Matrix();

matrix1.identity();

matrix1.createBox(smallWidth / bmp.width, smallHeight / bmp.height);

resizedBmp = new BitmapData(smallWidth, smallHeight, true, 0x000000);

resizedBmp.draw(bmp, matrix1, null, null, null, true);

var jpgEncoder:JPGEncoder = new JPGEncoder(100);

var bytes1:ByteArray = jpgEncoder.encode(resizedBmp);

var str:String = convertAvatartoString(bytes1);

ExternalCall.DrawImage(str);

}

else

{

var jpgEncoder2:JPGEncoder = new JPGEncoder(100);

var bytes2:ByteArray = jpgEncoder2.encode(bmp);

var str2:String = convertAvatartoString(bytes2);

ExternalCall.DrawImage(str2);

}

// end ------------------------------------------------

}

2.4 对缩略图进行base64编码

private static function convertAvatartoString(avatar:ByteArray):String

{

var str:String;

if (avatar != null)

{

str = Base64.encodeByteArray(avatar);

}

return str;

}

2.5 调用javascript将图片生成在页面上

ExternalCall.DrawImage(str2);

ExternalCall.as 中添加如下函数

public static function DrawImage(imageBase64:String):void{

ExternalInterface.call("drawImage", EscapeMessage(imageBase64));

}

web 页面上添加相应的调用函数：


	function drawImage(imgBase64) {
	// alert(imgBase64);
	var type = "data:image/jpeg;base64,";
	var IMG = document.createElement('IMG');
	IMG.src = type+imgBase64;
	document.getElementById('imgBox').appendChild(IMG);
	} .. ..

3　效果图：

4 关键技术总结

4.1 JAVASCRIPT与ActionScript交互

这个比较简单，一般都不太会出错，直接用ExternalInterface.call就可以：

Flex代码：

Js代码

var temp_str :String= new String(ExternalInterface.call("winClose",aa));

这里的winClose表明将要调用的JavaScript方法，aa是参数

JavaScript：

Js代码

function winClose(upData){
alert(upData);
return upData;
}

4.2 base64生成

var jpgEncoder2:JPGEncoder = new JPGEncoder(100);

var bytes2:ByteArray = jpgEncoder2.encode(bmp);

var str2:String = convertAvatartoString(bytes2);

private static function convertAvatartoString(avatar:ByteArray):String

{

var str:String;

if (avatar != null)

{

str = Base64.encodeByteArray(avatar);

}

return str;

}

4　参考Reference

SWFUpload 官网

http://code.google.com/p/swfupload/

SWFUpload2.5 官方中文文档

http://www.cnblogs.com/youring2/archive/2012/07/13/2590010.html#startResizedUpload

javascript与ActionScript交互

http://hintcnuie.iteye.com/blog/253972

base64生成

http://www.cnblogs.com/rialover/archive/2011/11/29/2267549.html

5 代码

主要修攺了

SWFUpload_v250_beta_3_core/swfupload_fp10

SWFUpload_v250_beta_3_samples/demos/resizedemo

就算当不成英雄，也要是一条好汉| 空谈误国，实干兴邦。