关于layui图片/文件上传

一：常规使用普通文件上传（传入服务器一张图片）

1.前台代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="../layui/css/layui.css" rel="stylesheet" />
<title></title>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>常规使用：普通图片上传</legend>
</fieldset>

<div class="layui-upload">
<button type="button" class="layui-btn" id="test1">上传图片</button>
<div class="layui-upload-list">
<img class="layui-upload-img" id="demo1">
<p id="demoText"></p>
</div>
</div>
<script src="../layui/jquery-3.3.1.js"></script>
<script src="../layui/layui.js"></script>
<script>
layui.use('upload', function () {
var upload = layui.upload;
//普通图片上传
var uploadInst = upload.render({
//这里url就是你上传图片的接口
//before是上传图片之前的回调，就是将图片展示出来啦
//done就是完成图片上传后的回调
//error就是上传发生错误的回调，比如你要上传的服务器不存在要保存图片的文件夹就会触发error回调
elem: '#test1'
, url: '/UploadFile/ashxjiekou/upload.ashx'
, before: function (obj) {
//预读本地文件示例，不支持ie8
obj.preview(function (index, file, result) {
$('#demo1').attr('src', result);
});

}
, done: function (res) {
//这里回调函数的参数res就是接口返回的数据
//alert(JSON.stringify(res.data.src))
//如果上传失败
if (res.code > 0) {
return layer.msg('上传失败');
}
layer.msg('上传成功')
}
, error: function () {
//演示失败状态，并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function () {
uploadInst.upload();
});
}
});
})
</script>
</body>
</html>

这里前台代码都是完整的考的你的编辑器就可以用了当然引用的jquery 和 layui路径要改成你自己相应的路径

2.接下来我们看后台ashx接口，后台也考个完整的把看起来量多（但其实没什么好说的）

using Newtonsoft.Json.Linq;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;

namespace UploadLearning.UploadFile.ashxjiekou
{
/// <summary>
/// upload 的摘要说明
/// </summary>
public class upload : IHttpHandler
{
JObject json = new JObject();
JObject rtn = new JObject();
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/json";
HttpFileCollection files = context.Request.Files;
string path = "/upImage";
checkDir(path);
if (files.Count > 0)
{
files[0].SaveAs(context.Server.MapPath("/upImage/" + files[0].FileName + ".jpg"));
//context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(new { msg = "ok" }, Newtonsoft.Json.Formatting.Indented));
rtn.Add("src", "upImage/" + files[0].FileName + ".jpg");
json.Add(new JProperty("code", 0));
json.Add(new JProperty("msg", ""));
json.Add(new JProperty("data", rtn));
}
context.Response.Write(json.ToString());
context.Response.End();
}

public bool IsReusable
{
get
{
return false;
}
}

#region 检查指定目录是否存在,如不存在则创建
/// <summary>
/// 检查指定目录是否存在,如不存在则创建
/// </summary>
/// <param name="url"></param>
/// <returns></returns>
public void checkDir(string url)
{
if (Directory.Exists(System.Web.HttpContext.Current.Server.MapPath(url)) == false)
{
Directory.CreateDirectory(System.Web.HttpContext.Current.Server.MapPath(url));
}
}
#endregion
}
}

3.普通图片上传总结：

普通图片上传就这样了，其中后台用到了类HttpFileCollection，这个类用于获取浏览器上传的文件集合。。。请注意是集合。其它就没什么注意的啦

二：上传多张图片

1.多图片上传前台代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="../layui/css/layui.css" rel="stylesheet" />
<script src="../layui/jquery-3.3.1.js"></script>
<title></title>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>常规使用：普通图片上传</legend>
</fieldset>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>上传多张图片</legend>
</fieldset>

<div class="layui-upload">
<button type="button" class="layui-btn" id="test2">多图片上传</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
预览图：
<div class="layui-upload-list" id="demo2"></div>
</blockquote>
</div>

}
, done: function (res) {
//这里回调函数的参数res就是接口返回的数据
//alert(JSON.stringify(res.data.src))
//如果上传失败
if (res.code > 0) {
return layer.msg('上传失败');
}
layer.msg('上传成功')
}
, error: function () {
//演示失败状态，并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function () {
uploadInst.upload();
});
}
});
var s = "";
//多图片上传
upload.render({
elem: '#test2'
, url: '/UploadFile/ashxjiekou/tupianshangchuanduo.ashx'
, multiple: true
, before: function (obj) {
//预读本地文件示例，不支持ie8
obj.preview(function (index, file, result) {
$('#demo2').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
});
}
, done: function (res) {
//上传完毕
alert(JSON.stringify(res));
if (s == "") {
s = JSON.stringify(res.data.src);
}
else {
s = s + "," + JSON.stringify(res.data.src);
}
alert(s)
}
});

})
</script>
</body>
</html>

