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 ...
随机推荐
- Column常用的参数
#encoding: utf-8 from sqlalchemy import create_engine,Column,Integer,String,DateTime from sqlalchemy ...
- 使用 docsify 創建自己的 markdown 文檔系統
先來看一下我在碼雲上創建的demo: http://lin1270.gitee.io/nicedoc/#/ GIT自己clone一下: https://gitee.com/lin1270/nicedo ...
- [Python3] 033 异常
目录 异常 1. 简介 2. 异常的分类 3. 出现异常小例子 例子 4. 异常处理 5. 解决异常小例子 5.1 例子1 5.2 例子2 5.3 例子3 5.4 例子4 6. 手动引发异常 6.1 ...
- 关于Android studio调用高德地图的简单流程和要点
一,账号与Key的申请 注册成为高德开发者需要分三步: 第一步,注册高德开发者:第二步,去控制台创建应用:第三步,获取Key. 前2步都比较简单,这里说下第三步. 获取Key 1.进入控制台,创建一个 ...
- SQL--合计函数（Aggregate functions）:avg,count,first,last,max,min,sum
SQL--合计函数(Aggregate functions):avg,count,first,last,max,min,sum avg() 函数 定义和用法 AVG 函数返回数值列的平均值.NULL ...
- 二、redis学习(java操作redis缓存的工具jedis)
- 动态表和C++ vector
动态表和C++ vector 最近课上刚刚学了可以根据表中元素的插入和删除动态调整表大小的动态表(dynamic table),就想看一下它有什么实际的应用,第一个想起来的就是C++的vector,直 ...
- 1.device-manage 优化
一.当前简介 版本信息 device-manage:v1.0 mysql: 5.6.20 jdk : 1.8 Apache Maven 3.3.3 Spring4.2.5.RELEAS+SpingMV ...
- 【异常】~/.bash_profile:source:44: no such file or directory: /usr/local/Cellar/nvm/0.34.0/nvm.sh
1 异常信息 /Users/zhangjin/.bash_profile:source:: no such file or directory: /usr/local/Cellar/nvm//nvm. ...
- verilog 实用的小技巧
(之后还会持续的更新) 移位操作的实现: verilog有一种非常简单的移位操作实例如下: reg [3:0] source; reg out; {out,source[3:0]}={source[3 ...