layui 批量上传
<%@ 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 > )
{
for (int i = ; i < context.Request.Files.Count; i++)
{
HttpPostedFile filePost = context.Request.Files[i]; // 获取上传的文件
string aFile = filePost.FileName;
string aLastName = aFile.Substring(aFile.LastIndexOf(".") + , (aFile.Length - aFile.LastIndexOf(".") - )); //扩展名 if (shipin.IndexOf(aLastName) == - && allowExtension.IndexOf(aLastName) == -)
{
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;
}
}
}
}
layui 批量上传的更多相关文章
- layui 批量上传文件 + 后台 用servlet3.0接收【我】
前台代码: [主要参照layui官方 文件上传示例 https://www.layui.com/demo/upload.html] <!DOCTYPE html> <html> ...
- 带进度条的文件批量上传插件uploadify
有时项目中需要一个文件批量上传功能时,个人认为uploadify是快速简便的解决方案. 先上效果图: 一. 下载uploadify 从官网下载uploadify的Flash版本(Flash版本免费,另 ...
- Discuz模拟批量上传附件发帖
简介 对于很多用discuz做资源下载站来说,一个个上传附件,发帖是很繁琐的过程.如果需要批量上传附件发帖,就需要去模拟discuz 上传附件的流程. 模拟上传 discuz 附件逻辑 dz附件储存在 ...
- Mvc利用淘宝Kissy uploader实现图片批量上传附带瀑布流的照片墙
前言 KISSY 是由阿里集团前端工程师们发起创建的一个开源 JS 框架.它具备模块化.高扩展性.组件齐全,接口一致.自主开发.适合多种应用场景等特性.本人在一次项目中层使用这个uploader组件. ...
- 利用uploadify+asp.net 实现大文件批量上传。
前言 现在网上文件上传组件随便一搜都是一大堆,不过看大家一般都在用uploadify这个来上传文件.由于项目需要,我在来试了一下.因为第一次使用,也遇到了很多问题,特此记录! ------------ ...
- uploadify文件批量上传
uploadify能够时间文件的批量上传,JS文件包下载地址,使用说明可以参考官网文档(http://www.uploadify.com/documentation/) 使用方法如下代码: $(&qu ...
- 文件上传和下载（可批量上传）——Spring（三）
在文件上传和下载(可批量上传)——Spring(二)的基础上,发现了文件下载时,只有在Chrome浏览器下文件名正常显示,还有发布到服务器后,不能上传到指定的文件夹目录,如上传20160310.txt ...
- ux.plup.File plupload 集成 ux.plup.FileLis 批量上传预览
//plupload 集成 Ext.define('ux.plup.File', { extend: 'Ext.form.field.Text', xtype: 'plupFile', alias: ...
- WEB版一次选择多个文件进行批量上传(Plupload)的解决方案
WEB版一次选择多个文件进行批量上传(Plupload)的解决方案 转载自http://www.cnblogs.com/chillsrc/archive/2013/01/30/2883648.htm ...
随机推荐
- ASP.NET Core WebApi使用Swagger
先在项目中引用Nuget包 Install-Package Swashbuckle.AspNetCore 安装之后需要在Startup.cs文件加入如下代码 public void Configure ...
- git与码云关联教程
注:我用的这种方法是利用“公钥”使本地仓库与码云建立起联系,从而不需要用户名与密码的方法. 1.首先,创建好码云,再在码云上创建好个人仓库,然后复制好仓库地址,这里的地址是指“SSH”类型的. 2.下 ...
- Oracle集群检测命令
select inst_id, count(inst_id) from gv$session group by inst_id order by inst_id; srvctl stop databa ...
- Oracle RAC安装文档
http://www.itpub.net/thread-1895813-2-1.html chkconfig iptables offservice iptables stop 1.修改主机名rac1 ...
- 12306 的架构也太 "牛X" 了吧！
每到节假日期间,一二线城市返乡.外出游玩的人们几乎都面临着一个问题:抢火车票! 虽然现在大多数情况下都能订到票,但是放票瞬间即无票的场景,相信大家都深有体会.尤其是春节期间,大家不仅使用12306,还 ...
- Java NIO浅析 转至 美团技术团队
出处: Java NIO浅析 NIO(Non-blocking I/O,在Java领域,也称为New I/O),是一种同步非阻塞的I/O模型,也是I/O多路复用的基础,已经被越来越多地应用到大型应用服 ...
- PermissionError: [Errno 13] Permission denied: '/run/user/0/jupyter'
解决办法:需要给/run/user整个目录开放权限,不能单独给'/run/user/0/jupyter'这个文件,因为jupyter是需要往目录中添加文件,/run/user/0/jupyter,此时 ...
- js小数和百分数的转换
一.百分数转化为小数 function toPoint(percent){ var str=percent.replace("%",""); str= str/ ...
- Hadoop组成架构
Hadoop是apache用来“处理海量数据存储和海量数据分析”的分布式系统基础架构,更广义的是指hadoop生态圈.Hadoop的优势 高可靠性:hadoop底层维护多个数据副本,即使某个计算单元故 ...
- python 字符串前面加r,u的含义
u/U:表示unicode字符串 不是仅仅是针对中文, 可以针对任何的字符串,代表是对字符串进行unicode编码. 一般英文字符在使用各种编码下, 基本都可以正常解析, 所以一般不带u:但是中文, ...