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什么时候需要Commit

    写完DML语句(update, insert, delete)后,需要手动COMMIT,如果没有COMMIT,更新的内容会被保存到内存中,而不是提交到数据库中,将不会被其他Session(对话)看见. ...

  2. 24 MUST HAVE ESSENTIAL LINUX APPLICATIONS IN 2016

    Brief: Whare the must have applications for Linux? The answer is subjective and it depends on for wh ...

  3. 表数据转换为insert语句

    /* 对象:导出物理表数据为Insert语句 描述:可以传递条件精确导出sql 加条件的前提是只知道相应的字段名及类型 */ from sysobjects where name ='proc_ins ...

  4. activity传递数据

    这些都是老生常谈了,到处都搜的到,但是因为经常忘记,放着好调用: 传递数据: Intent intent = new Intent(); Bundle bundle = new Bundle(); b ...

  5. C#反射（转载）

    [转]C#反射   反射(Reflection)是.NET中的重要机制,通过放射,可以在运行时获得.NET中每一个类型(包括类.结构.委托.接口和枚举等)的成员,包括方法.属性.事件,以及构造函数等. ...

  6. c#抽象类相关

    abstract class mylass { public int age{get;set} public abstract void SaiHi(); } 1,抽象类中可以有实例成员,也可以有抽象 ...

  7. js对象，原型，call，apply浅析

    //对象直接量,创建对象最简单的方式是在js里使用对象直接量 var book = { "main title": "js", //属性里有空格,要用引号 &q ...

  8. 基于jquery的inputlimiter 实现字数限制功能

    html代码: <td>内容摘要:</td> <td> <textarea id="content_summary" rows=5 nam ...

  9. 【转载】#323 - A Generic Class is a Template for a Class

    A generic classs is a class that takes one or more type parameters, which it then uses in the defini ...

  10. MFC控件随窗口大小变化原理及实现

    本文主要针对MFC的dialog,实现控件随窗口大小变化. 原理:首先获取dialog的初始大小,当窗口发送变动时,调用OnSize事件和方法,计算缩放比例,然后对界面中的所有控件进行缩放和布局. 实 ...