微网页html+ashx提交数据
2017-05-04 14:47 穷极思变 阅读(512) 评论(0) 收藏 举报前端页面
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title></title>
<link href="css/mobile.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/0.3.0/weui.css" />
<script language="javascript" type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body mpa-version="4.1.3" mpa-extension-id="ibefaeehajgcpooopoegkifhgecigeeg">
<input id="hiddenImage" type="hidden" />
<div class="proj_name" style="font-size:18px; line-height: 1.6em; ">XXXX</div>
<!-- include header -->
<div style="margin: 20px auto 15px auto; width: 95%; max-width: 500px; ">
</div>
<div class="ques_info" style="margin: 15px auto 15px auto; width: 95%; max-width: 500px; ">
<table width="95%" border="0" cellspacing="5" cellpadding="5" align="center" style="margin-top:10px;">
<tbody>
<tr>
<td nowrap="" style="width:68px;font-weight:bold;">姓名：</td>
<td><input type="text" id="candname" name="candname" maxlength="20" value="" style="width:90%;"></td>
</tr>
<tr>
<td nowrap="" style="width:68px;font-weight:bold;">电话：</td>
<td><input type="text" id="candphone" name="candphone" maxlength="20" value="" style="width:90%;"></td>
</tr>
<tr>
<td colspan="2">
<div class="container">
<div class="weui_cells_title">上传</div>
<div class="weui_cells weui_cells_form">
<div class="weui_cell">
<div class="weui_cell_bd weui_cell_primary">
<div class="weui_uploader">
<div class="weui_uploader_hd weui_cell">
<div class="weui_cell_bd weui_cell_primary">图片上传</div>
<div class="weui_cell_ft js_counter">0/6</div>
</div>
<div class="weui_uploader_bd">
<ul class="weui_uploader_files">
<!-- 预览图插入到这 -->
</ul>
<div class="weui_uploader_input_wrp">
<input class="weui_uploader_input js_file" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="weui_dialog_alert" style="display: none;">
<div class="weui_mask"></div>
<div class="weui_dialog">
<div class="weui_dialog_hd">
<strong class="weui_dialog_title">警告</strong>
</div>
<div class="weui_dialog_bd">弹窗内容，告知当前页面信息等</div>
<div class="weui_dialog_ft">
<a href="javascript:;" class="weui_btn_dialog primary">确定</a>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/zepto/1.1.6/zepto.min.js"></script>
</td>
</tr>
</tbody>
</table>
</div>
<div class="btn_area" style="margin: 20px auto 15px auto; width: 95%; max-width: 500px; ">
<div class="btn" id="btn_sub" style="width:100%; ">提 交</div>
</div>
<script>
$("#btn_sub").click(function () {
if ($('#candname').val().length < 1) {
$.weui.alert({ text: '[ 姓名 ] 输入有误，请重新输入！' });
return false;
}
$.ajax({
type: "post",
url: "_Handler/Handler.ashx",
data: {
candname: $('#candname').val(),
candphone: $('#candphone').val()
},
success: function (result) {
if (result == "1") {
$.weui.alert({ title: '提示', text: '提交成功!' });
}
else if (result == "0") {
$.weui.alert({ text: '提交失败!' });
}
}
});
});
$.weui = {};
$.weui.alert = function (options) {
options = $.extend({ title: '警告', text: '警告内容' }, options);
var $alert = $('.weui_dialog_alert');
$alert.find('.weui_dialog_title').text(options.title);
$alert.find('.weui_dialog_bd').text(options.text);
$alert.on('touchend click', '.weui_btn_dialog', function () {
$alert.hide();
});
$alert.show();
};
$(function () {
// 允许上传的图片类型
//var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
var allowTypes = ['image/jpg', 'image/jpeg'];
// 1024KB，也就是 1MB
var maxSize = 5 * 1024 * 1024;
// 图片最大宽度
var maxWidth = 300;
// 最大上传图片数量
var maxCount = 6;
$('.js_file').on('change', function (event) {
var files = event.target.files;
// 如果没有选中文件，直接返回
if (files.length === 0) {
return;
}
for (var i = 0, len = files.length; i < len; i++) {
var file = files[i];
var reader = new FileReader();
// 如果类型不在允许的类型范围内
if (allowTypes.indexOf(file.type) === -1) {
$.weui.alert({ text: '该类型不允许上传' });
continue;
}
if (file.size > maxSize) {
$.weui.alert({ text: '图片太大，不允许上传' });
continue;
}
if ($('.weui_uploader_file').length >= maxCount) {
$.weui.alert({ text: '最多只能上传' + maxCount + '张图片' });
return;
}
reader.onload = function (e) {
var img = new Image();
img.onload = function () {
// 不要超出最大宽度
var w = Math.min(maxWidth, img.width);
// 高度按比例计算
var h = img.height * (w / img.width);
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 设置 canvas 的宽度和高度
canvas.width = w;
canvas.height = h;
ctx.drawImage(img, 0, 0, w, h);
var base64 = canvas.toDataURL('image/jpeg');
// 插入到预览区
var $preview = $('<li class="weui_uploader_file weui_uploader_status" style="background-image:url(' + base64 + ')"><div class="weui_uploader_status_content">0%</div></li>');
$('.weui_uploader_files').append($preview);
var num = $('.weui_uploader_file').length;
$('.js_counter').text(num + '/' + maxCount);
// 然后假装在上传，可以post base64格式，也可以构造blob对象上传，也可以用微信JSSDK上传
var newCanvas = document.createElement('canvas');
var newCtx = newCanvas.getContext('2d');
newCanvas.width = img.width;
newCanvas.height = img.height;
newCtx.drawImage(img, 0, 0, img.width, img.height);
var newBase64 = newCanvas.toDataURL('image/jpeg', 1.0).toString().replace(/\+/g, "%2B");
$.ajax({
type: "post",
url: "_Handler/ImageUpload.ashx",
data: {
image: newBase64,
},
success: function (result) {
var image = $('#hiddenImage').val();
if (image == '') {
$('#hiddenImage').val(result);
}
else {
$('#hiddenImage').val(image + ';' + result);
}
}
});
var progress = 0;
function uploading() {
$preview.find('.weui_uploader_status_content').text(++progress + '%');
if (progress < 100) {
setTimeout(uploading, 30);
}
else {
// 如果是失败，塞一个失败图标
//$preview.find('.weui_uploader_status_content').html('<i class="weui_icon_warn"></i>');
$preview.removeClass('weui_uploader_status').find('.weui_uploader_status_content').remove();
}
}
setTimeout(uploading, 30);
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
}
});
});
</script>
<div class="mpa-sc image-gatherer mpa-rootsc" data-z="100" style="display: block;" id="mpa-rootsc-image-gatherer"></div><div class="mpa-sc notifier mpa-rootsc" data-z="110" style="display: block;" id="mpa-rootsc-notifier"></div>
</body>
</html>
注意点:
var newBase64 = newCanvas.toDataURL('image/jpeg', 1.0).toString().replace(/\+/g, "%2B");
这里将图片转化为base64,然后将base64中的+号替换为'%2B'
图片上传处理:
string image = context.Request["image"].ToString().Replace("data:image/jpeg;base64,", "");
string result = Base64StringToImage(image);
//base64编码的文本 转为 图片
private string Base64StringToImage(string baseImages)
{
try
{
string dummyData = baseImages.Trim().Replace("%2B", "+").Replace("%", "").Replace(",", "");
if (dummyData.Length % 4 > 0)
{
dummyData = dummyData.PadRight(dummyData.Length + 4 - dummyData.Length % 4, '=');
}
byte[] arr = Convert.FromBase64String(dummyData);
MemoryStream ms = new MemoryStream(arr);
Bitmap bmp = new Bitmap(ms);
string path = "/files/" + DateTime.Now.ToString("yyyy-MM-dd") + "/";
if (!Directory.Exists(HttpContext.Current.Server.MapPath(path)))
{
Directory.CreateDirectory(HttpContext.Current.Server.MapPath(path));
}
string fileName = Guid.NewGuid().ToString() + ".jpg";
bmp.Save(HttpContext.Current.Server.MapPath(path) + fileName, System.Drawing.Imaging.ImageFormat.Jpeg);
ms.Close();
return path + fileName;
}
catch (Exception ex)
{
throw ex;
}
}
参考:
使用weui uploader 上传
ajax传数据和图片(base64格式)
浙公网安备 33010602011771号