<!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数据交互