程序博客网 > 160站点气象观测数据

SWFUpload.js方法图片的上传和imgAreaselect.js方法图片任意部位的截取

来源：互联网 发布：160站点气象观测数据 编辑：程序博客网 时间：2024/04/28 14:53

SWFUpload.js方法图片的上传和imgAreaselect.js方法图片任意部位的截取

第一部分：图片上传
                 1.创建c#web窗体
                 2.添加SWFUpload.js的文件引用
                      引用文件如下：    <script src="../Scripts/swfupload/swfupload.js"></script>
                                                      <script src="../Scripts/swfupload/swfupload.queue.js"></script>
                                                      <script src="../Scripts/js/handlers.js"></script>

                       注意：handlers.js的引用不放在其他2个引用文件夹下，放在同一个文件夹不知道出了什么错误。

                  3.添加选择图片按钮和显示图片布局

<body>    <form id="form1" runat="server">        <div><span id="spanButtonPlaceHolder"></span></div>        <div id="divFileProgressContainer" style="height: 75px;"></div>        <img id="divphotoimage" />          </form></body>
                   4.编写图片上传js代码
<script>  var swfu;        window.onload = function () {                                         swfu = new SWFUpload({                // Backend Settings                upload_url: "../Handler/test.ashx?cmd=upload",//一般处理程序（带参数）                post_params: {                    "ASPSESSID": "<%=Session.SessionID %>"      //参数（不知道干嘛）                },                // File Upload Settings                file_size_limit: "2048",// 2MB          //文件大小                file_types: "*.jpg",                            //类型                file_types_description: "JPG Images",           //类型描述                file_upload_limit: "0",    // Zero means unlimited  //上传限制                // Event Handler Settings - these functions as defined in Handlers.js                //  The handlers are not part of SWFUpload but are part of my website and control how                //  my website reacts to the SWFUpload events.                file_queue_error_handler: fileQueueError,                          file_dialog_complete_handler: fileDialogComplete,                upload_progress_handler: uploadProgress,                upload_error_handler: uploadError,                upload_success_handler: showimage,               //图片显示成功的调用的方法，showimage是方法                upload_complete_handler: uploadComplete,                // Button settings                button_image_url: "../Scripts/js/images/XPButtonNoText_160x22.png", //选择图片按钮在这里设计                 button_width: "160",                button_height: "22",                button_placeholder_id: "spanButtonPlaceHolder",                     //在哪里显示（占位符）                button_text: '<span class="theFont">选择文件</span>',               //按钮显示文字内容                button_text_style: ".theFont { font-size: 13;}",                button_text_left_padding: 12,                button_text_top_padding: 3,                // Flash Settings                flash_url: "../Scripts/swfupload/swfupload.swf",// Relative to this file  swfupload.swf需要添加到引用的文件夹下                custom_settings: {                    upload_target: "divFileProgressContainer"           //图片上传成功的信息内容                },                // Debug Settings                debug: false            });        }
        //图片上传成功后
        function showimage(file, serverData) {                 //serverData是一般处理程序返回的文件上传的图片路径            $("#divphotoimage").attr("src", serverData);                      }</script>

                        5.后台处理                         

    #region 上传图片

        private void fileuloadimage(HttpContext context)

        {

            HttpPostedFile file = context.Request.Files[0];

            string filename = Path.GetFileName(file.FileName);

            string fileXect = Path.GetExtension(filename);

            string filepath = context.Request.MapPath("/uploadimage/") + filename;

            file.SaveAs(filepath);

            context.Response.Write("/uploadimage/" + filename);

        }

        #endregion


                        6.SWFUpload.js的下载链接：http://pan.baidu.com/s/1mi8trVq 密码：xjbq

第二部分：图片截取

                            1、下载imgAreaselect.js 链接：http://pan.baidu.com/s/1eR2jFgA 密码：dcnr

                            2、 完整引用如下

                              <link href="../imgAreaSelect/imgareaselect-default.css" rel="stylesheet" />

    <script src="../Scripts/ui/jquery-1.4.2.js"></script>

    <script src="../imgAreaSelect/jquery.imgareaselect.min.js"></script>

    <script src="../Scripts/swfupload/swfupload.js"></script>

    <script src="../Scripts/swfupload/swfupload.queue.js"></script>

    <script src="../Scripts/js/handlers.js"></script>

3、界面布局

  <form id="form1" runat="server">        <div><span id="spanButtonPlaceHolder"></span></div>        <div id="divFileProgressContainer" style="height: 75px;"></div>        <img id="divphotoimage" />        <input id="imagecut" type="button" value="图像截取" />        <input type="hidden" id="imgsrc" />        <br />        <img id="cutnewimage" />    </form>
4、图片上传成功后显示一个截取的图片框
 function showimage(file, serverData) {            $("#divphotoimage").attr("src", serverData);
            //将图片给了img后就会触发该事件，理解为创建一个div （0,0）左上角 （250，250）右下角 onSelectEnd为事件：选择要截图的图片后            $("#divphotoimage").imgAreaSelect({ selectionColor: 'bule', x1: 0, y1: 0, x2: 250, y2: 250, seclectionOpacity: 0.2, onSelectEnd: preview });            $("#imgsrc").val(serverData);  //将图片路径给隐藏域，在js里面最好不要使用全局变量，以后要用到图片路径        }
5、图片截取成功后数据的保存
  function preview(img, selection) {
            //存取图片的x、y坐标和宽度高度            $("#divphotoimage").data('x', selection.x1);            $("#divphotoimage").data('y', selection.y1);            $("#divphotoimage").data('w', selection.width);            $("#divphotoimage").data('h', selection.height);        }
6.参数的取出方法和传递给一般处理程序的方法
 $(function () {
            //点击图片截取按钮触发的事件            $("#imagecut").click(function () {
                var pars = {     //传递的参数                    x: $("#divphotoimage").data('x'),                    y: $("#divphotoimage").data('y'),                    width: $("#divphotoimage").data('w'),                    height: $("#divphotoimage").data('h'),                    imgsrc: $("#imgsrc").val(),                    cmd: "cut"                };                $.post("../Handler/test.ashx", pars, function (data) {  //一般处理程序请求的方法                    $("#cutnewimage").attr("src", data);                //将截取成功的图片显示出来                });            })        })
7、后台将传递的参数也是就截取的图片画出来，保存起来

  #region 截取图片        private void cutuploadimage(HttpContext context)        {            int x = Convert.ToInt32(context.Request["x"]);            int y = Convert.ToInt32(context.Request["y"]);            int width = Convert.ToInt32(context.Request["width"]);            int height = Convert.ToInt32(context.Request["height"]);            string imgsrc = context.Request["imgsrc"];            Bitmap map = new Bitmap(width, height);        //创建画布            Graphics g = Graphics.FromImage(map);          //创建画笔            Image img = Image.FromFile(context.Request.MapPath(imgsrc)); //原始图片
            //将原图的指定范围画到画布上            //第一个img参数，表示对哪张图进行操作            //第二个参数，画多么大            //第三个参数，画多大的区域            //GraphicsUnit.Pixel像素单位
 g.DrawImage(img, new Rectangle(0, 0, width, height), new Rectangle(x, y, width, height), GraphicsUnit.Pixel); string filecutname = Guid.NewGuid().ToString(); string fullDir = "/uploadimage/" + filecutname + ".jpg"; map.Save(context.Request.MapPath(fullDir), System.Drawing.Imaging.ImageFormat.Jpeg); context.Response.Write(fullDir); } #endregion
       第三部分：完整的demo
         前台代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="text.aspx.cs" Inherits="ebook.Pages.text" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="../imgAreaSelect/imgareaselect-default.css" rel="stylesheet" />
    <script src="../Scripts/ui/jquery-1.4.2.js"></script>
    <script src="../imgAreaSelect/jquery.imgareaselect.min.js"></script>
    <script src="../Scripts/swfupload/swfupload.js"></script>
    <script src="../Scripts/swfupload/swfupload.queue.js"></script>
    <script src="../Scripts/js/handlers.js"></script>
    <script>
        var swfu;
        window.onload = function () {
            swfu = new SWFUpload({
                // Backend Settings
                upload_url: "../Handler/test.ashx?cmd=upload",// Relative to the SWF file
                post_params: {
                    "ASPSESSID": "<%=Session.SessionID %>"
                },
                // File Upload Settings
                file_size_limit: "2048",// 2MB
                file_types: "*.jpg",
                file_types_description: "JPG Images",
                file_upload_limit: "0",    // Zero means unlimited
                // Event Handler Settings - these functions as defined in Handlers.js
                //  The handlers are not part of SWFUpload but are part of my website and control how
                //  my website reacts to the SWFUpload events.
                file_queue_error_handler: fileQueueError,
                file_dialog_complete_handler: fileDialogComplete,
                upload_progress_handler: uploadProgress,
                upload_error_handler: uploadError,
                upload_success_handler: showimage,
                upload_complete_handler: uploadComplete,
                // Button settings
                button_image_url: "../Scripts/js/images/XPButtonNoText_160x22.png", // Relative to the Flash file
                button_width: "160",
                button_height: "22",
                button_placeholder_id: "spanButtonPlaceHolder",
                button_text: '<span class="theFont">选择文件</span>',
                button_text_style: ".theFont { font-size: 13;}",
                button_text_left_padding: 12,
                button_text_top_padding: 3,
                // Flash Settings
                flash_url: "../Scripts/swfupload/swfupload.swf",// Relative to this file
                custom_settings: {
                    upload_target: "divFileProgressContainer"
                },
                // Debug Settings
                debug: false
            });
        }
        function showimage(file, serverData) {
            $("#divphotoimage").attr("src", serverData);
            $("#divphotoimage").imgAreaSelect({ selectionColor: 'bule', x1: 0, y1: 0, x2: 250, y2: 250, seclectionOpacity: 0.2, onSelectEnd: preview });
            $("#imgsrc").val(serverData);
        }
        //确定出要截取图像的方位数据参数
        function preview(img, selection) {
            $("#divphotoimage").data('x', selection.x1);
            $("#divphotoimage").data('y', selection.y1);
            $("#divphotoimage").data('w', selection.width);
            $("#divphotoimage").data('h', selection.height);
        }
        $(function () {
            $("#imagecut").click(function () {
                var pars = {
                    x: $("#divphotoimage").data('x'),
                    y: $("#divphotoimage").data('y'),
                    width: $("#divphotoimage").data('w'),
                    height: $("#divphotoimage").data('h'),
                    imgsrc: $("#imgsrc").val(),
                    cmd: "cut"
                };
                $.post("../Handler/test.ashx", pars, function (data) {
                    $("#cutnewimage").attr("src", data);
                });
            })
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div><span id="spanButtonPlaceHolder"></span></div>
        <div id="divFileProgressContainer" style="height: 75px;"></div>
        <img id="divphotoimage" />
        <input id="imagecut" type="button" value="图像截取" />
        <input type="hidden" id="imgsrc" />
        <br />
        <img id="cutnewimage" />
    </form>
</body>
</html>
后台代码：
using System;using System.Collections.Generic;using System.Drawing;using System.Drawing.Drawing2D;using System.Drawing.Imaging;using System.IO;using System.Linq;using System.Web;namespace ebook.Handler{    /// <summary>    /// test 的摘要说明    /// </summary>    public class test : IHttpHandler    {        public void ProcessRequest(HttpContext context)        {            context.Response.ContentType = "text/plain";            string str = context.Request["cmd"];            if (str == "upload")            {                fileuploadimage(context);            }            else if (str == "cut")            {                cutuploadimage(context);            }        }        #region 截取图片        private void cutuploadimage(HttpContext context)        {            int x = Convert.ToInt32(context.Request["x"]);            int y = Convert.ToInt32(context.Request["y"]);            int width = Convert.ToInt32(context.Request["width"]);            int height = Convert.ToInt32(context.Request["height"]);            string imgsrc = context.Request["imgsrc"];            Bitmap map = new Bitmap(width, height);            Graphics g = Graphics.FromImage(map);            Image img = Image.FromFile(context.Request.MapPath(imgsrc));            g.DrawImage(img, new Rectangle(0, 0, width, height), new Rectangle(x, y, width, height), GraphicsUnit.Pixel);            string filecutname = Guid.NewGuid().ToString();            string fullDir = "/uploadimage/" + filecutname + ".jpg";            map.Save(context.Request.MapPath(fullDir), System.Drawing.Imaging.ImageFormat.Jpeg);            context.Response.Write(fullDir);        }        #endregion        #region 上传图片        private void fileuploadimage(HttpContext context)        {            HttpPostedFile file = context.Request.Files[0];            string filename = Path.GetFileName(file.FileName);            string filejpg = Path.GetExtension(filename);            string guid = Guid.NewGuid().ToString();            string Dir = "/uploadimage/" + filename + guid + filejpg;            file.SaveAs(context.Request.MapPath(Dir));            context.Response.Write(Dir);        }        #endregion        public bool IsReusable        {            get            {                return false;            }        }    }}



                   
                                             
        0        0           
	
				
		









 160站点气象观测数据
    		160站点气象观测数据



原创粉丝点击



		

热门IT博客


win和linux双系统引导win和linux双系统引导




c语言的头文件有哪些c语言的头文件有哪些




数据库null和空




手机淘宝怎么定位地址




利用淘宝客漏洞赚钱




linux开机启动项




游侠客 知乎




战地4网络需求




windows 10激活工具




mac怎么查服务器地址




舒尔特注意力软件下载




ac990会计核算软件




算法入门经典第二版pdf




烧饼修改器软件




如何经营好一家淘宝店




帝国cms栏目地址




手机淘宝仓库在哪里找




德安东尼数据




svd算法介绍




会计核算软件的概念



		

热门问题
    老师的惩罚
    人脸识别
    我在镇武司摸鱼那些年
    重生之率土为王
    我在大康的咸鱼生活
    盘龙之生命进化
    天生仙种
    凡人之先天五行
    春回大明朝
    姑娘不必设防，我是瞎子
    愁组词
    我寄愁心与明月
    多愁善感什么意思
    愁眉苦脸
    江枫渔火对愁眠
    多愁善感意思
    少年不知愁滋味
    几多愁
    愁云毒雾
    惨雨愁云
    愁云惨淡
    愁云惨雾
    愁云惨淡万物凝的上一句
    愁云惨淡万凝的上句
    来欢去何苦江畔起愁云的意思
    秋风秋雨愁煞人
    离人愁歌词
    离人愁简谱
    愁人图片
    离人愁歌曲
    离人愁吉他谱
    海风阵阵愁煞人
    离人愁舞蹈
    诗赋愁煞人隐藏任务
    愁人
    离人愁原唱
    何处合成愁离人心上秋
    人离位心别愁打一节气
    真愁人带字图片
    离人愁mp3下载
    离人愁下载mp3
    李元杰离人愁
    家贫不是贫路贫愁煞人
    愁怨的反义词
    愁怨的近义词
    愁怨的意思
    愁红怨绿
    愁怨拼音
    什么的愁怨
    愁怨的拼音
    粉愁香怨


	










程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里