Multiple attachment uploads with ASP. uploadify

1. Description

Uploadify is an excellent jquery plugin, the main function is to upload files in bulk. Most students are difficult to upload multiple attachments, will be ASP. Uploadfiy How to implement bulk upload attachments to everyone to explain, there is nothing wrong place also please a lot of communication, the following code paste out everyone together to communicate.

2. Composition

Let's start by explaining the techniques used to implement the Code for reference only:

Development tools: VS2010

Target framework:. NET Framework3.5

uploadify:uploadify-v3.1

Jquery:jquery-1.8.1.js

Finally I will upload the entire demo, if the students have a development environment on their computer can directly open the project solution to run.

3. Code

Default.aspx (Test page)

<%@ page language= "C #" autoeventwireup= "true" codebehind= "Default.aspx.cs" inherits= "Fileupload._default"%> <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd    ">
Uploadify.ashx (General handler)
<%@ WebHandler language= "C #" class= "Uploadifyupload"%>using system;using system.collections;using System.Data; Using system.web;using system.web.services;using system.web.services.protocols;using System.Web.SessionState;using System.io;using system.collections.generic;using system.web.ui.webcontrols;using System.Text;public class Uploadifyupload:ihttphandler, irequiressessionstate{public void ProcessRequest (HttpContext context) {cont Ext.        Response.ContentType = "Text/plain"; Context.        Response.Charset = "Utf-8"; String action = context.        Request["Action"];                Switch (action) {case "upload"://Upload attachment upload (context);        Break } context.    Response.End (); }///<summary>//Upload attachments//</summary>//<param name= "context" ></param> private void upload (HttpContext context) {Httppostedfile PostedFile = context. request.files["Filedata"];        if (postedFile! = null) {string fileName, fileextension;            int fileSize;            FileName = Postedfile.filename;            FileSize = Postedfile.contentlength; if (FileName = "") {fileextension = postedFile.FileName.Substring (PostedFile.FileName.LastInde                XOf ('. ')); String path =context. Server.MapPath ("/") + "\\App_Attachments\\";//Set the path of the file string fileUrl = path + DateTime.Now.ToString ("YYYYMMD Dhhmmss ") + fileextension;//Save file path if (!                Directory.Exists (Path)) {directory.createdirectory (path); } postedfile.saveas (FILEURL);//First Save the source file context. Response.Write ("Upload successful!            "); } else {context. Response.Write ("Upload failed!            "); }} else {context. Response.Write ("Upload failed!        ");        }} public bool IsReusable {get {    return false; }    }}
　　
4. Supplement
To give you some explanation of the uploadfiy parameters, the use of the method is in the Default.aspx test page ("#file_upload"). Uploadify ({}); method configuration, regardless of parameter or event configuration to end with a comma in the English state , the last one does not need a comma to end. similar to
The detailed parameters are as follows:
Required parameter ID: $this. attr (' id '),//IDSWF of DOM object: ' scripts/jquery-uploadify/uploadify.swf ',//uploadify.swf file path uploader : ' App_handler/uploadify.ashx ',//Background handler relative path Auto:false,//set to True when file is selected and uploaded directly, false need to click upload button to upload, here to execute Doupload () Method Buttonclass: ',//button style Buttoncursor: ' Hand ',///mouse pointer on the button to look like Buttonimage:null,//browse button for the path of the picture buttontext: ' Select File ',//Browse by Button text Checkexisting:false,//File upload repeat Check program, check whether the file to be uploaded on the server side already exists, there is return 1, there is no return 0debug:false,// If set to True, SWFUpload debug mode is enabled Fileobjname: ' Filedata ',//File upload object name, if named ' The_files ', PHP program can be used $_files[' the_files ' To process the uploaded file object filesizelimit: ' 5MB ', the size limit of the upload file, if the integer type is the size in kilobytes, if it is a string, you can use (B, KB, MB, or GB) units, such as ' 2MB ' If set to 0, it means unrestricted Filetypedesc: ' Supported formats: ',//This property value must be set filetypeexts property before it is valid to set the prompt text in the Select File dialog box, such as setting Filetypedesc to "please select RAR doc PDF file "filetypeexts: ' * * ',//Set the type of file that can be selected, format such as: ' *.doc;*.pdf;*.rar ' height:24,//Set the height of the browse button, default value Itemtemplate:false,//With To set up an HTML template for an upload queue, you can use the following tags: id of the instanceid–uploadify instance fileid– the ID of this file in the queue, or the name of the filename– file that understands the ID of this task.size– the size of the current upload file is inserted into the template label when you use the format such as: ${filename}method: ' post ',//Submit mode post or getmulti:true,//set to True when multiple files can be uploaded formdata: {' acti On ': ' Upload '},//Anjson format uploads each file with additional data submitted to the server at the same time, you can use the ' settings ' method in the ' Onuploadstart ' event to dynamically set Preventcaching:true,// If true, automatically adds a string of random string parameters each time the file is uploaded, preventing the URL cache from affecting the upload result progressdata: ' percentage ',//Set the upload progress display mode, percentage display the upload percentage, Speed display upload Listid:false,//Set the Attachment list container DOM element's Idqueueid:false,//Set the ID of the upload queue container dom element, or false to automatically generate a queue container queuesizelimit: 999,//queue maximum number of tasks displayed, if the number of files selected exceeds this limit, the Onselecterror event will be started. Note This is not the maximum number of file uploads, if you want to limit the maximum number of uploaded files, you should set Uploadlimitremovecompleted:false,//whether the completed tasks are automatically removed from the queue, If set to Ture, Removetimeout:3 is removed from the queue,//if it is automatically removed from the queue after the task is set, you can specify requeueerrors:false from completion to the removed interval,//If set to True, Then a single task upload failure will return an error, and rejoin the task queue to upload successtimeout:30,//File upload successful after the server should return a success flag, this setting returns the result of the time-out uploadlimit:0,//maximum number of uploaded files, If this limit is reached or exceeded it will trigger the Onuploaderror event width:75,//Set event for the width setting of the file browse button: Ondialogclose:function (swfuploadifyqueue) {// Trigger if (swfuploadifyqueue.fileserrored > 0) {alert (' when added to queue ' +s when File selection dialog is closed)wfuploadifyqueue.fileserrored + ' file error n ' + ' error message: ' +swfuploadifyqueue.errormsg + ' n selected number of files: ' + swfuploadifyqueue.filesselected + ' n Number of files successfully added to queue: ' +swfuploadifyqueue.filesqueued + ' n Total number of files in queue: ' +　　Swfuploadifyqueue.queuelength); }}ondialogopen:function () {///When the Select File dialog box is open, alert (' open! ') is triggered,} onselect:function (file) {//} triggers alert when each file is added to the queue (' ID: ' + file.id + '-index: ' + file.index + '-file name: ' + file.name + '-File size: ' + file.size + '-type: ' + file.type + '-gen Build Date: ' + file.creationdate + '-Date Modified: ' + file.modificationdate + '-File status: ' + File.filestatus ';} Onselecterror:function (file,errorcode,errormsg) {//Trigger alert (' ID: ' + file.id + '-index: ' + File.index + ') when File selection error occurs  -FileName: ' + file.name + '-File size: ' + file.size + '-type: ' + File.type + '-Date Created: ' + file.creationdate + '-Date Modified: ' + file.modificationdate + '-File status: ' + file.filestatus + '-Error code: ' + errorCode + '-error message: ' + errormsg ';} Onqueuecomplete:function (stats) {////When all files in the queue are fully uploaded, alert (' IntoNumber of files uploaded: ' + stats.successful_uploads + '-Number of files uploaded: ' + stats.upload_errors + '-Number of files cancelled: ' + stats.upload_cancelled + '-Number of files in error ' + stats.queue_errors);} Onuploadcomplete:function (File,swfuploadifyqueue) {///queue triggers an alert once each file upload is complete (' ID: ' + file.id + '-index: ' + File.inde x + '-filename: ' + file.name + '-File size: ' + file.size + '-type: ' + File.type + '-Date Created: ' + file.creationdate + '- Date Modified: ' + file.modificationdate + '-File status: ' + File.filestatus + '-Number of files in error: ' + swfuploadifyqueue.fileserrored + '- Error message: ' + swfuploadifyqueue.errormsg + '-the number to be added to the queue: ' + swfuploadifyqueue.filesselected + '-added to the opposing number: ' + Swfuploadi fyqueue.filesqueued + '-Queue Length: ' + swfuploadifyqueue.queuelength);} Onuploaderror:function (File,errorcode,errormsg,errorstring,swfuploadifyqueue) {//Upload file error is triggered (once per error file triggered) alert (' ID  : ' + file.id + '-index: ' + file.index + '-filename: ' + file.name + '-File size: ' + file.size + '-type: ' + File.type + ' -Date Created: ' + file.creationdate + '-Date Modified: ' + file.modificationdate + '-File status: ' + file.filestatus + '-Error code: ' + errorCode + '-Error description: ' + errormsg + '-Jane To error description: ' + errorstring + '-Number of files in error: ' + swfuploadifyqueue.fileserrored + '-error message: ' + swfuploadifyqueue.errormsg + ' -Number of additions to the queue: ' + swfuploadifyqueue.filesselected + '-added to the opposing number: ' + swfuploadifyqueue.filesqueued + '-Queue Length: ' + swfup Loadifyqueue.queuelength);} Onuploadprogress:function (file,filebytesloaded,filetotalbytes,queuebytesloaded,swfuploadifyqueueuploadsize) {// Trigger Alert when upload progress is changed (' ID: ' + file.id + '-index: ' + file.index + '-filename: ' + file.name + '-File size: ' + file.size + '-Class Type: ' + File.type + '-Date Created: ' + file.creationdate + '-Date Modified: ' + file.modificationdate + '-File status: ' + File.filestatu S + '-current file uploaded: ' + filebytesloaded + '-Current file size: ' + filetotalbytes + '-Queue uploaded: ' + queuebytesloaded + '-Queue size: ' + swfuploadifyqueueuploadsize);} Onuploadstart:function (file) {//upload triggered at start (each file fires once) alert (' ID: ' + file.id + '-index: ' + filE.index + '-file name: ' + file.name + '-File size: ' + file.size + '-type: ' + File.type + '-Date Created: ' + file.creationdate + '-Modified Date: ' + file.modificationdate + '-File status: ' + File.filestatus ';} Onuploadsuccess:function (file,data,response) {//upload is triggered (each file fires once) alert (' ID: ' + file.id + '-index: ' + File.index +  '-File name: ' + file.name + '-File size: ' + file.size + '-type: ' + File.type + '-Date Created: ' + file.creationdate + '-Date Modified:  ' + file.modificationdate + '-File status: ' + File.filestatus + '-server-side message: ' + data + '-whether the upload was successful: ' + Response ';}
　　
5, the last demo
FileUpload
Multiple attachment uploads with ASP. uploadify