uploadify 3.2 上传图片_.NET

您所在的位置：程序员俱乐部 > 编程开发 > .NET > uploadify 3.2 上传图片

uploadify 3.2 上传图片

2013/10/13 15:33:21 阿洛_LOSTBOY 博客园我要评论(0)

摘要：uploadifyversion:uploadify3.2<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><title></title>
标签：图片上传

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("\\") > -1)
                filePath = filePath.Substring(filePath.LastIndexOf("\\") + 1);
            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;
        }
    }
}