swfupload ajax无刷新上传图片实例代码
程序员文章站
2024-02-29 17:53:10
最近自己做项目的时候需要添加一个功能，上传用户的图片，上传用户图片其实涉及到很多东西，不只是一个html标签
最近自己做项目的时候需要添加一个功能，上传用户的图片，上传用户图片其实涉及到很多东西，不只是一个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的拖拽效果，如果对大家的项目没有什么帮助的话请适当删除。
前台代码区：
复制代码 代码如下:
<%@ 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的拖拽效果，如果对大家的项目没有什么帮助的话请适当删除。