Shulou(Shulou.com)06/03 Report--

Editor to share with you swfupload ajax how to achieve no refresh upload pictures, I believe that most people do not know much, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Recently, when you do your own project, you need to add a function, upload user pictures, upload user pictures actually involves a lot of things, not just a html tag or asp.net sealed FileUpload control, now the site no longer pay attention to functionality, more is the user experience, upload pictures here need to use ajax no refresh upload pictures, which contains things is not a bit. What is used here is a plug-in swfupload to upload pictures without refresh. Upload my code directly for your reference.

Foreground code area:

The copy code is as follows:

# draggable

{

Width:50px

Height:50px

Padding:0.5em

}

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":

}

/ / 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: 'select a picture (maximum 2MB)'

Button_text_style: '.button {font-family: Helvetica, Arial, sans-serif; font-size: 14pt;} .accounonSmall {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 location of the modified container

Var parentOffset = $(this) .parent () .offset (); / / get the coordinate location of the parent container

Var left = thisOffset.left-parentOffset.left;// gets the relative position relative to the parent form

Var top = thisOffset.top-parentOffset.top; / / get the relative position relative to the parent form

Alert (left+ "" + top)

});

});

Dragged over

Background general processor area:

(UploadAvatar.ashx)

The copy 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 description of UploadAvatar

/ / /

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 (illegal file type)

Return

}

String fileName = DateTime.Now.ToString ("yyMMddhhMMss") + new Random () .Next (1000, 9999) + ".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 uploading pictures without refreshing. As the project contains a part of the drag-and-drop effect of jQuery-UI, please delete it if it is not helpful to your project.

The above is all the contents of the article "how to upload pictures without refresh in swfupload ajax". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.