Flash图片批量本地预览与上传实例

作者:袖梨 2022-06-28

一直以来都梦想着做一个flash的东西出来,一直都没敢去尝试。

以前一段时间由于项目的需要,曾经对百度ueditor里的flash图片上传非常痴迷。

现在的情况可能很少遇到要使用flash的机会,但这依然打消不了我追求flash的热情。

这次这个效果一切以简单为主,一是因为没什么时间,而是as3技术水平决定了。

这次主要实现了以下几个功能:

1、本地批量预览

本地预览是flash9及as3开始提供的新功能,这也成为了它的一大特色,通过将读取的本地图片二进制话,从而实现了在flash上的图片预览效果。

另外计算每个图片块的位置也是令我头疼了好一会,每排只能排5张图片,排满了就得自动换行,这其中还包括添加按钮的排位。

flash不想html那样一个css样式表一下就批量解决了排序问题,flash中所有的元件都是绝对定位,所以这其中就得不断地取整取余。

2、自动滚动效果

flash的滚动也是其一大硬伤,当内容超过容器后就只能被遮挡。不过其还是提供了一个scrollRect属性供我们调用。

实现flash容器的滚动条拖动效果,需要监听舞台及滚动条的鼠标滚轮、上拉、下拉等事件。通过鼠标指针距离flash顶部的距离去计算滚动条及容器距离flash顶部的距离。

不过我测试了,我这个效果中还是存在一点点bug的地方,希望以后有时间改进。

3、批量上传

这次的批量上传我没有实现进度监控,以后有时间可以考虑加上。

这次为了实现form式的图片上传,需要借助一个工具类UploadPostHelper,它是帮助我们构造模拟file表单,然后将我们的图片二进制数据转换成file数据提交后台。

4、可配置服务

自定义配置是一个公共化组件的最低要求,我这次提供的配置相对较少,主要是一些非常重要的配置,以后可以稍微扩展一下。

代码如下 复制代码

id: 'flash',//flash的name或者id
container: 'flashContainer',//flash容器id
flashUrl: /src/ImageUploader.swf',//flash地址
width: 540,//flash宽度
height: 340,//flash高度
vars: {
uploadUrl: /_examples/php/upload.php',//上传地址 php文件接受地址大家可自己写哦,这个很简单就不介绍了。
fieldName: 'file',//提交时的表单名称
selectFileCallback:"selectFileCallback",// 选择文件的回调
exceedFileCallback:null,// 文件超出限制的最大体积时的回调
startUploadCallback:null,// 开始上传某个文件时的回调
uploadCompleteCallback:null,// 某个文件上传完成的回调
uploadErrorCallback:null,// 某个文件上传失败的回调
allCompleteCallback:"allCompleteCallback"// 全部上传完成时的回调
}

我先发布部分源码,如果需要完整源码,请留言给我

代码如下 复制代码

private function initMask():void
{

_mask = new Sprite();
_mask.graphics.beginFill(0x000000);
_mask.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
_mask.graphics.endFill();

_mask.alpha = 0.6;

_info = new TextField();
_info.text = "图片正在上传中...";
var tf:TextFormat = new TextFormat("宋体",16,0xff0000);
_info.setTextFormat(tf);
_info.x = (stage.stageWidth - _info.textWidth) / 2;
_info.y = (stage.stageHeight - _info.textHeight) / 2;
_info.autoSize = TextFieldAutoSize.CENTER;
}
private function initDesc():void
{
var desc:TextField = new TextField();
desc.text = "copy right for 谢承雄.";
var tf:TextFormat = new TextFormat("宋体",12,0xff0000);
desc.setTextFormat(tf);
desc.x = stage.stageWidth - desc.textWidth;
desc.y = stage.stageHeight - desc.textHeight-10;
desc.autoSize = TextFieldAutoSize.CENTER;
addChild(desc);
}
private function addScrollBar():void
{
_scrollBar = new Sprite();
_scrollBar.graphics.beginFill(0x000000);
_scrollBar.graphics.drawRect(((5 * _width) + 30),2,10,30);
_scrollBar.graphics.endFill();

_scrollBar.addEventListener(MouseEvent.MOUSE_DOWN,_down);
_scrollBar.addEventListener(MouseEvent.MOUSE_UP,_up);
}
private function _down(e:MouseEvent):void
{
stage.addEventListener(MouseEvent.MOUSE_MOVE,_move);
stage.addEventListener(MouseEvent.MOUSE_UP,_up);

}

private function _up(e:MouseEvent):void
{
stage.removeEventListener(MouseEvent.MOUSE_MOVE,_move);
stage.removeEventListener(MouseEvent.MOUSE_UP,_up);

}

