结合weui和百度webupload传多图例子

发布时间：2018/3/7 15:54:35 次浏览作者:admin

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="failure.aspx.cs" Inherits="NetWing.BPM.Admin.weixin.failure" %>

//js与CSS在底部，点击可下载
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>故障申报</title>
     
    <script src="../../scripts/jquery-1.10.2.min.js"></script>
    <script src="/scripts/webuploader/webuploader.min.js"></script>
    
    <link href="../../weixin/weiui/css/jquery-weui.min.css" rel="stylesheet" />
    <link href="../../weixin/weiui/lib/weui.min.css" rel="stylesheet" />

    <script>
        //$(function () {
        //    FastClick.attach(document.body);
        //});
    </script>
    <script src="../../weixin/weiui/js/jquery-weui.min.js"></script>

    <script>

        $(function () {
            //alert();
            //    FastClick.attach(document.body);
        });
    </script>

    <style>
        /*这里重构了上传组件样式-没有引用webuploader自带的样式*/
        .weui-uploader__input-box {
            width: 77px;
            height: 77px;
        }

        .webuploader-pick {
            width: 77px;
            height: 77px
        }

        .webuploader-container {
            position: relative;
        }

        .webuploader-element-invisible {
            position: absolute !important;
            clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
            clip: rect(1px,1px,1px,1px);
        }

        .webuploader-pick {
            position: relative;
            display: inline-block;
            cursor: pointer;
            /*background: #00b7ee;*/
            padding: 10px 15px;
            color: #fff;
            text-align: center;
            border-radius: 3px;
            overflow: hidden;
        }

        .webuploader-pick-hover {
            /*background: #00a2d4;*/
        }

        .webuploader-pick-disable {
            opacity: 0.6;
            pointer-events: none;
        }
    </style>

</head>
<body>
    <form id="form1" class="layui-form layui-form-pane" runat="server">
        <div class="weui-cells__title">故障申报</div>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <textarea runat="server" id="errcontent" class="weui-textarea" placeholder="请输入故障原因.." rows="3"></textarea>
                    <div class="weui-textarea-counter"><span>0</span>/200</div>
                </div>
            </div>
        </div>

        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <div class="weui-uploader">

                        <div class="weui-uploader__bd">
                            <ul class="weui-uploader__files" id="uploaderFiles">
                                
                            </ul>

                            <div id="filePicker" class="weui-uploader__input-box"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="weui-btn-area">
            <asp:Button ID="guzhan" runat="server" CssClass="weui-btn weui-btn_primary" Text="申报故障" OnClick="guzhan_Click" />
        </div>
    </form>
    
    
    <script>
        // 初始化百度Web Uploader S
        var uploader = WebUploader.create({
            // 选完文件后，是否自动上传。
            auto: true,
            // swf文件路径
            swf: '/script/webuploader/Uploader.swf',
            // 文件接收服务端。
            server: '/Wzsh_product/ashx/Wzsh_productHandler.ashx?json={"action":"addimg"}',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: { id: top.$('#filePicker'), multiple: false },
            //fileNumLimit: 1,
            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });
        // 文件上传成功
        uploader.on('uploadSuccess', function (file, response) {

            var temp = '<li class="weui-uploader__file" style="background-image:url(' + response.imgurl + ')"><input type="hidden" name="img_url" value="' + response.imgurl + '"></li>';
            $("#uploaderFiles").append(temp);
            top.$('#txt_img_url').val(response.imgurl);
            $.toptip(response.msg, 'success');
            //alert(response.msg);
        });
                // 初始化Web Uploader E
    </script>
</body>
</html>

//以上为上传插件及程序，以下为后台程序

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using NetWing.Common;
using NetWing.Common.Other;
using NetWing.BPM.Core;
using NetWing.BPM.Core.Bll;
using NetWing.Model;
using NetWing.Bll;
using NetWing.Common.Data.SqlServer;
using System.Data;
using System.Data.Sql;
using System.Data.SqlClient;

namespace NetWing.BPM.Admin.weixin
{
    public partial class failure : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void guzhan_Click(object sender, EventArgs e)
        {
            string errcontent = this.errcontent.Value;
            if (string.IsNullOrEmpty(errcontent))//如果是空
            {
                Response.Redirect("err.aspx?url=failure.aspx&content=故障内容不能为空,多少添几个字吧!");
            }
            else
            {
                string uid = CookieHelper.GetCookie("currentUserID");//得到用户id
                string depid = CookieHelper.GetCookie("currentDepID");
                string openid= CookieHelper.GetCookie("openid");//openid
                Wzsh_failureModel fm = new Wzsh_failureModel();
                fm.userid = int.Parse(uid);
                fm.username= HttpUtility.UrlDecode(CookieHelper.GetCookie("currentTrueName"));//真实姓名
                fm.results = "未处理";//处理状态
                fm.errcontent = this.errcontent.Value;
                fm.openid= CookieHelper.GetCookie("openid");//openid
                fm.depid = int.Parse(depid);//部门所有者
                fm.owner = int.Parse(uid);//数据所有者
                fm.pics = Request["img_url"];
                fm.add_time = DateTime.Now;//添加时间
                Wzsh_failureBll.Instance.Add(fm);
                wxhelper.SendText(openid, fm.username + "您好!您提交的故障["+fm.errcontent+"]已受理。如有疑问：请拨打13708843484咨询。[五纵四恒]");
                Response.Redirect("ok.aspx?url=usercenter.aspx&content=申报成功!请等待管理员处理!");
            }

        }

    }
}

点击链接即可下载

所有js,css一大包：

/upload/201803/07/201803071554113662.rar

结合weui和百度webupload传多图例子

发布时间：2018/3/7 15:54:35 次浏览 作者:admin

点击链接即可下载

发布时间：2018/3/7 15:54:35 次浏览作者:admin