正文
Weui 文件上传完整版示例
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
部分思路借用网友,部分是自己细化的. 先声明.
不多说,参考代码
@{
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>
