Http://www.cnblogs.com/keke/archive/2011/05/09/2041370.html
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, not much nonsense,CodeOffer! If you have better suggestions, please click here! Thank you!
First, my backgroundProgramASP. 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!
Front-end:
<! 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">Background:
<SCRIPT type = "text/JavaScript" Language = "JavaScript"> $ (function () {$ ('# fileup '). change (function () {parameters ('{uploadlog'}.html ('starts Uploading .... '); $ (' # formfile '). submit () ;}) function uploadsuccess (MSG) {If (MSG. split ('| '). length> 1) {$ ('# imgshow '). ATTR ('src', MSG. split ('|') [1]); condition ('{uploadlog'{.html (MSG. split ('|') [0]);} else {response ('{uploadlog'{.html (MSG) ;}</script >/// <summary> // page loading. here I simply wrote File Upload processing code /// </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 obtain the <input type = 'file' name = 'fileup'/> file control httppostedfile file = request. files ["fileup"]; If (file! = NULL) {// The Directory uploaded to the current file string Path = server. mappath ("~ /Test/"); // the path of the server to be uploaded: String imageurl = path + path. getfilename (file. filename); // The 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 ") {// window. parent. uploadsuccess () is a JavaScript function written on the front-end page. This method is mainly used to output exceptions and response of the image address after successful upload. write ("<SCRIPT> window. parent. uploadsuccess ('the file format you uploaded is incorrect! The upload format is (.gif、.jpg?.png=.bmp) '); </SCRIPT> "); response. end () ;}// verify the file size if (file. contentlength> 1048576) {// here window. parent. uploadsuccess () is a JavaScript function written on the front-end page. This method is mainly used to output exceptions and response of the image address after successful upload. write ("<SCRIPT> window. parent. uploadsuccess ('the file you uploaded cannot be larger than 1048576kb! Upload again! '); </SCRIPT> "); response. end ();} // starts to upload file. saveas (imageurl); // here window. parent. uploadsuccess () is a 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 returned data is successful, two strings need to be returned, here I 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
