Use the JQuery upload plug-in Uploadify to upload multiple files without refreshing progress bars

Source: Internet
Author: User
Tags jquery file upload visual studio 2010

Uploadify is a very good jQuery File Upload plug-in. It can be used to upload non-Refresh multiple files and display progress based on Flash and Ajax technologies. I am using Firefox 4.0.1 and IE 9.0.8112 browsers with good compatibility. The license is MIT, which is open-source for free and can be freely used for commercial purposes.

 

Uploadify's latest stable version is 2.1.4, and the latest test version is 3.0-Beta.

 

Using the Uploadify plug-in is very simple. The compressed file downloaded from the official website contains an example of PHP call. The following is an example of ASP. Net call.

 

We use Visual Studio 2008/2010 or MonoDevelop 2.4/2.6 as an example to create this example.

 

Steps:

 

1. Create a Web Application, decompress the Uploadify package downloaded from the official website, and include it in the current Project. In this example, js/jquery. uploadify-v2.1.4 is the directory where Uploadify is located;

 

2. Create a new Web Handler with CodeBehind in the Project. In this example, we name it UploadHandler. ashx;

 

3. Create a folder named UploadFile under the Web directory as the file upload directory.

 

For the Project created in MonoDevelop 2.6 Beta 1:

 

 

For the Project created in Visual Studio 2010:

 

 

4. Edit Default. aspx:

 

<% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "Default. aspx. cs" Inherits = "UploadifyDemo. Default" %> <br/> <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <title> Uploadify Demo </title> <br/> <link href = "js/jquery. uploadify-v2.1.4/uploadify.css "mce_href =" js/jquery. uploadify-v2.1.4/uploadify.css "rel =" stylesheet "type =" text/css "/> <br/> <mce: script type =" text/plain cr Ipt "src =" js/jquery. uploadify-v2.1.4/jquery-1.4.2.min.js "mce_src =" js/jquery. uploadify-v2.1.4/jquery-1.4.2.min.js & gt; </mce: script & gt; <br/> <mce: script type = "text/javascript" src = "js/jquery. uploadify-v2.1.4/swfobject. js "mce_src =" js/jquery. uploadify-v2.1.4/swfobject. js "> </mce: script> <br/> <mce: script type =" text/javascript "src =" js/jquery. uploadify-v2.1.4/jquery. uploadify. v2.1.4.min. js "mce_src =" js/jqu Ery. uploadify-v2.1.4/jquery. uploadify. v2.1.4.min. js "> </mce: script> <br/> <mce: script type =" text/javascript "> <! -- <Br/> $ (document ). ready (function () {<br/> $ ("# uploadify "). uploadify ({<br/> 'upload': 'js/jquery. uploadify-v2.1.4/uploadify.swf ', <br/> 'script': 'uploadhandler. ashx', <br/> 'canonicalim': 'js/jquery. uploadify-v2.1.4/cancel.png ', <br/> 'folder': 'uploadfile/<% = System. guid. newGuid (). toString () %> ', <br/> 'queue id': 'filequeue', <br/> 'auto': false, <br/> 'multi ': true <br/>}); </p> <p> // --> </mce: script> <br/> </pead> <br/> <body> <br/> <div id = "fileQueue"> </div> <br/> <input type = "file" name = "uploadify" id = "uploadify"/> <br/> <p> <br/> <a href = "javascript: $ ('# uploadify '). uploadifyUpload () "mce_href =" javascript: $ ('# uploadify '). uploadifyUpload () "> Upload </a> | <br/> <a href =" javascript: $ ('# uploadify '). uploadifyClearQueue () "mce_href =" javascript: $ ('# uploadify '). uploadifyClearQueue () "> Cancel </a> <br/> </p> <br/> </body> <br/> </ptml> <br/>

 

Note: Some Characters in the above Code are escaped by the CSDN website program.

 

For the configuration of uploadify in the above file, please refer to the Documents on the official website of uploadify.

Currently, the blog system of CSDN does not allow external links. I will not provide a website address. Please forgive me.

 

5. Edit UploadHandler. ashx. cs:

 

Namespace uploadifydemo <br/>{< br/> using system. io; <br/> using system. web; </P> <p> public class uploadhandler: system. web. ihttphandler <br/>{< br/> Public Virtual bool isreusable {<br/> get {<br/> return false; <br/>}< br/> Public Virtual void processrequest (httpcontext context) <br/>{< br/> context. response. contenttype = "text/plain"; <br/> context. response. charset = "UTF-8"; <br/> Httppostedfile file = context. request. files ["filedata"]; <br/> string uploadpath = httpcontext. current. server. mappath (@ context. request ["folder"]); <br/> If (file! = NULL) <br/>{< br/> If (! Directory. exists (uploadpath) <br/>{< br/> directory. createdirectory (uploadpath); <br/>}< br/> file. saveas (path. combine (uploadpath, file. filename); <br/> context. response. write ("1"); <br/>}< br/> else <br/>{< br/> context. response. write ("0"); <br/>}< br/>

 

Next, we can test it. If an error occurs, it is usually caused by permission settings. I passed the test in Debian Linux 6.0 + Apache 2.2.17 + mod_Mono 2.10. In the UploadFile folder, the permission I set is 700:

 

 

 

Download source code and engineering files:

  • Mono: http://download.csdn.net/source/3268528
  • VS2010: http://download.csdn.net/source/3268532

 

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.