swfupload ajax无刷新上传图片实例代码

前端技术 2023/09/01 .NET
最近自己做项目的时候需要添加一个功能，上传用户的图片，上传用户图片其实涉及到很多东西，不只是一个html标签<input id=\"File1\" type=\"file\" />或者asp.net封住好的FileUpload 控件，现在网站不再讲究的是功能性，更多的是用户体验性，在这里上传图片就需要用到ajax无刷新上传图片，这里面包含的东西不是一点半点。这里用到的是一个插件swfupload 实现无刷新上传图片。直接上传我的代码供大家参考。

前台代码区：
复制代码 代码如下:

<%@ 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\">选择图片（最大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();//获取改容器的坐标位置
var parentOffset = $(this).parent().offset(); //获取父容器的坐标位置
var left = thisOffset.left - parentOffset.left;//得到相对于父窗体的相对位置
var top = thisOffset.top - parentOffset.top; //得到相对于父窗体的相对位置
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;\">
拖过
</div>
</div>
<img id=\"imgAvatar\" style=\"display:none;\"/>
</div>
</form>
</body>
</html>

后台一般处理程序区：
（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>
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(\"非法的文件类型\");
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;
}
}
}
}

这样就可以实现无刷新上传图片的效果了。由于项目中包含一部分jQuery-UI的拖拽效果，如果对大家的项目没有什么帮助的话请适当删除。

本文地址：https://www.stayed.cn/item/3126

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案