Yesterday I published an article about uploading and displaying images. I click the "Upload" button to upload and display images. This is not interactive, so I have studied how to automatically upload and display images, in fact, it is not very complex, that is, using JS, as follows:
The following is the main Code. The Code for uploading images and displaying images is those of yesterday. For details, refer to uploading and displaying images:
1. interface code
Uploadpic. aspx<% @ Page Language = "C #" autoeventwireup = "true" codebehind = "uploadpic. aspx. cs" inherits = "pic_try.uploadpic" %> <! 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">
2. Background code
Uploadpic. aspx. CSUsing system; using system. collections. generic; using system. LINQ; using system. web; using system. web. ui; using system. web. UI. webcontrols; using system. io; using system. security. cryptography; using system. web. security; namespace pic_try {public partial class uploadpic: system. web. UI. page {protected void page_load (Object sender, eventargs e) {}/// <summary> // control event /// </Summary> protected void lbupload Photo_click (Object sender, eventargs e) {Boolean fileok = false; If (pic_upload.hasfile) // verify whether the file contains the file {// obtain the file extension, and convert it to lowercase string fileextension = path. getextension (pic_upload.filename ). tolower (); // verify whether the image format of the uploaded file is fileok = isimage (fileextension); If (fileok) {// check the size of the uploaded file, the limit file cannot exceed 8 Mb if (pic_upload.postedfile.contentlength <8192000) {string filepath = "/images/"; if (directory. exists (server. mappath (Filepath) = false) // create a file folder {directory if it does not exist. createdirectory (server. mappath (filepath);} string virpath = filepath + createpasswordhash (pic_upload.filename, 4) + fileextension; // This is the virtual path stored on the server string mappath = server. mappath (virpath); // converts it to the physical path pic_upload.postedfile.saveas (mappath) on the server; // saves the image // displays the image pic. imageurl = virpath; // The lbl_pic.text = "";} else {pic. imageurl = ""; lbl_pic.text = "The file size exceeds 8 Mb! Please select again! ";}} Else {pic. imageurl =" "; lbl_pic.text =" the type of the file to be uploaded is incorrect! Please select again! ";}} Else {pic. imageurl =" "; lbl_pic.text =" select the image to upload! ";}} /// <Summary> /// verify whether the specified image format is used. /// </Summary> /// <Param name = "str"> </param> /// <returns> </returns> Public bool isimage (string Str) {bool isimage = false; string thestr = Str. tolower (); // only jpg and GIF image string [] allowextension = {". jpg ",". GIF ",". BMP ",". PNG "}; // perform a pair of for (INT I = 0; I <allowextension. length; I ++) {If (thestr = allowextension [I]) {isimage = true; break ;}} return isimage ;} /// <summary> /// create a random salt value of the specified length /// </Summary> Public String createsalt (INT saltlenght) {// generate an encrypted random number rngcryptoserviceprovider RNG = new rngcryptoserviceprovider (); byte [] buff = new byte [saltlenght]; RNG. getbytes (buff); // returns the return convert string of a base64 random number. tobase64string (buff);} // <summary> // return the encrypted string /// </Summary> Public String createpasswordhash (string PWD, int saltlenght) {string strsalt = createsalt (saltlenght); // connect the password to salt string saltandpwd = string. concat (PWD, strsalt); // hash the password string hashenpwd = formsauthentication. hashpasswordforstoringinconfigfile (saltandpwd, "sha1"); // convert it to lowercase characters and extract the first 16 strings hashenpwd = hashenpwd. tolower (). substring (0, 16); // return the hash value return hashenpwd ;}}}
3.css code
Uploadpic.css.pic_text { color: Red; }.pic_label { color: Gray; margin-top: 5px; margin-bottom: 5px; }.pic_image { height: 200px; margin: 5px; width: 200px; }.picshow { width: 200px; height: 200px; }#pic_upload { background-color: #000000; height: 25px; left: 0; margin: 2px; opacity: 0; top: 0; width: 100px; }.file_div { border: 1px solid #CCCCCC; height: 25px; line-height: 25px; text-align: center; width: 125px; }.file_div > span { left: 40px; position: absolute; z-index: -1; }
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
