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. oracle lsnrctl

    Oracle 11G在windows 7系统上不需要设置系统环境变量. 在命令行环境中运行命令: echo %ORACLE_SID% 可以看到此变量并不存在.也可以到注册表验证: HKEY_CURRE ...

  2. 跨域 HTTP 请求

    如果你需要从不同的服务器(不同域名)上获取数据就需要使用跨域 HTTP 请求. 跨域请求在网页上非常常见.很多网页从不同服务器上载入 CSS, 图片,Js脚本等. 在现代浏览器中,为了数据的安全,所有 ...

  3. canvas基础2--绘制图形

    栅格 绘制矩形 不同于SVG,HTML中的元素canvas只支持一种原生的图形绘制:矩形.所有其他的图形的绘制都至少需要生成一条路径.不过,我们拥有众多路径生成的方法让复杂图形的绘制成为了可能. 首先 ...

  4. 当“逻辑”与“UE”冲突时

    如上图. 权限系统有三个对象:用户.角色和组. 角色代表自定义的权限集合. "组"你可以理解为"文件夹"."部门"等名词. 一个用户可以拥有 ...

  5. .Net简单上传与下载

    上传: 首先上传我们需要一个控件-FileUpLoad: 再加上一个上传按钮: 在上传按钮的Click事件中添加如下代码: FileUpload1.SaveAs(Server.MapPath(&quo ...

  6. Part 57 to 58 Why should you override ToString and Equal Method

    Part 57 Why should you override ToString Method sometimes you can override ToString method like that ...

  7. Weex

    今天在群友发的那个掘金技术网站里头看到这个weex,感觉还不错 阿里负责的一个开源项目 源码地址: http://alibaba.github.io/weex/index.html 是用来做app的 ...

  8. Java longTime 和C#日期转换（结构+运算符重载）

    前几天,因为工作原因,连到了公司的一个java系统.查看数据的时候,突然整个人都不好了,数据库中日期字段时间为毛都是整型?之前从来没有接触过java,所心就趁机了解了一下.原来,在数据库中,保存的是j ...

  9. 20141214--C#父类，子类

    首要: 子类 包含父类的所有的属性方法 所有子类都可以直接转化成父类类型 当父类类型变量里面存的是某个子类的对象的时候,才能转化成那个子类类型. 父类与子类的装换: Ren r = new Ren() ...

  10. CPU卡及NFC供应商

    1.苏州市民卡供应商 北京握奇数据/watchdata 2.苏州市民卡手表 苏州连爱/linklove公司 3.NFC供应商 英飞凌/Infelion, NXP,复旦微电子, 4.什么是CPU卡? C ...