uploadify version: uploadify 3.2
<!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>
<script type="text/javascript">
var site = "http://pic.domain.com/";
</script>
<link href="css/common.css" rel="stylesheet" type="text/css" />
<link href="js/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.insert-pool li{list-style:none; width:100px;height:100px;margin-right:20px;}
</style>
<script src="js/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/uploadify/jquery.uploadify.min.js" type="text/javascript"></script> </head>
<body>
<form id="form1" runat="server">
<div id="page">
<div id="content">
<div id="upload-content">
<div class="upload-form">
<dl>
<dt>上传图片：</dt>
<dd class="uploader"><div id="file_upload"></div></dd>
</dl>
</div>
</div>
<div class="insert-pool"></div>
</div>
</div>
</form>
</body>
</html>
JavaScript:
<script type="text/javascript">
function imgResize(maxWidth, maxHeight, imgObj) {
var img = new Image();
img.src = imgObj.src; if (img.width > 0 && img.height > 0) {
if (img.width / img.height >= maxWidth / maxHeight) {
if (img.width > maxWidth) {
imgObj.width = maxWidth;
imgObj.height = (img.height * maxWidth) / img.width;
} else {
imgObj.width = img.width;
imgObj.height = img.height;
}
} else {
if (img.height > maxHeight) {
imgObj.height = maxHeight;
imgObj.width = (img.width * maxHeight) / img.height;
} else {
imgObj.width = img.width;
imgObj.height = img.height;
}
}
}
else {
imgObj.width = maxWidth;
imgObj.height = maxHeight;
}
} $(function () {
//上传图片
$("#file_upload").uploadify({
'fileSizeLimit': '2048KB',
'fileTypeExts': '*.gif; *.jpg',
'queueSizeLimit': 3,
'auto': true,
'swf': '/js/uploadify/uploadify.swf',
'uploader': '/Handler/ImgUploadHandler.ashx',
'buttonText': '选择图片并上传',
'onUploadSuccess': function (file, data, response) {
if (data && data.length > 0) {
var json = eval("(" + data + ")");
$("<li><div class=\"img-box\"><img src=\"" + site + json.url + "\" onload=\"imgResize(100,100,this);\" /></div><a href=\"javascript:;\" class=\"remove\" title=\"是否移除图片\">移除</a></li>")
.appendTo(".insert-pool");
} else {
alert("文件上传数据为空");
}
}
}); $(".remove").live("click", function () {
var oThis = $(this);
var imgsrc = oThis.prev().find("img").attr("src");
if (imgsrc.lastIndexOf("/") > -1) {
imgsrc = imgsrc.substring(imgsrc.lastIndexOf("/") + 1);
//alert(imgsrc);
}
$.post("/Handler/ImgUploadHandler.ashx", { "action": "IMGDELETE", "imgsrc": imgsrc },
function (data) {
if (data && data != "") {
var json = eval("(" + data + ")");
if (json.state == "SUCCESS") {
oThis.parent("li").eq(0).remove();
} else {
alert("移除失败");
}
}
});
});
});
</script>
Code:
public class ImgUploadHandler : IHttpHandler
{ string strMsg = "SUCCESS", action = "";
string rootpath = null,fileName = null, filePath = null; public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain"; HttpPostedFile file = context.Request.Files["Filedata"];
action = context.Request["action"];
rootpath = System.Configuration.ConfigurationManager.AppSettings["PictureRoot"]; if (action == "IMGDELETE")
{
ImgDelete(context);
} if (file != null)
{
string fileExt = System.IO.Path.GetExtension(file.FileName); if (!System.IO.Directory.Exists(rootpath))
{
System.IO.Directory.CreateDirectory(rootpath);
}
fileName = System.DateTime.Now.ToString("yyyyMMddhhmmssffffff") + fileExt;
filePath = rootpath + fileName;
if (System.IO.File.Exists(fileName))
{
System.IO.File.Delete(filePath);
} file.SaveAs(filePath);
if (filePath.LastIndexOf("\\") > -)
filePath = filePath.Substring(filePath.LastIndexOf("\\") + );
context.Response.Write("{\"state\":\"" + strMsg + "\", \"url\":\"" + filePath + "\"}");
}
else
{
strMsg = "FAILED";
context.Response.Write("{\"state\":\"" + strMsg + "\", \"url\":\"" + filePath + "\"}");
}
} private void ImgDelete(HttpContext context)
{
fileName = context.Request["imgsrc"];
filePath = rootpath + fileName;
if(System.IO.File.Exists(filePath))
{
System.IO.File.Delete(filePath);
context.Response.Write("{\"state\":\"" + strMsg + "\"}");
}
else
{
strMsg = "FAILED";
context.Response.Write("{\"state\":\"" + strMsg + "\"}");
}
context.Response.End();
} public bool IsReusable
{
get
{
return false;
}
}
}