2.多图片上传后台接口

using Newtonsoft.Json.Linq;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace UploadLearning.UploadFile.ashxjiekou
{
/// <summary>
/// tupianshangchuanduo 的摘要说明
/// </summary>
public class tupianshangchuanduo : IHttpHandler
{
JObject json = new JObject();
JObject rtn = new JObject();
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/json";
HttpFileCollection files = context.Request.Files;
string path = "/tupianshangchuanduo";
checkDir(path);
string s = string.Empty;
if (files.Count > 0)
{
files[0].SaveAs(context.Server.MapPath("/tupianshangchuanduo/" + files[0].FileName + ".jpg"));
//context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(new { msg = "ok" }, Newtonsoft.Json.Formatting.Indented));
rtn.Add("src", "upImage/" + files[0].FileName + ".jpg");
json.Add(new JProperty("code", 0));
json.Add(new JProperty("msg", ""));
json.Add(new JProperty("data", rtn));
}
context.Response.Write(json.ToString());
context.Response.End();
}

public bool IsReusable
{
get
{
return false;
}
}

#region 检查指定目录是否存在,如不存在则创建
/// <summary>
/// 检查指定目录是否存在,如不存在则创建
/// </summary>
/// <param name="url"></param>
/// <returns></returns>
public void checkDir(string url)
{
if (System.IO.Directory.Exists(System.Web.HttpContext.Current.Server.MapPath(url)) == false)
{
System.IO.Directory.CreateDirectory(System.Web.HttpContext.Current.Server.MapPath(url));
}
}
#endregion
}
}

3.多图片上传总结：

多图片上传这个接口的调用要注意，其实他是多个进程一起一起工作的所以说我们的HttpFileCollection类对象并没有被遍历我最开始的思考就是多图片是一次传了很多上来在通过遍历实现保存，但并不是这样。

三：高级应用：制作一个多文件列表

1.多文件上传html

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>上传多张图片</legend>
</fieldset>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>高级应用：制作一个多文件列表</legend>
</fieldset>

<div class="layui-upload">
<button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
<div class="layui-upload-list">
<table class="layui-table">
<thead>
<tr>
<th>文件名</th>
<th>大小</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody id="demoList"></tbody>
</table>
</div>
<button type="button" class="layui-btn" id="testListAction">开始上传</button>
</div>

//多文件列表示例
var demoListView = $('#demoList')
, uploadListIns = upload.render({
elem: '#testList'
, url: '/UploadFile/ashxjiekou/duowenjianList.ashx'
, accept: 'file'
, multiple: true
, auto: false
, bindAction: '#testListAction'
, 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 值，以免删除后出现同名文件不可选
});

