Asp.net uploadify implements multiattachment upload, asp. netuploadify
This article provides an example of the asp.net uploadify multiattachment upload Method for your reference. The specific content is as follows:
1. Description
Uploadify is an excellent jQuery plug-in. Its main function is to upload files in batches. Most of the students are difficult to upload multiple attachments. Now I will explain how to upload attachments in batches by combining asp.net with uploadfiy. If anything is wrong, I would like to ask you to communicate more, below we will post the code for discussion.
2. Composition
First, describe the technologies used in code implementation for your reference only:
Development Tool: vs2010
Target framework:. NET Framework3.5
Uploadify: uploadify-v3.1
Jquery: jquery-1.8.1.js
Finally, I will upload the entire Demo. If you have a development environment on your computer, you can directly open the project solution to run it.
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 "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head runat =" server "> <title> attachment upload </title> <script src =" Scripts/jquery-1.8.1.js "type =" text/javascript "> </script> <script src = "Scripts/uploadify-v3.1/jquery. uploadify-3.1.js "type =" text/javascript "> </script> <link href =" Scripts/uploadify-v3.1/uploadify.css "rel =" stylesheet "type =" text/css "/> <script type = "text/javascript" >$ (function () {$ ("# file_upload "). uploadify ({"auto": false, "swf": "Scrip Ts/uploadify-v3.1/uploadify.swf "," uploader ":" App_Handler/Uploadify. ashx? Action = upload "," removeCompleted ": false," onUploadSuccess ": function (file, data, response) {alert ('file' + file. name + 'uploaded successfully and returned' + response + 'server status' + data );}});}); </script>
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) {context. response. contentType = "text/plain"; context. response. charset = "UTF-8"; string action = context. request ["action"]; switch (action) {case "upload": // upload the attachment upload (context); break;} context. response. end ();} /// <summary> /// upload the attachment /// </summary> /// <param name = "context"> </param> private void upload (HttpContext context) {HttpPostedFile postedFile = co Ntext. 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. lastIndexOf ('. '); string path = context. server. mapPath ("/") + "\ App_Attachments \"; // set the file path string fileUrl = path + DateTime. now. toString ("yyyyMMddHHmmss") + fileExtension; // save the file path if (! Directory. Exists (path) {Directory. CreateDirectory (path);} postedFile. SaveAs (fileUrl); // Save the source file context. Response. Write ("uploaded successfully! ");} Else {context. Response. Write (" Upload Failed! ") ;}} Else {context. Response. Write (" Upload Failed! ") ;}} Public bool IsReusable {get {return false ;}}}
4. Supplement
I will describe some uploadfiy parameters in Default. $ ("# file_upload") on the aspx test page "). uploadify ({}); Method Configuration, whether the parameter or event configuration should end with a comma in English, and the last one does not need to end with a comma. Similar
The detailed parameters are as follows:
// Required parameter id: $ this. attr ('id'), // DOM object id swf: 'scripts/jquery-uploadify/uploadify.swf ', // uploader: 'app _ Handler/Uploadify. ashx', // The relative path of the background processing program: auto: false, // set to true. When the file is selected, it is uploaded directly. If it is set to false, You need to click the upload button to upload the file, run the doUpload () method buttonClass: '', // button style buttonCursor: 'hand', // The way the mouse pointer hovers over the button buttonImage: null, // The path of the image in the Browse button buttonText: 'select file', // The text in the Browse button checkExisting: false, // File Upload repeatability check process Check whether the file to be uploaded already exists on the server. If yes, 1 is returned. If no, 0 debug: false is returned. // if it is set to true, the debug mode of SWFUpload is enabled. fileObjName: 'filedata', // name of the object to be uploaded. If it is named 'The _ files ', PHP programs can use $ _ FILES ['the _ files'] to process the uploaded file object fileSizeLimit: '5mb', // the size limit of the uploaded file, if it is an integer, it indicates the size in KB. If it is a string, you can use (B, KB, MB, or GB) as the unit, for example, '2mb '; if the value is set to 0, the value of fileTypeDesc is unlimited. 'supported format: '. // This attribute value must be set to the fileTypeExts Attribute before it is valid. It is used to set the prompt text in the select file dialog box, if fileTypeDesc is set to "select rar doc PDF file", fileTyp EExts :'*. * ', // set the type of the file to be selected. The format is as follows :'*. doc ;*. pdf ;*. rar 'height: 24, // set the height of the Browse button. The default value is itemTemplate: false. // you can use the following tags to set the HTML template for the upload queue: instanceID-Uploadify instance ID fileID-ID of the file in the queue, alternatively, you can understand the format of the ID fileName-file name fileSize-size of the currently uploaded file when inserting the template tag for this task, for example, $ {fileName} method: 'post ', // when the submission method is Post or Get multi: true, // when it is set to true, multiple files can be uploaded. formData: {'action': 'upload '}, // additional data submitted to the server when each file is uploaded in AnJSON format, which can be stored in 'onuploadsta In the rt event, use the 'settings' method to dynamically set preventCaching: true. // if it is true, a random string parameter is automatically added each time a file is uploaded, prevent the URL cache from affecting the upload result progressData: 'percentage', // set the upload progress display mode, percentage to display the upload percentage, and speed to display the upload speed listID: false, // set the ID queueID of the DOM element in the Attachment List container: false, // set the ID of the DOM element in the upload queue container. If it is false, a queue container queueSizeLimit: 999 is automatically generated, // The maximum number of tasks displayed in the queue. If the number of files selected exceeds this limit, the onSelectError event is triggered. Note that this is not the maximum number of files to be uploaded. to limit the maximum number of files to be uploaded, set uploadLimit removeCompleted: false, // whether to automatically delete completed tasks from the queue, if it is set to true, removeTimeout: 3 is removed from the queue. // if the task is set to true, it is automatically removed from the queue, you can specify the time interval from completion to removal. requeueErrors: false. // if it is set to true, an error will be returned after a single task fails to be uploaded and the task queue will be re-added to upload successTimeout: 30, // After the file is uploaded successfully, the server should return the success Mark. This setting sets the timeout value of the returned result uploadLimit: 0, // maximum number of uploaded files, if this limit is reached or exceeded, the onUploadError event width: 75 is triggered. // you can specify the width of the file browser button.
Set events:
OnDialogClose: function (swfuploadifyQueue) {// trigger if (swfuploadifyQueue. filesErrored> 0) {alert ('added to the queue '+ swfuploadifyQueue. filesErrored + 'file errors n' + 'error message: '+ swfuploadifyQueue. errorMsg + 'n' number of selected files: '+ swfuploadifyQueue. filesSelected + 'n' number of files successfully added to the queue: '+ swfuploadifyQueue. total number of files in the filesQueued + 'n' queue: '+ swfuploadifyQueue. queueLength) ;}} onDialogOpen: function () {// triggers alert ('Open! ');} OnSelect: function (file) {// when each file is added to the queue, alert ('Id:' + file. id + '-index:' + file. index + '-file Name:' + file. name + '-file size:' + file. size + '-type:' + file. type + '-creation date:' + file. creationdate + '-Modify Date:' + file. modificationdate + '-file status:' + file. filestatus);} onSelectError: function (file, errorCode, errorMsg) {// triggers alert ('Id: '+ file. id + '-index:' + file. index + '-file Name:' + file. name + '-file size:' + file. size + '-type:' + file. type + '-creation date:' + file. creationdate + '-Modify Date:' + file. modificationdate + '-file status:' + file. filestatus + '-error code:' + errorCode + '-error message:' + errorMsg);} onQueueComplete: function (stats) {// when all files in the queue are uploaded, alert is triggered ('number of successfully uploaded files: '+ stats. successful_uploads + '-number of files with upload errors:' + stats. upload_errors + '-number of files to be uploaded:' + stats. upload_cancelled + '-number of files with errors' + stats. queue_errors);} onUploadComplete: function (file, swfuploadifyQueue) {// triggers alert ('Id: '+ file. id + '-index:' + file. index + '-file Name:' + file. name + '-file size:' + file. size + '-type:' + file. type + '-creation date:' + file. creationdate + '-Modify Date:' + file. modificationdate + '-file status:' + file. filestatus + '-number of files with errors:' + swfuploadifyQueue. filesErrored + '-error message:' + swfuploadifyQueue. errorMsg + '-Number of queues to be added:' + swfuploadifyQueue. filesSelected + '-Number of pairs added:' + swfuploadifyQueue. filesQueued + '-queue length:' + swfuploadifyQueue. queueLength);} onUploadError: function (file, errorCode, errorMsg, errorString, swfuploadifyQueue) {// An error occurred while uploading a file is triggered (once for each error file) alert ('Id: '+ file. id + '-index:' + file. index + '-file Name:' + file. name + '-file size:' + file. size + '-type:' + file. type + '-creation date:' + file. creationdate + '-Modify Date:' + file. modificationdate + '-file status:' + file. filestatus + '-error code:' + errorCode + '-error Description:' + errorMsg + '-Brief error Description:' + errorString + '-number of files with errors: '+ swfuploadifyQueue. filesErrored + '-error message:' + swfuploadifyQueue. errorMsg + '-Number of queues to be added:' + swfuploadifyQueue. filesSelected + '-Number of pairs added:' + swfuploadifyQueue. filesQueued + '-queue length:' + swfuploadifyQueue. queueLength);} onUploadProgress: function (file, fileBytesLoaded, fileTotalBytes, queueBytesLoaded, bytes) {// triggers alert ('Id: '+ file when the upload progress changes. id + '-index:' + file. index + '-file Name:' + file. name + '-file size:' + file. size + '-type:' + file. type + '-creation date:' + file. creationdate + '-Modify Date:' + file. modificationdate + '-file status:' + file. filestatus + '-current File Uploaded:' + fileBytesLoaded + '-current file size:' + fileTotalBytes + '-queue uploaded:' + queueBytesLoaded + '-queue size: '+ swfuploadifyQueueUploadSize);} onUploadStart: function (file) {// triggered when the upload starts (each file is triggered once) alert ('Id:' + file. id + '-index:' + file. index + '-file Name:' + file. name + '-file size:' + file. size + '-type:' + file. type + '-creation date:' + file. creationdate + '-Modify Date:' + file. modificationdate + '-file status:' + file. filestatus);} onUploadSuccess: function (file, data, response) {// triggered when the upload is complete (once each file is triggered) alert ('Id: '+ file. id + '-index:' + file. index + '-file Name:' + file. name + '-file size:' + file. size + '-type:' + file. type + '-creation date:' + file. creationdate + '-Modify Date:' + file. modificationdate + '-file status:' + file. filestatus + '-server-side message:' + data + '-whether the upload is successful:' + response );}
5. Demo: FileUpload
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
