欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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的拖拽效果,如果对大家的项目没有什么帮助的话请适当删除。