一直以来都梦想着做一个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 < _container.height - 30)) { 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 < _list.validList.length)) { _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 < _pendingFileList.length)) { 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)); } |
|
时间： 2024-11-25 12:43:49