部分思路借用网友,部分是自己细化的. 先声明.
不多说,参考代码
@{ ViewBag.Title = "费用填报"; Layout = "~/Views/Shared/_MForm.cshtml"; } <html > <head> <meta name="viewport" content="width=device-width" /> </head> <body ontouchstart> <header class="mwapp-header"> <div id="back" class="mwapp-header-icon-back"><span></span></div> <div class="mwapp-header-title">费用填报</div> </header> <div class="weui-cells weui-cells_form"> <div class="weui-cell"> <div class="weui-cell__hd"><label for="" class="weui-label">派车单号</label></div> <div class="weui-cell__bd"> <input class="weui-input" type="text" value="TRPSH201808000071" disabled> </div> </div> <div class="weui-cell"> <div class="weui-cell__hd"><label for="FeeName" class="weui-label">费用项</label></div> <div class="weui-cell__bd"> <input class="weui-input" id="FeeName" type="text" value=""> </div> </div> <div class="weui-cell"> <div class="weui-cell__hd"><label for="Amount" class="weui-label">金额</label></div> <div class="weui-cell__bd"> <input class="weui-input" type="number" id="Amount" placeholder="请输入金额"> </div> </div> <div class="weui-cell"> <div class="weui-cell__hd"><label for="time-inline" class="weui-label">数量</label></div> <div class="weui-cell__bd"> <input class="weui-input" type="number" placeholder="请输入数量,默认1" value="1" id="FeeCount"> </div> </div> <div class="weui-cell"> <div class="weui-cell__hd"><label for="InvoiceType" class="weui-label">发票类型</label></div> <div class="weui-cell__bd"> <input class="weui-input" id="InvoiceType" type="text" value=""> </div> </div> <div class="weui-cells__title">备注</div> <div class="weui-cells"> <div class="weui-cell"> <div class="weui-cell__bd"> <input class="weui-input" id="Description" type="text" placeholder="请输入备注"> </div> </div> </div> <div class="weui-cell"> <div class="weui-cell__bd"> <div class="weui-uploader"> <div class="weui-uploader__hd"> <p class="weui-uploader__title">附件上传:</p> <div class="weui-uploader__info"><span id="uploadCount">0</span>/2</div> </div> <div class="weui-uploader__bd"> <ul class="weui-uploader__files" id="uploaderFiles"> </ul> <div class="weui-uploader__input-box"> <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple=""> </div> </div> </div> </div> </div> </div> <div class="weui-gallery" id="gallery"> <span class="weui-gallery__img" id="galleryImg"></span> <div class="weui-gallery__opr"> <a href="javascript:" class="weui-gallery__del"> <i class="weui-icon-delete weui-icon_gallery-delete"></i> </a> </div> </div> <div class="weui-btn-area"> <a class="weui-btn weui-btn_primary" href="javascript:" id="btnsaveCharge">提交费用</a> </div> </body> </html>
<script>
var disno = request('disno');
$(function() {
$("#back").click(function() {
location.href = '/TMS.App/CargoCharge/Index';
});
$("#FeeName").picker({
cols: [
{
textAlign: 'center',
values: ['内陆运费', '冷藏费', '压夜费']
}
],
onChange: function (p, v, dv) {
},
onClose: function (p, v, d) {
if (v != null && v.length > 0) {
$("#FeeName").val(v[0]);
}
}
});
$("#InvoiceType").picker({
cols: [
{
textAlign: 'center',
values: ['普通发票', '专用发票']
}
],
onChange: function (p, v, dv) {
},
onClose: function (p, v, d) {
if (v != null && v.length > 0) {
$("#InvoiceType").val(v[0]);
}
}
});
// 允许上传的图片类型
var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
var maxSize = 1024 * 1024*10; // 10240KB，也就是 10MB
var maxWidth = 1900; // 图片最大宽度
var maxCount = 2;// 最大上传图片数量
//
var tmpl = '<li class="weui-uploader__file" id="#ImgID#" style="background-image:url(#url#)"><div class="weui_uploader_status_content">0%</div></li>',
$gallery = $("#gallery"),
$galleryImg = $("#galleryImg"),
$uploaderInput = $("#uploaderInput"),
$uploaderFiles = $("#uploaderFiles");
$uploaderInput.on("change", function (e) {
files = e.target.files;
// 如果没有选中文件，直接返回
if (files.length === 0) {
return;
}
for (var i = 0, len = files.length; i < len; ++i) {
var file = files[i];
var imgID = genGUID();
var reader = new FileReader();
var fileType = file.type;
// 如果类型不在允许的类型范围内
if (allowTypes.indexOf(file.type) === -1) {
$.toast('该类型不允许上传' + fileType, "forbidden");
continue;
}
if (file.size > maxSize) {
$.toast("图片太大，不允许上传", "forbidden");
continue;
}
if ($('.weui-uploader__file').length >= maxCount) {
$.toast('最多只能上传' + maxCount + '张图片', "forbidden");
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(fileType,0.6); //0.6指的是压缩60%
// 插入到预览区
$uploaderFiles.append($(tmpl.replace('#url#', base64).replace('#ImgID#', imgID)));
var num = $('.weui-uploader__file').length;
$('#uploadCount').text(num);
// 模拟上传进度
var progress = 0;
function uploading() {
$uploaderFiles.find('.weui_uploader_status_content').text(++progress + '%');
if (progress < 100) {
setTimeout(uploading, 30);
} else {
$uploaderFiles.removeClass('weui_uploader_status').find('.weui_uploader_status_content').remove();//清除上传进度图标
}
}
setTimeout(uploading, 30);
};
img.src = e.target.result;
//这里实现上传
//$.ajax({});
}; reader.readAsDataURL(file); } }); var index; //第几张图片 $uploaderFiles.on("click", "li", function () { index = $(this).index(); $galleryImg.attr("style", this.getAttribute("style")); $gallery.fadeIn(100); }); $gallery.on("click", function () { $gallery.fadeOut(100); }); //删除图片 $(".weui-gallery__del").click(function () { $uploaderFiles.find("li").eq(index).remove(); var num = $('.weui-uploader__file').length; $('#uploadCount').text(num); }); $("#btnsaveCharge").click(function () { //或者在这里实现批量上传, 不建议批量上传 }); }); //生成guid function genGUID() { var G1 = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1) + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); var G2 = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1) + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); return (G1 + G2); } </script>
//引入示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 移动设备 viewport --> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui"> <meta name="author" content="mcp"> <link href="~/Content/scripts/weui/jquery-weui.css" rel="stylesheet" /> <link href="~/Content/scripts/weui/weui.css" rel="stylesheet" /> <link href="~/Content/scripts/weui/weui-ext.css" rel="stylesheet" /> </head> <body> <script src="~/Content/scripts/weui/jquery.min.js" charset="utf-8"></script> <script src="~/Content/scripts/weui/jquery-weui.js" charset="utf-8"></script> <script src="~/Content/scripts/weui/jquery-weui.js" charset="utf-8"></script> <script src="~/Content/scripts/weui/mobile-utils.js" charset="utf-8"></script> <script src="~/Content/scripts/weui/min/fastclick.js"></script> @RenderBody() </body> </html>
