Recently, when I was working on a project, I needed to add a function to upload user images. Uploading user images actually involves a lot of things, it is not just an html tag <input id = "File1" type = "file"/> or a FileUpload control blocked by asp.net. Currently, the website does not focus on functionality, it is more about user experience. to upload images here, you need to use ajax to upload images without refreshing them. What is included here is not half past one. Here, we use the swfupload plug-in to achieve no refreshing upload of images. Directly upload my code for your reference.
Front-end code area:
Copy codeThe Code is as follows:
<% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "ChangeAvatar. aspx. cs" Inherits = "NovelChannel. ChangeAvatar" %>
<! 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> </title>
<Link href = "/CSS/jQueryUI/jquery-ui-1.10.2.custom.css" rel = "stylesheet" type = "text/css"/>
<Style type = "text/css">
# Draggable
{
Width: 50px;
Height: 50px;
Padding: 0.5em;
}
</Style>
<Script src = "/JS/jQuery/jquery-1.9.1.js" type = "text/javascript"> </script>
<Script src = "/JS/jQuery/jquery-ui-1.10.2.custom.js" type = "text/javascript"> </script>
<Script type = "text/javascript" src = "/JS/swf/swfupload. js"> </script>
<Script type = "text/javascript" src = "/JS/swf/handlers. js"> </script>
<Script type = "text/javascript">
Function uploadImgSuccess (file, response ){
// $ ("# ImgAvatar"). attr ("src", response + "? Ts = "+ new Date ());
// "Url (" + response + "? Ts = "+ new Date () + ")")
Var strs = $. parseJSON (response );
Var imgPath = strs [0];
Var imgWidth = strs [1];
Var imgHeight = strs [2];
$ ("# AvatarContainer" ).css ("background-image", "url (" + imgPath + ")");
$ ("# AvatarContainer" ).css ("width", imgWidth + "px" ).css ("height", imgHeight + "px ");
};
$ (Function (){
Var swfu;
Swfu = new SWFUpload ({
// Backend Settings
Upload_url: "/Ajax/UploadAvatar. ashx ",
Post_params :{
"ASPSESSID": "<% = Session. SessionID %>"
},
// File Upload Settings
File_size_limit: "2 MB ",
File_types: "*. jpg ",
File_types_description: "JPG Images ",
File_upload_limit: 0, // Zero means unlimited
// Event Handler Settings-these functions as defined in Handlers. js
// The handlers are not part of SWFUpload but are part of my website and control how
// My website reacts to the SWFUpload events.
Swfupload_preload_handler: preLoad,
Swfupload_load_failed_handler: loadFailed,
File_queue_error_handler: fileQueueError,
File_dialog_complete_handler: fileDialogComplete,
Upload_progress_handler: uploadProgress,
Upload_error_handler: uploadError,
Upload_success_handler: uploadImgSuccess,
Upload_complete_handler: uploadComplete,
// Button settings
Button_image_url: "/JS/swf/images/XPButtonNoText_160x22.png ",
Button_placeholder_id: "btnUploadImgPlaceholder ",
Button_width: 160,
Button_height: 22,
Button_text: '<span class = "button"> select an image (up to 2 MB) </span> ',
Button_text_style: '. button {font-family: Helvetica, Arial, sans-serif; font-size: 14pt ;}. buttonSmall {font-size: 10pt ;}',
Button_text_top_padding: 1,
Button_text_left_padding: 5,
// Flash Settings
Flash_url: "/JS/swf/swfupload.swf", // Relative to this file
Flash9_url: "/JS/swf/swfupload_FP9.swf", // Relative to this file
Custom_settings :{
Upload_target: "divFileProgressContainer"
},
// Debug Settings
Debug: false
});
});
$ (Function (){
$ ("# Draggable"). draggable ({containment: "parent "},
{Cursor: "crosshair "});
$ ("# Draggable"). dblclick (function (){
Var thisOffset = $ (this). offset (); // obtain the Coordinate Position of the modified container
Var parentOffset = $ (this). parent (). offset (); // obtain the coordinates of the parent container
Var left = thisOffset. left-parentOffset. left; // obtain the relative position relative to the parent form.
Var top = thisOffset. top-parentOffset. top; // obtain the relative position of the parent form.
Alert (left + "" + top );
});
});
</Script>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
<Span id = "btnUploadImgPlaceholder"> </span>
<Div id = "divFileProgressContainer"> </div>
<Br/>
<Div id = "avatarContainer" style = "width: 200px; height: 300px">
<Div id = "draggable" style = "background-color: transparent; border-width: 1px; border-color: Black; border-style: solid;">
Drag
</Div>
</Div>
</Div>
</Form>
</Body>
</Html>
General background processing area:
(UploadAvatar. ashx)
Copy codeThe Code is as follows:
Using System;
Using System. Collections. Generic;
Using System. Linq;
Using System. Web;
Using System. IO;
Using System. Drawing;
Using System. Web. Script. Serialization;
Using System. Drawing. Drawing2D;
Namespace NovelChannel. Ajax
{
/// <Summary>
/// Summary of UploadAvatar
/// </Summary>
Public class UploadAvatar: IHttpHandler
{
Public void ProcessRequest (HttpContext context)
{
Context. Response. ContentType = "text/plain ";
// Context. Response. Write ("Hello World ");
HttpPostedFile uploadFile = context. Request. Files ["FileData"];
String ext = Path. GetExtension (uploadFile. FileName );
If (ext! = ". Jpg ")
{
Context. Response. Write ("invalid file type ");
Return;
}
String fileName = DateTime. Now. ToString ("yyMMddhhMMss") + new Random (). Next (1000,999 9) + ". jpg ";
String filePath = "/Images/UserImg/" + fileName;
String fullPath = HttpContext. Current. Server. MapPath ("~ "+ FilePath );
UploadFile. SaveAs (fullPath );
System. Drawing. Image img = Bitmap. FromFile (fullPath );
String [] strs = {filePath, img. Size. Width. ToString (), img. Size. Height. ToString ()};
JavaScriptSerializer jss = new JavaScriptSerializer ();
String json = jss. Serialize (strs );
Context. Response. Write (json );
}
Public bool IsReusable
{
Get
{
Return false;
}
}
}
}
In this way, you can achieve the effect of refreshing images. Because the project contains some jQuery-UI drag-and-drop effects, please delete them if they are of little help to your project.
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
