Home > Developer > JavaScript
Later, a friend recommended this upload plug-in called uploadify. It seems quite good. I went to the official website to run the example. It felt quite good. I just needed to beautify it a bit and then I was OK ..!
Next, let's talk about the usage process:
1. Download
Http://www.uploadify.com/
Download: jquery.uploadify-v2.1.0.rar
My Demo: the official MyUpload.rar website also has a demo
Download and unzip the package:
Note: There is a demo but PHP in it. There is also a help document: uploadify v2.1.0 Manual.pdf.
2. Create a project:
Structure>
File description:
All files in the. js Folder: required. Extract and copy the files from the downloaded package. You can change the name by yourself.
B. Default. aspx: test page with no code in the background
Copy codeThe Code is as follows:
<% @ Page Language = "C #" AutoEventWireup = "true" Codebehind = "Default. aspx. cs" Inherits = "WebApplication2. _ 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> Use of jquery. uploadify upload plug-in </title>
<Link rel = "Stylesheet" href = "js/uploadify.css"/>
<Script type = "text/javascript" src = "js/jquery. min. js"> </script>
<Script type = "text/javascript" src = "js/swfobject. js"> </script>
<Script type = "text/javascript" src = "js/jquery. uploadify. min. js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Uploadify"). uploadify ({
'Upload': 'js/uploadify.swf ',
'Script': 'upload. aspx ',
'Canonicalmg ': 'js/cancel.png ',
'Folder': 'upload ',
'Queue id': 'filequeue ',
'Auto': false,
'Multi ': true,
});
});
</Script>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Input type = "file" name = "uploadify" id = "uploadify"/>
<A href = "javascript: $ ('# uploadify '). uploadifyUpload () "> upload </a> | <a href =" javascript: $ ('# uploadify '). uploadifyClearQueue () "> cancel upload </a>
<Div id = "fileQueue"> </div>
</Form>
</Body>
</Html>
C. Upload. aspx: Process uploaded files
Copy codeThe Code is as follows:
<% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "Upload. aspx. cs" Inherits = "WebApplication2.Upload" %>
Code
Copy codeThe Code is as follows:
Using System;
Using System. Data;
Using System. Configuration;
Using System. Collections;
Using System. Web;
Using System. Web. Security;
Using System. Web. UI;
Using System. Web. UI. WebControls;
Using System. Web. UI. WebControls. WebParts;
Using System. Web. UI. HtmlControls;
Using System. IO;
Namespace WebApplication2
{
Public partial class Upload: System. Web. UI. Page
{
Protected void Page_Load (object sender, EventArgs e)
{
HttpPostedFile file = Request. Files ["FileData"];
String uploadpath = Server. MapPath (Request ["folder"] + "\\");
If (file! = Null)
{
If (! Directory. Exists (uploadpath ))
{
Directory. CreateDirectory (uploadpath );
}
File. SaveAs (uploadpath + file. FileName );
Response. Write ("1 ");
}
Else
{
Response. Write ("0 ");
}
}
}
}
D. upload this file is also required
3. Running result:
4. Finally, let's talk about it. This is just a simple example. You can modify the interface as needed.
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
