<%@ 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; } } } }