FLASH image upload function-extracted from Baidu editor UEditor,

FLASH image upload function-extracted from Baidu editor UEditor,

In order to record various problems encountered in the work and sort out the learning materials, we started to sort out previous articles and carefully record various problems in the learning process in the future.

The file upload function in HTML has always been a problem. In order to limit the size of the uploaded file, how to display the progress bar, and how to preview the image before uploading, you have also tried various methods, until one day you can see the image upload function in the Baidu editor. It took some time to extract it.

The final result is as follows:

 

 

 

This feature allows you to select and preview multiple image files, then delete the uploaded images in the upload queue, rotate and display the progress bar in the upload, and select an upload album.

Source code download path: http://pan.baidu.com/s/13iNYw

Structure

1: FLASH file: imageUploader.swf

It is used to display the upload queue and provides the function of adding, previewing, deleting, rotating, and displaying progress bars to images!

Includes some parameter settings, such as the upload handler and related property settings. The most important parameter is flashvars, whose value is URL encoded.

The URL encoding conversion feature that you can implement through the http://tool.chinaz.com/Tools/URLEncode.aspx tool.

Original Value:

Container = flashContainer & url =/BaiduUE/imageUp & ext = {"param1": "value1", "param2": "value2"} & fileType = {"description ": "image", "extension ":"*. gif ;*. jpeg ;*. png ;*. jpg "watermark & width = 608 & height = 272 & gridWidth = 121 & gridHeight = 120 & picWidth = 100 & picHeight = 100 & uploadDataFieldName = upfile & picDescFieldName = pictitle & maxSize = 4 & compressSize = 2 & maxNum = 32 & compressSide = 0 & compressLength = 900

Remarks

• Container: "flashContainer", // flash container id
• Url: "/BaiduUE/imageUp", // url of the upload processing page
• Ext: '{"param1": "value1", "param2": "value2"}', // list of custom parameters that can be submitted to the server
• FileType: '{"description": "image", "extension ":"*. gif ;*. jpeg ;*. png ;*. jpg "} ', // File Upload format restrictions
• FlashUrl: 'imageUploader.swf ', // address of the flash component used for uploading
• Width: 608, // The flash width
• Height: 272, // The height of flash
• GridWidth: 121, // The width of each preview Image
• GridHeight: 120, // The height of each preview Image
• PicWidth: 100, // The width of a preview Image
• PicHeight: 100, // the height of a preview Image
• UploadDataFieldName: "upfile", // key of the image data in the POST request
• PicDescFieldName: 'pictitle', // key of the image description in the POST request
• MaxSize: 4, // maximum file size, in MB
• CompressSize: 2, // if the image size exceeds this value before uploading, it will be compressed first, in MB
• MaxNum: 32, // The maximum number of files that can be uploaded at a time
• CompressSide: 0, // benchmark for proportional compression. 0 indicates the longest side, 1 indicates the width, and 2 indicates the height.
• CompressLength: 900 // the maximum acceptable side length. If this value is exceeded, Flash will automatically perform proportional compression.

2: JS script

Used to process external album selection, FLASH event, and FLASH upload to upload images

************** * ************** // **** Check the flash status * @ private * @ param {Object} target flash Object * @ return {Boolean} */function _ checkReady (target) {if (typeof target! = 'Undefined' & typeof target. flashInit! = 'Undefined' & target. flashInit () {return true;} else {return false ;}} /*** create a random String * @ private * @ return {String} */function _ createString () {var prefix = 'MW _ flash __'; return prefix + Math. floor (Math. random () * 2147483648 ). toString (36 );} /*** create a Function name * @ private * @ param {String | function} for the incoming anonymous Function */function name * @ return {String} */Function _ createFunName (fun) {var name = ''; name = _ createStr Ing (); window [name] = function () {fun. apply (window, arguments) ;}; return name ;}/ *** it is determined repeatedly that Flash is completed by adding a callback function for Flash .. */var interval = setInterval (function () {try {var flash = thisMovie ("flash"); if (_ checkReady (flash )) {// you can use var callBack = [] to poll a method of flash; callBack [0] = _ createFunName (selectFileCallback); callBack [1] = _ createFunName (exceedFileCallback ); callBack [2] = _ createFunName (deleteFil ECallback); callBack [3] = _ createFunName (StartUploadCallback); callBack [4] = _ createFunName (uploadCompleteCallback); callBack [5] = _ createFunName (uploadErrorCallback ); callBack [6] = _ createFunName (allCompleteCallback); callBack [7] = _ createFunName (changeHeightCallback); thisMovie ("flash "). call ('setjsfuncname', [callBack]); clearInterval (interval) ;}} catch (ex) {}, 20); // obtain the function thisM of the Flash Object Ovie (movieName) {if (navigator. appName. indexOf ("Misrosoft ")! =-1) {return window [movieName];} else {return document [movieName];}

 

3: General handler: Upload. ashx

Used to save images on ASP. NET image servers

String state = "SUCCESS"; string URL = null; string currentType = null; string uploadpath = null; string filename = null; string originalName = null; HttpPostedFile uploadFile = null; public void ProcessRequest (HttpContext context) {context. response. contentType = "text/plain"; context. response. write (UploadPoto (context);} # region photo upload public string UploadPoto (HttpContext context) {int aid = Con Vert. toInt32 (context. request. form ["aid"]); // obtain the album ID bool mark = Convert. toString (context. request. form ["mark"]). toLower () = "true"; // obtain the watermark. // Upload the string pathbase = "Upload/" + aid. toString (); // storage path int size = 2; // file size limit, in MB string [] filetype = {". gif ",". png ",". jpg ",". jpeg ",". bmp "}; // file format allowed // upload image Hashtable info = new Hashtable (); info = upFile (context, pathbase, filetype, size, mark ); // Obtain the upload status string title = getOtherInfo (context, "pictitle"); // obtain the image description string oriName = getOtherInfo (context, "fileName "); // obtain the original file name string ret = "{'url': '" + info ["url"] + "', 'title': '" + title + "', 'original': '"+ oriName +"', 'state': '"+ info [" state "] +"'} "; return ret ;} private Hashtable upFile (HttpContext context, string pathbase, string [] filetype, int size, bool mark) {pathbase = pathbase +" /"; Uploadpath = context. server. mapPath (pathbase); // obtain the File Upload path try {uploadFile = context. request. files [0]; originalName = uploadFile. fileName; // create createFolder () in the directory; // format verification if (checkType (filetype) {state = "unsupported file type ";} // size verification if (checkSize (size) {state = "the file size exceeds the website limit";} // Save the image if (state = "SUCCESS ") {filename = reName (); string smallPath = reSmallName (); string waterPath = rePicName (); uploa DFile. saveAs (uploadpath + filename); string savePath = uploadpath + filename; ImageClass imageClass = new ImageClass (); if (imageClass. showThumbnail (savePath, uploadpath + smallPath, 640) // if there is a thumbnail, delete the source image {FileInfo fi = new FileInfo (savePath); fi. delete (); URL = pathbase + smallPath; filename = smallPath;} else {URL = pathbase + filename;} if (mark) {string watxt = "I Am a watermark... "; If (ImageClass. writerText (uploadpath + filename, uploadpath + waterPath, watxt) {URL = pathbase + waterPath; filename = waterPath ;}}} catch (Exception e) {state = "Unknown error"; URL = "" ;}return getUploadInfo ();} # endregion # auxiliary method of region uploading files/*** obtain file information * @ param context * @ param string * @ return string */protected string getOtherInfo (HttpContext context, string field) {string info = null; If (context. Request. Form [field]! = Null &&! String. IsNullOrEmpty (context. Request. Form [field]) {info = field = "fileName "? Context. request. form [field]. split (',') [1]: context. request. form [field];} return info;}/*** get upload information * @ return Hashtable */protected Hashtable getUploadInfo () {Hashtable infoList = new Hashtable (); infoList. add ("state", state); infoList. add ("url", URL); if (currentType! = Null) infoList. Add ("currentType", currentType); if (originalName! = Null) infoList. add ("originalName", originalName); return infoList;}/*** reName the file * @ return string */protected string reName () {return System. guid. newGuid () + getFileExt ();} protected string reSmallName () {return System. guid. newGuid () + "_ Small" + getFileExt ();} protected string rePicName () {return System. guid. newGuid () + "_ poto" + getFileExt ();}/*** file type check * @ return bool */protected boo L checkType (string [] filetype) {currentType = getFileExt (); return Array. indexOf (filetype, currentType) =-1;}/*** file size check * @ param int * @ return bool */protected bool checkSize (int size) {return uploadFile. contentLength> = (size * 1024*1024);}/*** get file extension * @ return string */protected string getFileExt () {string [] temp = uploadFile. fileName. split ('. '); return ". "+ temp [temp. length- 1]. ToLower ();}/*** automatically create a storage folder by date */protected void createFolder () {if (! Directory. Exists (uploadpath) {Directory. CreateDirectory (uploadpath) ;}# endregion

 

For more details, refer to the source code. For some children's shoes, Chrome is not supported. I think it should be the problem of Flash HTML encoding. Recently I am busy, so it will not take time to deal with it.