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 基础 <2> --函数

    一:函数的定义 函数是用于返回特定数据的PL/SQL程序块 (函数必须返回一个值) 语法: create [or replace] function function_name--函数名称 [(par ...

  2. javaweb学习总结二十五(response对象的用法一)

    一:Reponse对象的概念 当客户端发送http请求时,服务器端会对每一次请求,创建request对象和response对象. response对象包括三个部分:响应头.响应状态码以及响应体 二:r ...

  3. TortoiseSVN 更新时忽略指定文件夹

    命令行可以这么来svn update –set-depth=exclude 文件夹 那么TortoiseSVN客户端呢?在文件夹右键中的”更新至版本(U)”更新深度选”排除”,确定,搞定下次更新就不会 ...

  4. Ajax+JSON学习笔记（二）

    来源:http://www.imooc.com/learn/250 readyState属性 0:请求未初始化,open还没有调用 1:服务器连接已建立,open已经调用了 2:请求已接受,也就是接收 ...

  5. html5技术介绍

    什么是HTML5 1>网页的5.0版本 1> 2014年才定制完HTML5的标准,历时8年 2> 移动先行 为什么要用HTML5 1> 跨平台 利用HTML5编写的UI界面能运 ...

  6. 微软推出的免费新书《Introducing Microsoft SQL Server 2012》

    微软推出的免费新书<Introducing Microsoft SQL Server 2012>,该书详细介绍微软SQL 2012数据库服务最新功能以及功能应用和使用技巧. 该书适合SQL ...

  7. PAT1028—— 人口普查

    某城镇进行人口普查,得到了全体居民的生日.现请你写个程序,找出镇上最年长和最年轻的人. 这里确保每个输入的日期都是合法的,但不一定是合理的——假设已知镇上没有超过200岁的老人,而今天是2014年9月 ...

  8. 使用VS2015(c#)进行单元测试，显示测试结果与查看代码覆盖率

    创建测试的过程可参考如下链接 http://www.cnblogs.com/libaoquan/p/5296384.html (一)如何使用VS2015查看测试结果 问题描述:使用VS2010执行单元 ...

  9. UI1_UIScrollView

    // // AppDelegate.m // UI1_UIScrollView // // Created by zhangxueming on 15/7/10. // Copyright (c) 2 ...

  10. js中字符和数组一些基本算法题

    最近在刷 fcc的题,跟升级打怪一样,一关一关的过,还挺吸引我的.今天抽时间把 Basic Algorithm Scritping  这部分题做了,根据一些提示,还是比较简单的.有些题的处理方式 方法 ...