demoListView.append(tr);
});
}
, done: function (res, index, upload) {
if (res.code == 0) { //上传成功
var tr = demoListView.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);
}
, error: function (index, upload) {
var tr = demoListView.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>
</body>
</html>

2.多文件上传后台接口

using Newtonsoft.Json.Linq;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;

namespace UploadLearning.UploadFile.ashxjiekou
{
/// <summary>
/// duowenjianList 的摘要说明
/// </summary>
public class duowenjianList : IHttpHandler
{
JObject json = new JObject();
JObject rtn = new JObject();

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/json";
HttpFileCollection files = context.Request.Files;
string path = "/upduowenjianList";
checkDir(path);
if (files.Count > 0)
{
files[0].SaveAs(context.Server.MapPath("/upduowenjianList/" + files[0].FileName + ".jpg"));
//context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(new { msg = "ok" }, Newtonsoft.Json.Formatting.Indented));
rtn.Add("src", "upImage/" + files[0].FileName + ".jpg");
json.Add(new JProperty("code", 0));
json.Add(new JProperty("msg", ""));
json.Add(new JProperty("data", rtn));
}
context.Response.Write(json.ToString());
context.Response.End();
}

public bool IsReusable
{
get
{
return false;
}
}

3.多文件上传总结：其他都大同小异。唯一需要注意的是加入上传的文件太大会发生错误：System.Web.HttpException: 超过了最大请求长度。这是因为asp.net默认限制最大上传文件大小为4096KB，需要修改项目的web.config文件即可解决，可以将最大文件长度设置为你需要的长度如下：

如此以上问题就可以解决了

关于layui图片/文件上传的更多相关文章

springmvc图片文件上传接口
springmvc图片文件上传用MultipartFile文件方式传输 Controller package com.controller; import java.awt.image.Buffer ...
SpringMvc MultipartFile 图片文件上传
spring-servlet.xml  <bean id="multipar ...
.Net Core 图片文件上传下载
当下.Net Core项目可是如雨后春笋一般发展起来,作为.Net大军中的一员,我热忱地拥抱了.Net Core并且积极使用其进行业务的开发,我们先介绍下.Net Core项目下实现文件上传下载接口. ...
PHP 图片文件上传代码
通过 PHP,可以把文件上传到服务器.里面加入一些图片的判断,如果不加判断文件的类型就可以上传任意格式的文件. 为了网站的安全,肯定不让上传php文件,如果有人进入你的后台,上传了一个php文件,你的 ...
PHP 图片文件上传代码分享
分享下php上传图片文件的一段代码,挺不错的. 通过 PHP,可以把文件上传到服务器.加入一些图片的判断,如果不加判断文件的类型就可以上传任意格式的文件. 当然了,会禁止上传php文件,以及其它程序代 ...
PHP图片文件上传类型限制扩展名限制大小限制与自动检测目录创建。
程序测试网址:http://blog.z88j.com/fileuploadexample/index.html 代码分为两部分: 一部分form表单: <!doctype html> & ...
iOS分享 - AFNetworking之多图片/文件上传
在分享经验之前,先说点题外话,之前的一个项目涉及到了多图片的上传,本来以为是一个很简单的事情,却着实困扰了我好久,究其原因,一是我不够细心,二是与后台人员的交流不够充分.在此,我想将我的老师常说的一句 ...
Struts2图片文件上传，判断图片格式和图片大小
1. 配置Struts2能够上传的最大文件大小使用Struts2进行文件上传的时候,Struts2默认文件大小最大为2MB,如果要传大一点的文件,就需要修改struts.xml配置文件,重新设置能够 ...
SSH—网上商城之商品图片文件上传
前言网上商城中的淘宝图片要显示在页面的前提是图片应该已经在数据库里面,那么怎么实现图片的上传功能呢,这就是今天要说的主题. 内容需求: 商城后台需要添加图片文件,用来图片显示解决方式: Stru ...

随机推荐

跟随Javac代码来解答字节码的疑惑
前言本文是跟随掘金小册张师傅的<JVM字节码从入门到精通>练习而写的. 问题问题一: 有如下代码: 1 package com.sun.tools.javac; 2 3 /** 4 * ...
lora网关
lora网关 lora物联网网关ZLAN9743可以实现RS232/485/422/以太网转 LoRa功能是一款高性价比远距离无线通讯网关.LoRa和GPRS.4G方案相比它无需入网月租费,和Wif ...
物联网wifi模块
物联网wifi模块物联网wifi模块是上海卓岚推出的MQTT+JSON转Modbus物联网WiFi核心模块.支持以MQTT的方式连接云端服务器,支持可以界面话配置,自主采集Modbus仪表/645 ...
spring-security-结合JWT的简单demo
spring-security-demo 前言:本来是想尽量简单简单点的写一个demo的,但是spring-security实在是内容有点多,写着写着看起来就没那么简单了,想入门spring-secu ...
JVM系列【6】GC与调优2.md
JVM系列笔记目录虚拟机的基础概念 class文件结构 class文件加载过程 jvm内存模型 JVM常用指令 GC与调优了解HotSpot常用命令行参数 JVM的命令行参数参考: https:/ ...
docker安装部署neo4j
docker部署neo4j 环境:ubuntu16.04LTS docker安装详见:菜鸟教程(docker安装) docker国内镜像源配置第一步,进入阿里云,登陆后点击左侧的镜像加速,生成自己 ...
JavaScript实现异步的4中方法
一:背景简介 Javascript语言的执行环境是"单线程"(single thread). 所谓"单线程",就是指一次只能完成一件任务.如果有多个任务,就必须 ...
经典剪枝算法的例题——Sticks详细注释版
这题听说是道十分经典的剪枝算的题目,不要问我剪枝是什么,我也不知道,反正我只知道用到了深度搜索我参考了好多资料才悟懂,然后我发现网上的那些大神原理讲的很明白,但代码没多少注释,看的很懵X,于是我抄起 ...
如何发布代码到maven中心仓库
deploy to sonatype 参考文章 https://blog.csdn.net/xuefu_78/article/details/52494698 https://blog.csdn.ne ...
【应用服务 App Service】App Service使用Git部署时，遇见500错误
问题描述 Azure App Service在部署的时候支持多种方式,如Zip,VS 2019, VS Code,或者是Git部署,当使用Git部署遇见500错误时,可以通过其他的部署方式来验证是否也 ...

关于layui图片/文件上传

关于layui图片/文件上传的更多相关文章

随机推荐

热门专题