<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="piclist.aspx.cs" Inherits="XGHUNLIAN.admin.member.piclist" %> <%@ Import Namespace="XGHUNLIAN.Common" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>会员照片列表</title> <link href="../../css/style.css" rel="stylesheet" /> <script type="text/javascript" src="../../scripts/jquery/jquery-1.10.2.min.js"></script> <script src="../../js/layui/layui.all.js" type="text/javascript"></script> <link href="../../js/layui/css/layui.css" rel="stylesheet" type="text/css" /> <style type="text/css"> .userheadimg { width: 50px; height: 50px; overflow: hidden; top: 10px; left: 10px; z-index: 2; border-radius: 50px; border: #fff solid 1px; } .piclist { width: 100%; text-align: center; } .piclist ul { margin: 10px; } .piclist ul li { padding: 5px; float: left; text-align: center; background: #fff; border: #eee solid 1px; } .piclist ul li a { color: #000; text-decoration: none; } .piclist ul li .memberimg { width: 200px; height: 200px; border-radius: 2px; overflow: hidden; } .piclist ul li .del { width: 32px; height: 32px; overflow: hidden; } </style> </head> <body id="weixin" style="background: #fff;"> <form id="form1" runat="server"> <div class="hd"> <h3> 会员照片列表</h3> </div> <div class="bd" style="padding-top: 10px;"> <div class="content"> <div class="tab-content"> <dl> <dt>头像：</dt> <dd> <asp:Image ID="Imgheadimgurl" runat="server" CssClass="userheadimg" /> </dd> </dl> <dl> <dt>UID：</dt> <dd> <asp:Label ID="labId" runat="server"></asp:Label> </dd> </dl> <dl> <dt>OPENID：</dt> <dd> <asp:Label ID="labopenid" runat="server"></asp:Label> </dd> </dl> <dl> <dt>微信昵称：</dt> <dd> <asp:Label ID="labnickname" runat="server"></asp:Label> </dd> </dl> <dl> <dt>真实名称：</dt> <dd> <asp:Label ID="labzsxm" runat="server"></asp:Label> </dd> </dl> <dl> <dt>电话号码：</dt> <dd> <asp:Label ID="labmob" runat="server"></asp:Label> </dd> </dl> </div> <br /> <div class="piclist"> <ul> <asp:Repeater ID="rptList" runat="server" onitemcommand="Repeater1_ItemCommand"> <ItemTemplate> <li> <%# htmlstr(Eval("imgurl").ToString())%> <br /> <asp:LinkButton ID="delLinkButton" runat="server" CommandName="del" CommandArgument='<%# Eval("id") %>'><img src="../../image/del_pic.png" class="del" title="删除照片" /></asp:LinkButton> </li> </ItemTemplate> <FooterTemplate> <div style="clear: both;"> </div> </FooterTemplate> </asp:Repeater> </ul> </div> </div> </div> <div class="layui-upload"> <button type="button" class="layui-btn layui-btn-normal" id="SelectList"> 选择多文件</button> <div class="layui-upload-list"> <table class="layui-table"> <thead> <tr> <th> 文件名 </th> <th> 大小 </th> <th> 状态 </th> <th> 操作 </th> </tr> </thead> <tbody id="FileList"> </tbody> </table> </div> <button type="button" class="layui-btn" id="ListAction"> 开始上传</button> </div> <div class="ft"> <div class="content"> <span class="button_b"><a href="#" onclick="javascript:history.back(-1);">返回上一页</a></span> </div> </div> <div id="outerdiv" style="position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.7); z-index: 2; width: 100%; height: 100%; display: none;"> <div id="innerdiv" style="position: absolute;"> <img id="bigimg" style="border: 5px solid #fff;" src="" /> </div> </div> <asp:HiddenField ID="hidopenid" runat="server" /> <script type="text/javascript"> $(function () { $(".memberimg").click(function () { var _this = $(this); //将当前的pimg元素作为_this传入函数 imgShow("#outerdiv", "#innerdiv", "#bigimg", _this); }); }); function imgShow(outerdiv, innerdiv, bigimg, _this) { var src = _this.attr("src"); //获取当前点击的pimg元素中的src属性 $(bigimg).attr("src", src); //设置#bigimg元素的src属性 /*获取当前点击图片的真实大小，并显示弹出层及大图*/ $("<img/>").attr("src", src).load(function () { var windowW = $(window).width(); //获取当前窗口宽度 var windowH = $(window).height(); //获取当前窗口高度 var realWidth = this.width; //获取图片真实宽度 var realHeight = this.height; //获取图片真实高度 var imgWidth, imgHeight; var scale = 0.8; //缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放 if (realHeight > windowH * scale) {//判断图片高度 imgHeight = windowH * scale; //如大于窗口高度，图片高度进行缩放 imgWidth = imgHeight / realHeight * realWidth; //等比例缩放宽度 if (imgWidth > windowW * scale) {//如宽度扔大于窗口宽度 imgWidth = windowW * scale; //再对宽度进行缩放 } } else if (realWidth > windowW * scale) {//如图片高度合适，判断图片宽度 imgWidth = windowW * scale; //如大于窗口宽度，图片宽度进行缩放 imgHeight = imgWidth / realWidth * realHeight; //等比例缩放高度 } else {//如果图片真实高度和宽度都符合要求，高宽不变 imgWidth = realWidth; imgHeight = realHeight; } $(bigimg).css("width", imgWidth); //以最终的宽度对图片缩放 var w = (windowW - imgWidth) / 2; //计算图片与窗口左边距 var h = (windowH - imgHeight) / 2; //计算图片与窗口上边距 $(innerdiv).css({ "top": h, "left": w }); //设置#innerdiv的top和left属性 $(outerdiv).fadeIn("fast"); //淡入显示#outerdiv及.pimg }); $(outerdiv).click(function () {//再次点击淡出消失弹出层 $(this).fadeOut("fast"); }); } </script> <script> layui.use('upload', function () { var $ = layui.jquery, upload = layui.upload; //多文件列表 var FileListView = $('#FileList'), uploadListIns = upload.render({ elem: '#SelectList', // url: '/upload/', url: ' ../../tools/UploadFile.ashx?openid=' + $("#hidopenid").val() + '', accept: 'file', multiple: true, auto: false, bindAction: '#ListAction', choose: function (obj) { var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列 //读取本地文件 obj.preview(function (index, file, result) { var tr = $(['<tr id="upload-' + index + '">', '<td>' + file.name + '</td>', '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>', '<td>等待上传</td>', '<td>', '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>', '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>', '</td>', '</tr>'].join('')); //单个重传 tr.find('.demo-reload').on('click', function () { obj.upload(index, file); }); //删除 tr.find('.demo-delete').on('click', function () { delete files[index]; //删除对应的文件 tr.remove(); uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选 }); FileListView.append(tr); }); }, done: function (res, index, upload) { if (res.code == 0) { //上传成功 var tr = FileListView.find('tr#upload-' + index), tds = tr.children(); tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>'); tds.eq(3).html(''); //清空操作 return delete this.files[index]; //删除文件队列已经上传成功的文件 } this.error(index, upload); }, allDone: function(obj){ //当文件全部被提交后，才触发 location.reload(); }, error: function (index, upload) { var tr = FileListView.find('tr#upload-' + index), tds = tr.children(); tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>'); tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传 } }); }); </script> </form> </body> </html>
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.IO; namespace XGHUNLIAN.tools { /// <summary> /// UploadFile 的摘要说明 /// </summary> public class UploadFile : IHttpHandler { public void ProcessRequest(HttpContext context) { //context.Response.ContentType = "text/plain"; //context.Response.Write("Hello World"); string shipin = "*.avi *.rmvb *.rm *.asf *.divx *.mpg *.mpeg *.mpe *.wmv *.mp4 *.mkv *.vob"; string allowExtension =string.Join("|",new string []{ ".jpg", ".jpeg", ".gif", ".bmp", ".png", ".JPG", ".JPEG", ".GIF", ".BMP", ".PNG" }); if (context.Request.Files.Count > 0) { for (int i = 0; i < context.Request.Files.Count; i++) { HttpPostedFile filePost = context.Request.Files[i]; // 获取上传的文件 string aFile = filePost.FileName; string aLastName = aFile.Substring(aFile.LastIndexOf(".") + 1, (aFile.Length - aFile.LastIndexOf(".") - 1)); //扩展名 if (shipin.IndexOf(aLastName) == -1 && allowExtension.IndexOf(aLastName) == -1) { context.Response.Write("{\"code\":\"1\",\"data\":\"\"}"); context.Response.End(); } string filename = ""; string filePath = SaveExcelFile(filePost,ref filename); // 保存文件并获取文件路径 BLL.wei_Member bll = new BLL.wei_Member(); if (bll.AddImgUrl(context.Request.QueryString["openid"], filename)) { context.Response.Write("{\"code\":\"0\",\"data\":\"" + filename + "\"}"); context.Response.End(); } context.Response.Write("{\"code\":\"1\",\"data\":\"\"}"); context.Response.End(); } } } public bool IsReusable { get { return false; } } public string SaveExcelFile(HttpPostedFile file,ref string filename_) { try { var fileName = file.FileName.Insert(file.FileName.LastIndexOf('.'), "-" + DateTime.Now.ToString("yyyyMMddHHmmssfff")); var filePath = Path.Combine(HttpContext.Current.Server.MapPath("~/Upload/Image"), fileName); string directoryName = Path.GetDirectoryName(filePath); if (!Directory.Exists(directoryName)) { Directory.CreateDirectory(directoryName); } file.SaveAs(filePath); filename_ = fileName; return filePath; } catch { return string.Empty; } } } }