上传数据+上传一张图片

Posted nbsp12138

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了上传数据+上传一张图片相关的知识,希望对你有一定的参考价值。

<!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-albumposition: absolute;top: -1000px;
        #picshowdisplay: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数据交互

 

以上是关于上传数据+上传一张图片的主要内容,如果未能解决你的问题,请参考以下文章

thinkPHP3.2.3文件上传类多张图片上传怎么只有第一张图片被上传

thinkphp关于上传图片到数据库里面大小的问题

JS上传图片怎么限制只能选择一张图片上传

我要在一个网页上传一张图片到服务器,然后保存图片的地址,在另一个页面显示图片

微信jssdk上传图片,一张一张的上传 和 一次性传好几张

微信jssdk上传图片,一张一张的上传 和 一次性传好几张