Of Stack

swfupload ajax no refresh upload image instance code

  • 2020-06-12 08:51:45
  • OfStack
Recently, when I was working on my own project, I needed to add a function to upload user pictures. Uploading user pictures actually involves many things, not just an html tag < input id="File1" type="file" / > Or asp. net sealed good FileUpload control, now the website is no longer stressed about functionality, more is the user experience, upload pictures here need to use ajax no refresh upload pictures, which contains not 1:50. swfupload, a plug-in, is used here to upload images without refreshing. Upload my code directly for your reference.

Foreground code area: 
 
<%@ 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 the image (maximum) 2MB ) </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();// Gets the coordinate position of the change container  
var parentOffset = $(this).parent().offset(); // Gets the coordinate position of the parent container  
var left = thisOffset.left - parentOffset.left;// Gets the position relative to the parent form  
var top = thisOffset.top - parentOffset.top; // Gets the position relative to 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;"> 
 Pulled across  
</div> 
</div> 
<img id="imgAvatar" style="display:none;"/> 
</div> 
</form> 
</body> 
</html>

Background 1 General handler area:
(UploadAvatar ashx) 
 
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> 
/// UploadAvatar  Summary description of  
/// </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(" 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; 
} 
} 
} 
}

This will allow you to upload images without refreshing the effect. Since part 1 of jQuery-ES21en is included in the project, please delete it if it does not help your project.
Related articles: