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">0span>/2div> 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>
//引入示例
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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>