上传数据+上传一张图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax上传数据(1.解决传送数据乱码问题2.苹果手机上传图片翻转问题)</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link href="<%templateskin%>/css/amazeui.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="<%templateskin%>/css/layer.css">
    <script type="text/javascript" src="<%templateskin%>/js/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="<%templateskin%>/js/amazeui.min.js"></script>
    <script src="<%templateskin%>/js/exif-js-master/exif.js"></script>
<script type="text/javascript" charset="utf-8" src="<%templateskin%>/js/layer.js"></script>
    <style>
        .upload-album{position: absolute;top: -1000px;}
        #picshow{display:none; }
    </style>
</head>
<body class="am-backg-f7 am-padding-horizontal-sm">
    <!-- 输入列表 -->
    <div class="am-form am-form-horizontal am-backg-white am-padding-horizontal-sm am-margin-top">
        <div class="am-form-group am-form-group-sm am-border-k am-margin-bottom-0">
            <label for="doc-ipt-3-1" class="am-u-sm-3 am-form-label am-padding-horizontal-0">联系人</label>
            <div class="am-u-sm-9 am-padding-horizontal-0">
                <input type="text" id="doc-ipt-3-1" class="am-border-0 am-form-field">
            </div>
        </div>
      <div class="am-form-group am-form-group-sm am-border-k am-margin-bottom-0">
            <label for="doc-select-1" class="am-u-sm-3 am-form-label am-padding-horizontal-0">选择社区</label>
            <div class="am-u-sm-9 am-padding-horizontal-0">
                <select id="doc-select-1" class="am-border-0">
                    <option class="am-hide" value="0"></option>
                    <option value="1">第一社区</option>
                </select>
            </div>
        </div>
        <div class="am-form-group am-form-group-sm am-border-k am-margin-bottom-0">
            <label for="doc-ipt-3-2" class="am-u-sm-3 am-form-label am-padding-horizontal-0">联系电话</label>
            <div class="am-u-sm-9 am-padding-horizontal-0">
                <input type="text" id="doc-ipt-3-2" class="am-border-0 am-form-field">
            </div>
        </div>
        <div class="am-form-group am-form-group-sm am-border-k am-margin-bottom-0">
            <label for="doc-ipt-3-3" class="am-u-sm-3 am-form-label am-padding-horizontal-0">地址</label>
            <div class="am-u-sm-9 am-padding-horizontal-0">
                <input type="text" id="doc-ipt-3-3" class="am-border-0 am-form-field">
            </div>
        </div>
    </div>
    <!-- 输入列表 -->
    <!-- 文字域 -->
    <div class="am-form am-margin-top">
        <div class="am-form-group am-text-sm">
            <label for="doc-ta-1" class="am-padding-horizontal-sm">详情</label>
            <textarea class="am-border-0" rows="5" id="doc-ta-1"></textarea>
        </div>
    </div>
    <!-- 文字域 -->
    <!-- 上传图片 -->
    <div class="am-margin-top">
        <div class="am-padding-horizontal-sm am-text-sm am-margin-bottom-xs">
            <span>添加照片</span>
        </div>
        <ul class="am-backg-white am-padding-horizontal-sm am-padding-vertical am-g">
            <li class="am-u-sm-3 am-padding-horizontal-xs" id="picshang">
                <i class="am-icon-camera am-icon-lg am-text-gray am-radius"></i>
            </li>
            <li class="am-u-sm-9 am-cf">
                <div class="am-fl am-fixation" id="picshow">
                    <a href="javascript:;" class="am-uploading-cancel am-icon-btn am-icon-close" id="picdel"></a>
                    <img src="" class="am-uploading"  id="picimg"/>
                </div>
            </li>
        </ul>
<div class="upload-album">
<input type="file" id="picup"  accept="image/*" capture="camera" onchange="shangchuan(this);" />
</div>
    </div>
    <!-- 上传图片 -->
    <!-- 发起按钮 -->
    <div class="am-padding-horizontal-xl am-margin-top-xl">
        <a href="JavaScript:;" class="am-btn am-btn-backg am-round am-btn-block" id="faqi" data-id="1">上 传</a>
    </div>
    <!-- 发起按钮 -->
