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:
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
