Flash image batch Local preview and upload instance

Source: Internet
Author: User
Tags addchild file upload php file

Always dreamed of doing a flash of things out, has not dared to try.

Some time ago due to the needs of the project, Baidu Ueditor in the Flash pictures uploaded very obsessed.

The current situation may rarely encounter the opportunity to use flash, but this still can not eliminate my enthusiasm for flash pursuit.

This time the effect of everything to simple mainly, one is because there is no time, but AS3 technology decision.

This time the main implementation of the following functions:

1. Local Volume preview

Local previews are the new features that Flash9 and AS3 have started to offer, and this has become a feature of the image preview effect on Flash by reading the local picture binary.

In addition to calculate the position of each picture block I also have a headache for a good while, each row can only row 5 pictures, the full line will have to wrap, which also includes the placement of the button to add.

Flash do not want HTML like a CSS style sheet to solve the problem of sequencing, all the components in Flash are absolutely positioning, so this one has to continue to take the whole.

2. Automatic scrolling effect

Flash scrolling is also a major mishap, when the content is beyond the container can only be blocked. However, it still provides a scrollrect property for us to call.

Implementation of the Flash container scroll bar Drag effect, need to monitor the stage and the scroll bar of the mouse wheel, Oberra, Drop-down and other events. Calculate the distance between the scroll bar and the container from the top of the flash by the distance of the mouse pointer from the top of the flash.

But I tested, I still have a little bug in this effect, I hope to have time to improve.

3, bulk upload

This batch upload I did not achieve progress monitoring, later have time to consider plus.

This time in order to realize the form of image upload, need to use a tool class Uploadposthelper, it is to help us construct the mock file form, and then convert our image binary data to file data submission backstage.

4. Configurable Services

A custom configuration is the minimum requirement for a public component, and I offer a relatively small configuration this time, mainly for some very important configurations that can be extended slightly later.

The code is as follows Copy Code

ID: ' Flash ',//flash's name or ID
Container: ' Flashcontainer ',//flash container ID
Flashurl:/src/imageuploader.swf ',//flash address
Width:540,//flash width
Height:340,//flash height
VARs: {
Uploadurl:/_examples/php/upload.php ',// upload address PHP file accept address Everyone can write their own oh, this is very simple not introduced.
fieldName: ' file ',//the form name when submitting
Selectfilecallback: "Selectfilecallback",//callback for selection file
exceedfilecallback:null,//a callback when the file exceeds the maximum size of the limit
startuploadcallback:null,//the callback when you start uploading a file
uploadcompletecallback:null,//a callback with a file upload completed
uploaderrorcallback:null,//a callback that failed to upload a file
Allcompletecallback: "Allcompletecallback"//callback when all uploads are complete
}

I first release some source code, if need complete source code, please leave a message to me

The code is as follows Copy Code

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 = "Picture is uploading ...";
var tf:textformat = new TextFormat ("Song Body", 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 Shi Chengxiong.";
var tf:textformat = new TextFormat ("Song Body", 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) * 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 = "Currently uploading the first" + (_index + 1) + "/" + _list.validlist.length + "Picture ...";
Uploadbatch (_index);
}
Else
{
_info.text = "Picture all upload complete!" ";
if (Config.all_complete_callback && externalinterface.available)
{
Externalinterface.call (Config.all_complete_callback, _list.validlist);
}

}
var tf:textformat = new TextFormat ("Song Body", 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, "Malformed!");
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 = "Add Picture";
var tf:textformat = new TextFormat ("Song Body", 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));
}

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.