上傳數據+上傳一張圖片
<!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}"); } }
相關文章
- 1. 上傳圖片多張
- 2. thinkphp 上傳多張圖片
- 3. Java多張圖片上傳
- 4. axios上傳多張圖片
- 5. jq 上傳多張圖片
- 6. 上傳多張圖片
- 7. 數據庫圖片上傳
- 8. element-ui上傳一張圖片後隱藏上傳按鈕
- 9. js一次上傳多張圖片
- 10. element-ui 上傳組件上傳一張圖片後隱藏上傳按鈕
- 更多相關文章...
- • PHP 文件上傳 - PHP教程
- • 如何幹擾TCP數據傳輸？ - TCP/IP教程
- • Flink 數據傳輸及反壓詳解
- • Tomcat學習筆記（史上最全tomcat學習筆記）
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 上傳圖片多張
- 2. thinkphp 上傳多張圖片
- 3. Java多張圖片上傳
- 4. axios上傳多張圖片
- 5. jq 上傳多張圖片
- 6. 上傳多張圖片
- 7. 數據庫圖片上傳
- 8. element-ui上傳一張圖片後隱藏上傳按鈕
- 9. js一次上傳多張圖片
- 10. element-ui 上傳組件上傳一張圖片後隱藏上傳按鈕