Recently, I encountered some upload functional modules in my project. I found a lot of upload-related information on the Internet and found a Jquery dependent on jquery. uploadify class library. The upload function of this Class Library supports a wide range of functions, but unfortunately it relies on flash to process uploads. Therefore, the traditional upload control browsing method cannot be displayed on the page, because the project needs to appear on the page in the traditional <input type = 'file'/> Format! So I had to remove the powerful functions of the jquery. uploadify class library, so I had to study it myself. Finally, a static upload function is implemented! Okay, let's talk about the code! If you have better suggestions, please click here! Thank you!
First, my background program uses ASP. NET.
Javascript uses the Jquery class library
Here, we will introduce why this upload method is called pseudo Ajax, because this upload will not refresh the current page, and it will not use any Ajax technology, however, the upload Effect of page refreshing is achieved, so the younger brother is called the pseudo Ajax method. Oh, it's been a long time since I sold it! Let's introduce this core! The core is to use <form> and <iframe>! I believe that those who have a deep understanding of Web Html must have guessed it!
Html code:
<! 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> File Upload </title>
</Head>
<Body>
<! --
Have you noticed the target of this form? The value of this target attribute frameFile is the name value of iframe after form,
In this way, the current form is transferred to the iframe for form processing on the page when the form content is submitted,
The current page does not jump!
-->
<Form id = 'formfile' name = 'formfile' method = "post" action = '/uploads. aspx' target = 'framefile' enctype = "multipart/form-data">
<Input type = 'file' id = 'fileup' name = 'fileup'/>
<Div id = 'uploadlog'> </div>
<Br/>
</Form>
<! --
After the iframe obtains the post form data, it will start to access the post page address within itself, and it will refresh the page internally,
But this is no longer important, because the current iframe has been hidden by my display: none! So it looks like a refreshing
Uploading page files is actually just a small trick!
-->
<Iframe id = 'framefile' name = 'framefile' style = 'display: none; '> </iframe>
</Body>
</Html>
JavaScript Code:
<Script type = "text/javascript" language = "javascript">
$ (Function (){
$ ('# Fileup'). change (function (){
Upload ('upload uploadlog'0000.html ('start Uploading ....');
$ ('# FormFile'). submit ();
});
})
Function uploadSuccess (msg ){
If (msg. split ('|'). length> 1 ){
$ ('# ImgShow'). attr ('src', msg. split ('|') [1]);
('Uploadlog'{.html (msg. split ('|') [0]);
} Else {
Upload ('uploadlog'apps.html (msg );
}
}
</Script>
Asp. Net Code:
/// <Summary>
/// Page loading. Here I simply wrote the processing Code for file upload.
/// </Summary>
/// <Param name = "sender"> </param>
/// <Param name = "e"> </param>
Protected void Page_Load (object sender, EventArgs e)
{
Try
{
// Get the file set object from the current Post. Here I only get the file control of <input type = 'file' name = 'fileup'/>.
HttpPostedFile file = Request. Files ["fileUp"];
If (file! = Null)
{
// Directory to which the current file is uploaded
String path = Server. MapPath ("~ /Test /");
// The path of the server to be uploaded
String imageUrl = path + Path. GetFileName (file. FileName );
// Suffix of the current file
String ext = Path. GetExtension (file. FileName). ToLower ();
// Verify that the file type is correct
If (! Ext. Equals (". gif ")&&! Ext. Equals (". jpg ")&&! Ext. Equals (". png ")&&! Ext. Equals (". bmp "))
{
// Here window. parent. uploadSuccess () is the javascript function written on the front-end page. This method is mainly used to output exceptions and the image address after the upload is successful.
Response. Write ("<script> window. parent. uploadSuccess ('the file you uploaded is incorrectly formatted! The upload format is (.gif、.jpg?.png=.bmp) '); </script> ");
Response. End ();
}
// Verify the file size
If (file. ContentLength> 1048576)
{
// Here window. parent. uploadSuccess () is the javascript function written on the front-end page. This method is mainly used to output exceptions and the image address after the upload is successful.
Response. Write ("<script> window. parent. uploadSuccess ('the file you uploaded cannot exceed 1048576KB! Upload again! '); </Script> ");
Response. End ();
}
// Start upload
File. SaveAs (imageUrl );
// Here window. parent. uploadSuccess () is the javascript function written on the front-end page. This method is mainly used to output exceptions and the image address after the upload is successful.
// If the data returned successfully requires two strings to be returned, I have used | separator example: Success information |/Test/hello.jpg
Response. Write ("<script> window. parent. uploadSuccess ('upload Success! |/Test/"+ file. FileName +" '); </script> ");
Response. End ();
}
Else
{
// Upload Failed
Response. Write ("upload lose! ");
Response. End ();
}
}
Catch {
// Upload Failed
Response. Write ("upload lose! ");
Response. End ();
}
}
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