private function _move(event:MouseEvent):void
{
if (((mouseY > 0) && mouseY {
setScrollPos(mouseY);
}
}
private function setScrollPos(y:Number):void
{
var height:Number = Math.ceil((_list.fileList.length + 1) / 5) * 105 + 5 - _container.height;
var rect:Rectangle = _container.scrollRect;
rect.y = height * ((y - 5) / (_container.height - 35));
_scrollBar.y = y;
_container.scrollRect = rect;
}
public function upload():void
{
if (_list.validList.length > 0)
{
_index = 0;
addChild(_mask);
addChild(_info);
uploadBatch(0);
}
}
private function uploadBatch(i:Number):void
{
if (Config.START_UPLOAD_CALLBACK && ExternalInterface.available)
{
ExternalInterface.call(Config.START_UPLOAD_CALLBACK, _list.validList[i]);
}
var jpegEncoder:JPGEncoder = new JPGEncoder(_loader.width);
var jpegBytes:ByteArray = jpegEncoder.encode(_list.bitmapList[i]);

var urlRequest:URLRequest = new URLRequest();
urlRequest.url = Config.UPLOAD_URL;
urlRequest.method = URLRequestMethod.POST;

var params:Object = {};
urlRequest.data = UploadPostHelper.getPostData(_list.validList[i].name,jpegBytes,Config.FIELD_NAME,params);
urlRequest.requestHeaders.push(new URLRequestHeader('Cache-Control','no-cache'));
urlRequest.requestHeaders.push(new URLRequestHeader('Content-Type','multipart/form-data; boundary=' + UploadPostHelper.getBoundary()));

var urlLoader:URLLoader = new URLLoader();
urlLoader.dataFormat = URLLoaderDataFormat.BINARY;
urlLoader.addEventListener(Event.COMPLETE,uploadComlete);
urlLoader.load(urlRequest);
}
private function uploadComlete(evt:Event):void
{
if (Config.UPLOAD_COMPLETE_CALLBACK && ExternalInterface.available)
{
ExternalInterface.call(Config.UPLOAD_COMPLETE_CALLBACK, _list.validList[_index]);
}
_index++;
if ((_index {
_info.text = "当前正在上传第" + (_index + 1) + "/" + _list.validList.length + "张图片...";
uploadBatch(_index);
}
else
{
_info.text = "图片全部上传完成!";
if (Config.ALL_COMPLETE_CALLBACK && ExternalInterface.available)
{
ExternalInterface.call(Config.ALL_COMPLETE_CALLBACK, _list.validList);
}

}
var tf:TextFormat = new TextFormat("宋体",16,0xff0000);
_info.setTextFormat(tf);
}
private function selectFile(evt:MouseEvent):void
{
if (! _fileReferenceList)
{
_fileReferenceList = new FileReferenceList();
_fileReferenceList.addEventListener(Event.SELECT,selectHandler);
_fileReferenceList.addEventListener(Event.COMPLETE,selectCompleteHandler);
}
_fileReferenceList.browse();
}
private function selectHandler(evt:Event):void
{
ExternalInterface.call("console.dir",evt.target.fileList);
_index = 0;
_pendingFileList = evt.target.fileList;
_list.fileList = _list.fileList.concat(_pendingFileList);
addPendingFile(_pendingFileList[0]);
}
private function addPendingFile(file:FileReference):void
{
if (/(.jpeg|.jpg|.png|.gif|.bmp)$/g.test(file.type))
{
_list.validList.push(file);
file.addEventListener(Event.COMPLETE,selectCompleteHandler);
if (! _loader)
{
_loader = new Loader();
}
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadHandler);
file.load();
}
else
{
addError(_list.itemList.length, "格式错误!");
loadCompelete();
}
}

private function selectCompleteHandler(evt:Event):void
{
_loader.loadBytes(evt.target.data);
}

private function loadHandler(evt:Event):void
{
addItem(_list.itemList.length);
loadCompelete();
}
private function loadCompelete():void
{
_index++;
if ((_index {
addPendingFile(_pendingFileList[_index]);
}
if ((_index == _pendingFileList.length))
{
if (Config.SELECT_FILE_CALLBACK && ExternalInterface.available)
{
ExternalInterface.call(Config.SELECT_FILE_CALLBACK, _list.validList);
}
if (_list.fileList.length >= 15)
{
! stage.contains(_scrollBar) && addChild(_scrollBar);
setScrollPos(_container.height - 30);
}
else
{
stage.contains(_scrollBar) && removeChild(_scrollBar);
}
}
}

private function addPlusItem():void
{
_plusItem = new Sprite();
var x:Number = 5;
var y:Number = 5;
_plusItem.graphics.drawRect(x,y,_width,_height);
_plusItem.graphics.beginFill(0xefefef,1);
_plusItem.graphics.lineStyle(1,0x000000,1);
_plusItem.graphics.moveTo((x - 1),y - 1);
_plusItem.graphics.lineTo(((x + _width) + 1),y - 1);
_plusItem.graphics.lineTo(((x + _width) + 1),y + _height + 1);
_plusItem.graphics.lineTo((x - 1),y + _height + 1);
_plusItem.graphics.lineTo((x - 1),y - 1);
_plusItem.graphics.endFill();
_container.addChild(_plusItem);

var btnText:TextField = new TextField ;
btnText.text = "添加图片";
var tf:TextFormat = new TextFormat("宋体",16,0x000000);
btnText.setTextFormat(tf);
btnText.height = btnText.textHeight;
btnText.x = x;
btnText.y = y + (_height - btnText.height) / 2;
btnText.autoSize = TextFieldAutoSize.CENTER;
_plusItem.addChild(btnText);
_plusItem.addEventListener(MouseEvent.CLICK,selectFile);
}
private function movePlusItem(i:Number):void
{
_plusItem.x = (_width + 5) * int((i % 5));
_plusItem.y = (_height + 5) * int((i / 5));
}

相关文章

精彩推荐