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. Divisibility by Eight (数学)

    Divisibility by Eight time limit per test 2 seconds memory limit per test 256 megabytes input standa ...

  2. 实例--post请求，完成一个抽奖程序概率的测试

    一个web项目测试,测试抽奖概率的正确性,写了一个小代码,验证概率 post和get请求的一个工具类 package kankan_interface; import java.io.IOExcept ...

  3. 社区APP “钱途”漫漫

    花样年曾宣称:2013年“彩生活”物业品牌收入1.85亿,毛利率超过40%:万科万客会APP.龙湖物业APP……大量房地产企业依托物业企业,纷纷瞄准移动互联网.云计算.物联网等高新科技为基础的物业服务 ...

  4. Atom 下载、安装

    Atom工具的使用 由github发布的前端开发工具 非常强大的开发工具 官网下载地址:https://atom.io Atom的插件和主题安装和配置

  5. Html5新标签及用法

    HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2  HTML 标准.它希望能够减少浏览器对于需要插件的丰富性网络应用服务( ...

  6. 深入浅出ExtJS 第七章 弹出窗口

    7.1 Ext.MessageBox 7.1 Ext.MessageBox //Ext.MessageBox为我们提供的alert/confirm/prompt等完全可以代替浏览器原生; 7.1.1 ...

  7. SVN Server导项目到本地库时提示"方法OPTIONS失败与无法连接到服务器"

    方法 OPTIONS 失败于 “https://xxxx/svn/xxxx”: 无法连接到服务器 (https://xxxx) 要留意  https 使用了443 端口,检查防火墙是否开放了该端口. ...

  8. MDNavBarView下拉导航菜单（仿美团导航下拉菜单）

    说到下拉导航菜单这个东西用得还真不少,细心算一下做开发以来这样的菜单已经写了第三次了,但基本都是不能复用.感觉特累人.不经意看到同事写一个类似的下拉菜单,但他引用了开源库仿大众菜单的库,大致看了一下, ...

  9. SQL语句统计每天的数据

    按用户注册时间统计每天注册的不同来源.不同状态的用户数量: ), RegisterTime, ) RDate ,--DATEPART(YEAR, RegisterTime) 年 ) END 'AWai ...

  10. 20141103--SQL主键，外键

    设置主键: 右键表→设计,在需要的列上右键→设置主键 或者在创建表的时候,在想要作为索引的列后面加上 primary key create table biao3 ( [No.] int primar ...