</body>
</html>
<script type="text/javascript">
   function funcName() {window.location.reload();}
   $("#picshang").click(function(){$("#picup").click();});
    $("#picdel").click(function () {
       var ss= $("#picimg").attr("src");
        $("#picup").val("");
        $("#picshow").css("display", "none");
        deletepic(ss);
    });

    /*发起心愿*/
   $("#faqi").click(function () {
       var fq = $("#faqi").attr("data-id");
       if (fq == "1") {
           $("#faqi").attr("data-id", "0");
           $("#faqi").text("正在提交...");
           var people = $("#doc-ipt-3-1").val();
           var tel = $("#doc-ipt-3-2").val();
           var adr = $("#doc-ipt-3-3").val();
           var xiangqing = $("#doc-ta-1").val();
           var img = $("#picimg").attr("src");
        var options = $("#doc-select-1 option:selected");//获取当前选择项.
        var shequ = options.val();
           if (people != "") {
               if (tel != "") {
                   if (adr != "") {
                       if (xiangqing != "") {
                           /*提交 微心愿*/
                           $.ajax({
                               url: "../../tools/hong****.ashx",
                               data: {
                                   "action": "faqiwxy",
                                   "people": escape(people),
                                   "address": escape(adr),
                                   "tel": tel,
                                   "xq": escape(xiangqing),
                                   "sq": shequ,
                                   "img": img
                               },
                               type: "get",
                          beforeSend: function () {
                         layer.load(2);
                          },
                               dataType: "json",
                               success: function (data) {
                                   if (data.wxy == 1) {
                                       $("#faqi").text("已成功发起!");
                                       setTimeout(funcName,800);
                                   }
                                   else {
                                       $("#faqi").text("发起失败!继续发起");
                                       $("#faqi").attr("data-id", "1");
                                   }
                                   $("#doc-ipt-3-1").val("");
                                   $("#doc-ipt-3-2").val("");
                            layer.closeAll(‘loading‘);
                               },
                               error: function (a, b, c) {
                                   alert(a + "," + b + "," + c);  layer.closeAll(‘loading‘);
                               }
                           });
                           /*----提交 微心愿---*/
                       } else { $("#faqi").text("发起失败!详情不能为空"); $("#faqi").attr("data-id", "1"); }
                   } else { $("#faqi").text("发起失败!联系地址不能为空"); $("#faqi").attr("data-id", "1"); }
               } else { $("#faqi").text("发起失败!联系电话不能为空"); $("#faqi").attr("data-id", "1"); }
           } else { $("#faqi").text("发起失败!联系人不能为空"); $("#faqi").attr("data-id", "1"); }

       }
   })
    /*上传照片*/
   function shangchuan() {
       var form = new FormData();
       form.append("action","faqiwxypic");
       form.append("img",$(‘#picup‘)[0].files[0]); //
                       $.ajax({
                           url: "../../tools/hygypic1.ashx",
                           data:form,
                           async: true,
                           processData: false,
                           contentType: false,
                           type: "post",
                           dataType: "json",
                          beforeSend: function () {
                         layer.load(2);
                          },
                    success: function (data) {
                if (data.status == 1) {
                        $("#picimg").attr("src", "" + data.path+ "");
                        $("#picshow").css("display", "block");
                } else {
                     layer.msg(data.msg);
                }
                     layer.closeAll(‘loading‘);
                           },
                           error: function (a, b, c) {
                               layer.closeAll(‘loading‘);
                           }
                       });
   }
    /*删除照片*/
   function deletepic(urls) {
       var form = new FormData();
       form.append("action", "faqiwxydel");
       form.append("urls", urls);
       form.append("img", $(‘#picup‘)[0].files[0]);
       $.ajax({
           url: "../../tools/hygypic.ashx",
           data: form,
           async: true,
           processData: false,
           contentType: false,
           type: "post",
           dataType: "json",
           success: function (data) {
               if(data.wxy==0){
layer.msg("删除失败");
}
           },
           error: function (a, b, c) {
               alert(a + "," + b + "," + c);
           }
       });
   }
</script>
/*--------ajax上传一张图片并保持图片不反转---------------*/  

public void ProcessRequest(HttpContext context)
        {
            //取得处事类型
            string action = context.Request.Form["action"];
            comment_add(context, action);
        }
        private void comment_add(HttpContext context,string act)
        {
            if (act == "faqiwxypic")
            {
                #region  上传图片
                HttpPostedFile filess = context.Request.Files["img"];
                try
                {
                    if (filess.FileName.Contains("jpg") || filess.FileName.Contains("png"))
                    {
                        string fileName = filess.FileName; // 文件名称
                        string fileName_s = "s_" + DateTime.Now.ToString("yyyyMMddHHmmss") + System.IO.Path.GetExtension(filess.FileName).ToLower(); // 缩略图文件名称
                        string fileName_f = "f_" + DateTime.Now.ToString("yyyyMMddHHmmss") + System.IO.Path.GetExtension(filess.FileName).ToLower();
                        string webFilePath = HttpContext.Current.Server.MapPath("/upload/" + fileName); // 服务器端文件路径
                        string paths = "/upload/" + fileName_s;
                        string webFilePath_s = HttpContext.Current.Server.MapPath(paths);  // 服务器端缩略图路径
                        string webFilePath_f = HttpContext.Current.Server.MapPath("/upload/" + fileName_f);  // 服务器端缩略图路径
                        if (!File.Exists(webFilePath))
                        {
                            try
                            {
                                filess.SaveAs(webFilePath); // 使用 SaveAs 方法保存文件 

                                RemoveRotateFlips(webFilePath, webFilePath_f);
                                File.Delete(webFilePath);
                                MakeThumbnail(webFilePath_f, webFilePath_s, 300, 300, "W"); // 生成缩略图方法
                                File.Delete(webFilePath_f);

                                context.Response.Write("{\"status\": 1, \"path\": \"" + paths + "\"}");
                                return;
                            }
                            catch (Exception ex)
                            {
                                context.Response.Write("{\"status\": 0, \"msg\": \"失败!\"}");
                            }
                        }
                        else
                        {
                            context.Response.Write("{\"status\": 0, \"msg\": \"图片已经存在,请重命名后上传!!\"}");
                        }
                    }
                    else
                    {
                        context.Response.Write("{\"status\": 0, \"msg\": \"文件类型不符!\"}");
                    }

                    context.Response.Write("{\"status\": 0, \"msg\": \"上传失败!\"}");
                    return;
                }
                catch
                {
                    context.Response.Write("{\"status\": 0, \"msg\": \"上传失败!\"}");
                    return;
                }
                #endregion
            }
        }#endregion

        /// <summary>
        /// 移除图片的翻转旋转设置
        /// </summary>
        /// <param name="srcPathName">原文件名</param>
        /// <param name="newPathName">新文件名</param>
        public void RemoveRotateFlips(string srcPathName, string newPathName)
        {
            System.Drawing.Image image = new System.Drawing.Bitmap(srcPathName);//初始化图片对象
            foreach (var p in image.PropertyItems)
            {
                if (p.Id == 0x112)
                {
                    var rft = p.Value[0] == 6 ? System.Drawing.RotateFlipType.Rotate90FlipNone
                            : p.Value[0] == 3 ? System.Drawing.RotateFlipType.Rotate180FlipNone
                            : p.Value[0] == 8 ? System.Drawing.RotateFlipType.Rotate270FlipNone
                            : p.Value[0] == 1 ? System.Drawing.RotateFlipType.RotateNoneFlipNone
                            : System.Drawing.RotateFlipType.RotateNoneFlipNone;
                    p.Value[0] = 0;  //旋转属性值设置为不旋转
                    image.SetPropertyItem(p); //回拷进图片流
                    image.RotateFlip(rft);
                }
            }
            image.Save(newPathName, System.Drawing.Imaging.ImageFormat.Jpeg); //重新保存为正常的图片
            image.Dispose(); //释放图片对象资源
        }

        /// <summary>
        /// 生成缩略图
        /// </summary>
        /// <param name="originalImagePath">源图路径(物理路径)</param>
        /// <param name="thumbnailPath">缩略图路径(物理路径)</param>
        /// <param name="width">缩略图宽度</param>
        /// <param name="height">缩略图高度</param>
        /// <param name="mode">生成缩略图的方式</param>
        public static void MakeThumbnail(string originalImagePath, string thumbnailPath, int width, int height, string mode)
        {
            System.Drawing.Image originalImage = System.Drawing.Image.FromFile(originalImagePath);

            int towidth = width;
            int toheight = height;

            int x = 0;
            int y = 0;
            int ow = originalImage.Width;
            int oh = originalImage.Height;

            switch (mode)
            {
                case "HW"://指定高宽缩放(可能变形)
                    break;
                case "W"://指定宽,高按比例
                    toheight = originalImage.Height * width / originalImage.Width;
                    break;
                case "H"://指定高,宽按比例
                    towidth = originalImage.Width * height / originalImage.Height;
                    break;
                case "Cut"://指定高宽裁减(不变形)
                    if ((double)originalImage.Width / (double)originalImage.Height > (double)towidth / (double)toheight)
                    {
                        oh = originalImage.Height;
                        ow = originalImage.Height * towidth / toheight;
                        y = 0;
                        x = (originalImage.Width - ow) / 2;
                    }
                    else
                    {
                        ow = originalImage.Width;
                        oh = originalImage.Width * height / towidth;
                        x = 0;
                        y = (originalImage.Height - oh) / 2;
                    }
                    break;
                default:
                    break;
            }

            //新建一个bmp图片
            System.Drawing.Image bitmap = new System.Drawing.Bitmap(towidth, toheight);

            //新建一个画板
            System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bitmap);

            //设置高质量插值法
            g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;

            //设置高质量,低速度呈现平滑程度
            g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;

            //清空画布并以透明背景色填充
            g.Clear(System.Drawing.Color.Transparent);

            //在指定位置并且按指定大小绘制原图片的指定部分
            g.DrawImage(originalImage, new System.Drawing.Rectangle(0, 0, towidth, toheight),
            new System.Drawing.Rectangle(x, y, ow, oh),
            System.Drawing.GraphicsUnit.Pixel);

            try
            {
                //以jpg格式保存缩略图
                bitmap.Save(thumbnailPath, System.Drawing.Imaging.ImageFormat.Jpeg);
            }
            catch (System.Exception e)
            {
                throw e;
            }
            finally
            {
                originalImage.Dispose();
                bitmap.Dispose();
                g.Dispose();
            }
        }

   public void ProcessRequest(HttpContext context)
        {
            string action = DTRequest.GetQueryString("action");
            comment_add(context,action);
        }

        private void comment_add(HttpContext context,string act)
        {
  if (act == "faqiwxy")
            {
                string name = System.Web.HttpUtility.UrlDecode(context.Request.QueryString["people"].ToString().Trim());
                string tel = DTRequest.GetQueryString("tel");
                string dizhi = System.Web.HttpUtility.UrlDecode(context.Request.QueryString["address"].ToString().Trim());

                    context.Response.Write("{\"wxy\": 1}");
}
            }

ajax数据交互

原文地址:https://www.cnblogs.com/nbsp12138/p/11113190.html

时间: 2024-11-06 07:10:35

上传数据+上传一张图片的相关文章

重新想象 Windows 8.1 Store Apps (89) - 通信的新特性: 下载数据, 上传数据, 上传文件

原文:重新想象 Windows 8.1 Store Apps (89) - 通信的新特性: 下载数据, 上传数据, 上传文件 [源码下载] 作者:webabcd 介绍重新想象 Windows 8.1 Store Apps 之通信的新特性 下载数据(显示下载进度,将下载数据保存到本地) 上传数据(显示上传进度) 上传文件 示例HTTP 服务端WebServer/HttpDemo.aspx.cs /* * 用于响应 http 请求 */ using System; using System.IO;

【AllJoyn专题】基于AllJoyn和Yeelink的传感器数据上传与指令下行的研究

笔者接触高通物联网框架AllJoyn不太久,但确是被深深地吸引了.在我看来,促进我深入学习的原因有三点:一.AllJoyn开源,对开源的软硬件总会有种莫名的喜爱,尽管也许不会都深入下去:二.顺应潮流,物联网虽远未普及,但已是大势所趋,高通公司在领域布局,致力于打造舒适高效的智能家居场景,推出AllJoyn软件框架,适应了发展趋势:三.文档丰富,开源软件的使用,特别是框架,若没有文档相助,相信没有多少开发者愿意尝试,AllJoyn在这方面做得不错,日后还需做得更好.当然啦,也有些额外原因,包括高通

C#工业物联网和集成系统解决方案的技术路线(数据源、数据采集、数据上传与接收、ActiveMQ、Mongodb、WebApi、手机App)

目       录 工业物联网和集成系统解决方案的技术路线... 1 前言... 1 第一章           系统架构... 3 1.1           硬件构架图... 3 1.2           组件构架图... 4 第二章           技术选型与介绍... 5 2.1           开发环境... 5 2.2           数据源... 5 2.3           数据采集... 5 2.4           数据上传服务... 6 2.5      

Chromium硬件加速渲染的GPU数据上传机制分析

在Chromium中,WebGL端.Render端和Browser端通过命令缓冲区将GPU命令发送给GPU进程执行.GPU命令携带的简单参数也通过命令缓冲区发送给GPU进程,但是复杂参数,例如纹理数据,有可能太大以致命令缓冲区无法容纳,因此需要通过其它机制传递给GPU进程.本文接下来就主要以纹理数据上传为例,分析WebGL端.Render端和Browser端将GPU命令数据传递给GPU进程的机制. 老罗的新浪微博:http://weibo.com/shengyangluo,欢迎关注! WebGL

一个简单实际的Windows服务:实现本地数据上传到服务器

功能:实现本地数据上传到远程服务器 操作实现: 1.发送本地ID到远程服务器进行身份验证,验证成功则可Get到本地需要发送的数据的ID,例如: 本地发送身份ID:key123,验证成功,则远程服务器匹配到该ID所包含的数据条目,例如传回7个ExdID. 2.收到7个ExdID后,本地需要传输数据库中许多数据中的这7个ExdID所对应的数据到远程服务器,远程服务器将收到的数据保存.更新到远程数据库中. 注意问题: 1.为保证带宽负载轻松,不能频繁往远程服务器传输数据. 2.考虑到断网情况,断网之间

iOS开发--http协议 post上传数据

NSDictionary *dic=[NSDictionary dictionaryWithObjectsAndKeys:@"123",@"longitude",@"30",@"latitude",@"上传数据",@"message",nil];    //dictionaryToNSJoson    NSError *err=nil;    NSData *jasonData=[NSJ

Amazon MWS 上传数据 (一) 设置服务

Amazon 上传数据的流程为: 通过 SubmitFeed 操作.加密标头和所有必需的元数据(包括 FeedType 的值在内),来提交 XML 或文本型数据文件.正如亚马逊 MWS的所有提交内容一样,您还必须包括验证信息.SubmitFeed 操作可返回 FeedSubmissionId 的值,您可以使用该值,通过 GetFeedSubmissionList 操作,对上传数据状态进行定期检查. 如果亚马逊 MWS仍在处理请求,则 GetFeedSubmissionList 操作的 FeedP

Struts , Jsp 上传数据乱码问题

今天拿出以前的代码,想重构.却发现运行起来都是乱码,原来都是好好的.心里一着急,就上网去搜索答案. 看了一大堆的Struts中文乱码解决办法. 我总结一下,(1)Jsp方面,最好写上<%@ page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%> (2) Struts.xml配置上,配置i18n.encoding 属性,值也为UTF-8(最好!) (3) 如果还是不行,则就要自己写

_00017 Flume的体系结构介绍以及Flume入门案例(往HDFS上传数据)

博文作者:妳那伊抹微笑 个性签名:世界上最遥远的距离不是天涯,也不是海角,而是我站在妳的面前,妳却感觉不到我的存在 技术方向:hadoop,数据分析与挖掘 转载声明:可以转载, 但必须以超链接形式标明文章原始出处和作者信息及版权声明,谢谢合作! qq交流群:214293307  (期待与你一起学习,共同进步) # 学习前言 想学习一下Flume,网上找了好多文章基本上都说的很简单,只有一半什么的,简直就是坑爹,饿顿时怒火就上来了,学个东西真不容易,然后自己耐心的把这些零零碎碎的东西整理整理,各种