File Upload without refreshing

Last Update:2013-11-18 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

<! 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>
<Title> AjaxUpload file refreshing </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Script type = "text/javascript" src = "scripts/jquery. js"> </script>
<Script type = "text/javascript" src = "scripts/interface. js"> </script>
<Style type = "text/css" media = "all">
*{
Margin: 0;
Padding: 0;
}

Img {border: none ;}

Ul {
List-style-type: none;
}

Ul li {
Padding: 2px 4px;
}

Body {
Font-family:,, verdana, Arial;
Font-size: 12px;
Color: #333;
Background: # DDDDDD;
Margin: 30px;
Padding: 0;
}

. Box {
Border: 1px solid # CCC;
Background: # FFF;
Padding: 8px;
Margin: 5px;
Clear: both;
}

. Title {
Background: # F0F0F0; padding: 5px;
Font-weight: bold;
}

. Tooltip {
Background: # F0F0F0;
Border-color: # bbb;
}

. Tooltip h1 {
Color: # A8DF00;
Font-family:,, verdana, Arial;
}

. Titlebutton {
Float: right;
}

. Uploading {
Background: # FFF;
Color: #444;
Text-align: left;
Width: 500px;
Padding: 4px;
}

. Image {
Border: 1px solid # ddd;
Margin: 2px;
Padding: 1px;
Display: inline;
Width: 300px;
}

. Uploadcontrol {
Margin: 4px 0;
Border-bottom: 1px solid # F0F0F0;
}
</Style>
<Script type = "text/javascript">

$ (Document). ready (function (){
For (var I = 0; I <5; I ++)
{
Uploadcreate ($ ("# uploadbox"), I );
}
});

Var hideDiv = function (idName ){
$ ("#" + IdName). fadeOut ("fast ");
};

// Whether the uploaded image is displayed
Var isshowpic = true;
Var uploadshowpic = function (el ){
Isshowpic =! (Isshowpic );
If (isshowpic)
{
El.html ("Disable image display ");
}
Else
{
El.html ("enable image display ");
}
};

// Load the GIF Animation
Var loadingUrl = "images/ajax-loader.gif ";

// Select the file event, which is called in iframe
Var uploading = function (imgsrc, itemid ){
Var el = $ ("# uploading" + itemid );
$ ("# IfUpload" + itemid). fadeOut ("fast ");
El. fadeIn ("fast ");
El.html (" Uploading ...");
Return el;
};

// Re-upload Method
Var uploadinit = function (itemid ){
CurrentItemID ++;
$ ("# Uploading" + itemid). fadeOut ("fast", function (){
$ ("# IfUpload" + itemid). fadeIn ("fast ");
$ ("# PanelViewPic" + itemid). fadeOut ("fast ");
});

};

// When a program error occurs during upload, a prompt is displayed and the upload status is returned.
Var uploaderror = function (itemid ){
Alert ("program exception," + itemid + "failed to upload. ");
Uploadinit ();
};

// Process uploaded successfully
Var uploadsuccess = function (newpath, itemid ){
$ ("# Uploading" Upload itemid).html ("File Uploaded successfully. <a href = 'javascript: void (0); 'onclick = 'uploadinit ("+ itemid +"); '> [re-upload] </a> ");
If (isshowpic)
{
$ ("# PanelViewPic" shortitemid).html ("<a href = '" + newpath + "'title =' click to view the larger image 'target = '_ blank'> </a> ");
$ ("# PanelViewPic" + itemid). fadeIn ("fast ");
}
};

Var currentItemID = 0; // used to store the total number of upload controls
// Create an upload Control
Var uploadcreate = function (el, itemid ){
CurrentItemID ++;
If (itemid = null)
{
Itemid = currentItemID;
}
Var strContent = "<div class = 'uploadcontrol'> <iframe src = \" upload. aspx? Id = "+ itemid +" \ "id = \" ifUpload "+ itemid +" \ "frameborder = \" no \ "scrolling = \" no \ "style = \" width: 400px; height: 28px; \ "> </iframe> ";
StrContent + = "<div class = \" uploading \ "id = \" uploading "+ itemid +" \ "style = \" display: none; \ "> </div> ";
StrContent + = "<div class = \" image \ "id = \" panelViewPic "+ itemid +" \ "style = \" display: none; \ "> </div> ";
El. append (strContent );
};

</Script>

</Head>

<Body>

<Div id = "tipbox" class = "box tooltip">
<A href = "#" onclick = "hideDiv ('tidbox');"> [disable] </a>
<Div class = "content">
<H1> AjaxUpload-upload source code v1.0 without refreshing multiple files <P> author: li huashun <a href = "http://huacn.cnblogs.com" target = "_ blank"> http://huacn.cnblogs.com </a> <a href = "http://www.51aspx.com" target = "_ blank"> download from 51aspx.com </ a>
</P>
</Div>
</Div>
<Div id = "toolbox" class = "tooltip box">
<A href = "#" onclick = "uploadcreate ($ ('# uploadbox ')); "> Add a new upload Control </a> <a href =" # "onclick =" uploadshowpic ($ (this); "> disable Image Display </a>
</Div>
<Div id = "uploadbox" class = "box">

</Div>

</Body>

</Html>
The last upload. aspx file will not be written.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

File Upload without refreshing

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support