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;

        }

    }

}

Uploadify 3.2 上传图片的更多相关文章

  1. Uploadify 控件上传图片 + 预览

    jquery的Uploadify控件上传图片和预览使用介绍. 在简单的servlet系统中和在SSH框架中,后台处理不同的,在三大框架中图片预览时费了不少力气,所以下面将两种情况都介绍一下. 1,前台 ...

  2. 【Uploadify】远程上传图片到【七牛云存储】

    1.下载Uploadify版本3.2.1 2.下载七牛SDK 解压后将 qiniu 文件夹copy到uploadify文件夹下 3.修改uploadify.php文件 <?php $verify ...

  3. asp.net+uploadify实现图片上传图片

    前段代码如下 $("#file_upload").uploadify({ 'auto': true, 'swf': '/template/js/cutImg/uploadify/u ...

  4. uploadify上传图片的类型错误的解决办法

    大家在做开发的过程中,相信很多人都会使用到uploadify插件来上传图片,但是这个插件也有不完美的地方. 我曾多次遇到过这样一个问题:上传的图片类型明明是没有问题的,但是在上传的时候总是会报错:图片 ...

  5. jquery uploadify修改上传的文件名和显示

    如果觉得看文章太麻烦,可以直接看参考:http://stackoverflow.com/questions/7707687/jquery-uploadify-change-file-name-as-i ...

  6. Uploadify使用源码

    上传图片页面绑定源码如下: $("#uploadify").uploadify({ 'uploader' : basePath+'commons/uploadfiles/uploa ...

  7. 单文件WebUploader做大文件的分块和断点续传

    前言: WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流 ...

  8. 调试台自动多出现一个'&#65279;' ，我 用uploadify上传图片时，在给页面写入一个返回值为图片名称的变量的值的时候值的前面始终多出现一个'&#65279;'

    对你有助请点赞,请顶,不好请踩------送人玫瑰,手留余香! 15:54 2016/3/12用uploadify上传图片时,在给页面写入一个返回值为图片名称的变量的值的时候值的前面始终多出现一个' ...

  9. MVC中使用jquery uploadify上传图片报302错误

    使用jquery uploadify上传图片报302错误研究了半天,发现我上传的action中有根据session判断用户是否登录,如果没有登录就跳到登陆页,所以就出现了302跳转错误.原来更新了fl ...

随机推荐

  1. 强大的JQuery（二）--动画效果

    上篇博客我们讲过了jquery的基础知识--强大的JQuery(一)--基础篇,作为web开发人员,网页的动画效果是不可缺少的,本篇博客重点来说说jquery的动画效果的实现. 因为动画的效果不能截图 ...

  2. Oracle基础 exp/imp 数据泵导入/导出 命令

    一.导出方式: 使用exp/imp方式导出数据分为四种方式: 1.表方式导出:一个或多个指定的表,包括表的定义.表数据.表的所有者授权.表索引.表约束,以及创建在该表上的触发器.也可以只导出结构,不导 ...

  3. jQuery中json对象的复制（数组及对象） .

    1.jQuery自带的$.map方式: $.map(json, function (n) { return n; }); 这种方式原来用于复制数组还可以,今天用它复制数组中的某一条记录,发现字段名称丢 ...

  4. [python] HDU自动登录提交代码程序

    调了一个下午,被python的正则绊住了:在C#上运作好好的式子在python老是报错,原来python的断言式必须是固定长度的,像类似(?<=[^>].*?)的零宽度正回顾后发断言是不允 ...

  5. hdu 4099 Revenge of Fibonacci 大数+压位+trie

    最近手感有点差,所以做点水题来锻炼一下信心. 下周的南京区域赛估计就是我的退役赛了,bless all. Revenge of Fibonacci Time Limit: 10000/5000 MS ...

  6. sgu 185 最短路建网络流

    题目:给出一个图,从图中找出两条最短路,使得边不重复. 分析:既然是最短路,那么,两条路径上的所有节点的入边(s,x).出边(x,e)必定是最优的,即 dis[x] = dis[s]+edge_dis ...

  7. 转: 跨终端Web之Hybrid App

    转:  http://www.infoq.com/cn/articles/hybrid-app 编者按:InfoQ开设新栏目“品味书香”,精选技术书籍的精彩章节,以及分享看完书留下的思考和收获,欢迎大 ...

  8. Dijkstra最短路径算法

    #include <iostream> #include <vector> #include <cstring> #include <cstdio> # ...

  9. JS each 跳出

    break 对应的是 return false continue 对应的是 return true 这个问题每次都会记不清,都要去查一遍百度再确定答案,在这里也记一遍好了. function getP ...

  10. html meta标签之http-equiv

    摘要:HTTP-EQUIV类似于HTTP的头部协议,它回应给浏览器一些有用的信息,以帮助正确和精确地显示网页内容.常用的HTTP-EQUIV类型有:Content-Type.Refresh .Expi ...