Use the plug-in uploadify to upload images with Ajax Effects

I uploaded images with Ajax effect for one day yesterday. I want to make myself more refined. So I read a lot of third-party controls and finally chose the uploadify control, the main reason is that it is easy to get started.

First, let's take a look at other people's documents (I sorted it out myself)

Optional
Parameter type parameter name explanation
(Boolean) Auto is automatically uploaded when a file is added to the queue.
(String) the path of the background image of the buttonimg browser button.
(String) The buttontext is displayed on the button by default.
(String) the path of the background image of the cancelimg cancel button.
(String) checkscript is used to check the path of the background script for an existing file on the server. [Translator's note: it should be the Ajax method]
(String) the data type displayed in the queue during the uploading process.
(String) the path of the expressinstall expressinstall.swf file.
(String) name of the file field to be processed in the filedataname background script. Note: It is the name value of input whose type is file]
(String) The text displayed by filedesc in the file type drop-down menu at the bottom of the browser window.
(String) the suffix of the file that fileext allows to upload. [Translator's note:. jpg/. PNG, etc]
(String) the path of the folder to be uploaded by folder. After the file is uploaded, it will be saved here.
(Integer) height the height of the browser button.
(Boolean) If hidebutton is set to true, the flash button is hidden, so that you can define a style for the following Div element.
(String) method to send data to the background script.
(Boolean) If multi is set to true, Multifile upload is allowed.
(String) the ID of the element you want to use as the file queue in the queueid page.
(Integer) number of files allowed in the queuesizelimit upload queue.
(Boolean) If removecompleted is set to true, items that have been uploaded in the queue are automatically removed.
(Boolean) If rolover is set to true, the mouse that activates the browser button is crossed.
(String) path of the background script for processing file uploads by the script.
(String) scriptaccess sets the Script Access Mode in the primary SWF file.
(JSON) When uploading a file, scriptdata should be sent to a JSON object containing name/value Key-value pairs and some additional information in the background script.
(Integer) number of files that can be uploaded simultaneously by simuploadlimit.
(Integer) size limit of the sizelimit file to be uploaded, in bytes.
(String) path of the Uploader uploadify.swf file.
(Integer) width the width of the browser button.
(String) The wmode of the wmode flash file.

event
(function) onallcomplete is triggered when all files in the upload queue are uploaded.
(function) oncancel is triggered every time a file is removed from the upload queue.
(function) oncheck is triggered when a file with the same name is detected before the upload starts.
(function) onclearqueue is triggered when the uploadifyclearqueue () method is called.
(function) oncomplete is triggered every time a file is uploaded.
(function) onerror is triggered when an error is returned during upload.
(function) oninit is triggered when the uploadify instance is loaded.
(function) onopen is triggered once when a file in the upload queue starts to be uploaded.
(function) onprogress is triggered during the upload process.
(function) onqueuefull is triggered when the number of files reaches the upload queue limit.
(function) onselect is triggered every time a file is added to the upload queue.
(function) onselectonce is triggered when one or more files are added to the upload queue.
(function) onswfready is triggered when the flash file is loaded.

Method. uploadify () creates an instance of the uploadify Upload Component.
. Uploadifycancel () removes a file from the upload queue. If the file is being uploaded, this method cancels the upload and then removes the file from the upload queue.
. Uploadifyclearqueue () removes all files from the upload queue and cancels all ongoing uploads.
. Uploadifysettings () changes the optional parameters of the uploadify component.
. Uploadifyupload () triggers the upload.

 

Some parameters will be used here, but we do not need to fully master these parameters. We can see which parameters we will use before.

Due to limited timeCodeFirst, for your reference:

Apply the CSS style <link href = ".. /plugin/uploadify.css "rel =" stylesheet "type =" text/CSS "/> the path here may be different from mine.

Then, apply the JS Code in the

<SCRIPT type = "text/JavaScript" src = ".../JS/jquery-1.4.2.min.js"> </SCRIPT>
<SCRIPT src = "../plugin/swfobject. js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT src = "../plugin/jquery. uploadify. v2.1.4.min. js" type = "text/JavaScript"> </SCRIPT>

Here, the path is changed to your own path. Uploaddiy is developed with jquery, so we need to apply jquery before using uploaddiy. So pay attention to the order of order when applying Js.

 

Followed by the core HTML code

 <Tr>
<  Th  Scope  = "Row"  > Image: </  Th  >  < TD  >  <  Div  Style  = "Float: Left; width: 125px; Height: 35px ;"  >  <  Input  Type  = "File"  Name  = "Uploadify"  ID  = "Uploadify"   /> <% -- Progress bar during upload -- %>    </  Div  >     <  Div  ID  = "Filequeue"  Style  = "Float: Left; Height: 35px ;"  > </  Div  >     <  Div  Style  = "Float: Left; Height: 35px ;"  >   <  A  Href  = "Javascript: $ ('# uploadify'). uploadifyupload ()"  Class  = "BTN-Hangzhou"  > <  Span  > Upload </  Span  > </  A  >        <  A Href  = "Javascript: $ ('# uploadify'). uploadifyclearqueue ()"  Class  = "BTN-Hangzhou"  > <  Span  > Cancel upload </  Span  > </  A  >     </  Div  >  </ TD  >  </  Tr  >  <  Tr  >       <  Th  Scope  = "Row"  >  & Nbsp;  </  Th  >      <  TD  > <  ASP: Image  ID  = "Pic"  Runat  = "Server"   /> </  TD  > <% -- The image preview function is successfully uploaded and generated -- %>  </  Tr  > 

Written in the form table

Then, we start to complete the interface code for the control to be completed as follows:

// Customize the uploadify plug-in $ (document ). ready (function () {$ ("# uploadify "). uploadify ({'upload ':'.. /plugin/uploadify.swf ', 'script': 'uploadimg. ashx ', 'cancelim ':'.. /plugin/cancel.png ', 'folder ':'.. /upload ', 'buttontext': 'select PIC', 'fileext ':'*. JPG ;*. GIF ,*. PNG ', // The format of the file to be uploaded is *. JPG ,*. GIF ,*. PNG 'filedesc': 'web image files (. JPG ,. GIF ,. PNG) ', // filter out *. JPG ,*. GIF ,*. PNG file 'queueid': 'filequeue ', 'sizelimmit': '000000', // The maximum file size allowed is 2 MB 'auto': false, // you need to manually submit the application 'multi': false, // only one image 'oncancel': funcancel can be uploaded at a time, // 'oncomplete': funcomplete when the user cancels the upload, // complete the upload task 'onerror': funerror // when an upload error occurs}) ;}); // The user cancels function funcancel (event, ID, fileobj, data) {jbox. tip ('You canceled' + fileobj. name + 'operation', 'info'); return;} // function funcomplete (event, ID, fileobj, response, data) of the Image Upload event) {// $ ("# pic" ).html ('<  IMG  ID  = "Pic"  Runat  = "Server"  SRC  = ../Upload /'  + Response + '.jpg Style  = "Width: 300; Height: 200px ;"  /> '); If (response = 0) {jbox. tip ('image' + fileobj. name + 'Operation failed', 'info'); Return ;}$ ("# pic "). ATTR ("src ",".. /upload/"+ response ). the height (200 ). width (300); jbox. tip ('image' + fileobj. name + 'Operation succeeded ', 'info'); return;} // when an upload error occurs. Function funerror (event, ID, fileobj, errorobj) {jbox. Tip (errorobj.info); return ;} 

Next we will complete the general processing time of the file, the Code is as follows:

Context. response. contenttype = "  Text/plain  "  ; Context. response. charset = "  UTF-8  "  ; Httppostedfile File = Context. Request. Files [ "  Filedata  "  ];  String Uploadpath = httpcontext. Current. server. mappath (@ context. request [ "  Folder  " ]) + "  \\  "  ;  If (File! = Null ){  //  If (file. exists (uploadpath + file. filename ))  //  {  //  Context. response. Write ("3 ");  //  File already exists  //  Return;  //  }              String [] Fn = file. filename. Split ('  .  '  );  String EXT = FN [FN. Length- 1  ];  String Filename = datetime. Now. tostring ( "  Yyyymmddhhmmss  " ) + "  .  " + EXT; If (! Directory. exists (uploadpath) {directory. createdirectory (uploadpath);} file. saveas (uploadpath + Filename );  //  If the following code is missing, the display of the upload queue will not disappear automatically after the upload is successful. Context. session [context. session [ "  Username  " ]. Tostring ()] = Filename; context. response. Write (filename );}  Else {Context. response. Write (  "  0  "  );} 

The name of the file returned after successful upload. If the file fails to be uploaded, a value of 0 is returned. js does not chase the returned value. If it is 0, it indicates failure. If it is not 0, it dynamically loads SRC to IMG.

I will sort out the core code for you to download later. Please pay attention to this post.

Click here