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:
Background 1 General handler area:
(UploadAvatar ashx)
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.
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.