jquery Plugin uploadify ajax-enabled picture upload _jquery

Yesterday did a day of Ajax effect of the picture upload, is to let oneself learn more refined some, so see a lot of third party control, finally chose to uploadify this control, the main reason is relatively easy to start.

First of all, we refer to other people's information (I have organized myself)

Available options

parameter type required	Parameter name	explain
(Boolean type)	Auto	Automatically upload files when they are added to the queue.
String	Buttonimg	Browse the background picture path of the button.
String	ButtonText	The text that is displayed by default on the button.
String	Cancelimg	The background picture path of the Cancel button.
String	Checkscript	The path to the background script that is used to check for files that already exist on the server. "Translator Note: It should be the Ajax way"
String	Displaydata	The type of data displayed in the queue during the upload process.
String	Expressinstall	The path to the expressinstall.swf file.
String	Filedataname	The name of the file field to process in the background script. "Translator Note: is the name value of input for type file"
String	Filedesc	The text displayed in the file type Drop-down menu at the bottom of the Browse window.
String	Fileext	Allow file suffixes to be uploaded. "Translator Note:. Jpg/.png, etc."
String	Folder	Upload the path to the folder where the file will be saved after uploading.
(Integral type)	Height	The height of the browse button.
(Boolean type)	Hidebutton	True to hide the flash button so that you can define a style for the following DIV element.
String	Method	A form method for broadcasting data to a background script.
(Boolean type)	Multi	Set to True to allow multiple file uploads.
String	Queueid	page, the ID of the element you want to use as the file queue.
(Integral type)	Queuesizelimit	The number of files allowed in the upload queue.
(Boolean type)	removecompleted	True to automatically remove items in the queue that have finished uploading.
(Boolean type)	Rollover	Set to True to activate the browse button's mouse across state.
String	Script	The path to the background script that handles file uploads.
String	Scriptaccess	Sets the script access mode in the primary SWF file.
(JSON)	Scriptdata	A JSON object that should be sent to the background script to contain the Name/value key value pair and some extra information when the file is uploaded.
(Integral type)	Simuploadlimit	The number of files allowed to be uploaded simultaneously.
(Integral type)	SizeLimit	The size limit of the uploaded file, in bytes.
String	Uploader	The path to the uploadify.swf file.
(Integral type)	Width	The width of the browse button.
String	Wmode	The wmode of the Flash file.

Event

function	Onallcomplete	triggered when all files in the upload queue are uploaded.
function	OnCancel	Triggered once every file is removed from the upload queue.
function	Oncheck	triggered when a file with the same name is detected before the upload begins.
function	Onclearqueue	triggered when the Uploadifyclearqueue () method is invoked.
function	OnComplete	Fires once every time a file is uploaded.
function	OnError	Triggered when an error is returned by the upload.
function	OnInit	Triggered when the Uploadify instance is loaded.
function	OnOpen	When a file in the upload queue starts uploading, it fires once.
function	OnProgress	triggered during the upload process.
function	Onqueuefull	triggered when the number of files reaches the upload queue limit.
function	Onselect	Triggered each time a file is added to the upload queue.
function	Onselectonce	Triggered each time a file or group of files is added to the upload queue.
function	Onswfready	triggered when Flash file loading completes.

Method

	. Uploadify ()	Create an instance of the Uploadify upload component.
	. Uploadifycancel ()	Remove a file from the upload queue. If the file is being uploaded, the method will first cancel the upload and then remove the file from the upload queue.
	. Uploadifyclearqueue ()	Remove all files from the upload queue and cancel all uploads that are being performed.
	. Uploadifysettings ()	Change the optional parameters of the Uploadify component.
	. Uploadifyupload ()	Trigger the upload.

There are some parameters to use here, but we don't need to fully grasp these parameters, and we'll see what parameters we can use before, OK.

Because time is limited, I send out the core code first, for everyone's reference:

Apply CSS style <link href= in

Then apply the JS,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>

Also here the path is changed to your own path. Uploaddiy is developed with jquery, then we have to apply jquery before we can use uploaddiy so pay attention to the priority when using JS

followed by the core HTML code

<tr>
<th scope= "Row" > Picture:</th>
<td>
<div style= "float:left;width:125px"; height:35px; " >
 <input type= "file" Name= "uploadify" id= "uploadify"/> <%--the progress bar when uploading--%>
 </div>
 <div id= "Filequeue" style= "float:left;height:35px;" ></div>
 <div style= "float:left;height:35px;" >
 <a href= "javascript:$ (' #uploadify '). Uploadifyupload ()" class= "Btn-lit" ><span> upload </span ></a>
  <a href= "javascript:$ (' #uploadify '). Uploadifyclearqueue ()" class= "Btn-lit" ><span> Cancel upload </span></a>
 </div>
</td>
</tr>
<tr>
  <th Scope= "Row" > </th>
  <td><asp:image id= "pic" runat= "server"/></td> <%-- Successful upload build picture preview function--%>
</tr>

It's written in a table on form.

Then we start to complete the interface code for the control that we need to complete as follows:

Uploadify custom settings for the plug-in $ (document). Ready (function () {$ ("#uploadify"). Uploadify ({' uploader ': ' ...) /plugin/uploadify.swf ', ' script ': ' uploadimg.ashx ', ' cancelimg ': '. /plugin/cancel.png ', ' folder ': '. /upload ', ' buttontext ': ' SELECT Pic ', ' fileext ': ' *.jpg;*.gif,*.png ',///allow uploaded file format for *.jpg,*.gif,*.png ' Filedesc ': ' Web Image Files (. Jpg. Gif. PNG) ',//filtered out except *.jpg,*.gif,*.png file ' Queueid ': ' Filequeue ', ' sizelimit ': ' 2048000 ',//maximum allowable file size of 2M ' auto ': fals E,//need manual submit application ' multi ': false,//only allow upload of one picture ' OnCancel ': funcancel,/////When user cancels upload ' oncomplete ': F
Uncomplete,//Complete upload task ' OnError ': funerror//Upload error});

});
 User cancels function Funcancel (event, ID, Fileobj, data) {Jbox.tip (' you canceled ' + fileobj.name + ' operation ', ' info ');
Return //Picture upload event function Funcomplete (events, IDs, Fileobj, response, data) {//$ ("#pic"). html ('  '); if (RESPONSE = = 0) {jbox.tip (' picture ' + fileobj.name + ' operation failed ', ' info ');
 Return $ ("#pic"). attr ("src", ".
 /upload/"+ response). Height. width (300);
 Jbox.tip (' picture ' + fileobj.name + ' operation successful ', ' info ');
Return
///Upload error occurred.
 function Funerror (event, ID, Fileobj, errorobj) {jbox.tip (errorobj.info);
Return

 }

Then we'll 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);
 The following code is missing, upload the queue after the success of the display will not automatically disappear the context
 . Session[context. session["UserName"]. ToString ()] = filename;
  
 Context. Response.Write (filename);
}
else
{context
 . Response.Write ("0");
} 

Successful upload returns the name of the file, failure to return a 0,JS return value, if it is 0 indicates failure, if not 0 dynamic to the IMG loaded src.

Source Download: Http://xiazai.jb51.net/201606/yuanma/jQuery-uploadify-ajax-upload (jb51.net). rar