Layer文件上传同时传递表单数据
（1）index.html
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
</head>
<body>
<div class="layui-container">
<form class="layui-form" action="" enctype="multipart/form-data">
<div class="layui-form-item">
<label class="layui-form-label">标题</label>
<div class="layui-input-block">
<input id="title" type="text" name="title" maxlength="300" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
</div> <div class="layui-form-item">
<label class="layui-form-label">上传文件</label>
<div class="layui-input-inline uploadHeadImage">
<div class="layui-upload-drag" id="uploadFile">
<i class="layui-icon"></i>
<p>点击上传文件，或将文件拖拽到此处！</p>
</div>
</div>
<div class="layui-input-inline">
<div id="uploadResult" class="layui-upload-list"> </div>
</div>
</div> <div class="layui-form-item layui-form-text">
<label class="layui-form-label">备注</label>
<div class="layui-input-block">
<textarea name="desc" placeholder="请输入内容" maxlength="1000" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" id="uploadBtn">提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</body> <script src="./jquery/jquery.min.js"></script>
<script src="./layui/layui.js"></script> <script>
layui.use('upload', function() {
var upload = layui.upload; //执行上传
var uploadInst = upload.render({
elem: '#uploadFile', //绑定元素
url: '../FileUploadServer', //上传接口
method: 'POST',
auto: false,
accept: 'file',
bindAction: '#uploadBtn',
size: 10240,//限制文件大小10M
multiple: false,
data:{}, before: function(obj) {
layer.load(); this.data.title = $('#title').val();
}, done: function(data, index, upload) {//上传完毕回调
layer.closeAll('loading'); if (data.no === 1) {
layer.msg("上传成功！", {
icon: 6
});
} else {
layer.msg("上传失败，请稍后重试！", {
icon: 5
});
} var uuid = data.uuid; $("#uploadResult").append('<input readonly type="text" value="'+uuid+'" class="layui-input" />');
}
, error: function() {//请求异常回调
layer.closeAll('loading');
layer.msg('网络异常，请稍后重试！');
}
});
});
</script>
</html>
（2）后台服务
package com.microwisdom.file; import com.google.gson.Gson;
import java.io.*;
import java.util.*;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload; /**
* @作者 yan
* @创建日期
* @版本 V1.0
* @描述
* @Path
*/
public class FileUploadServer extends HttpServlet { protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/json;charset=UTF-8");
request.setCharacterEncoding("UTF-8"); PrintWriter pw = response.getWriter(); Map<String,Object> resultMap = new HashMap<String,Object>(); String result = ""; //上传文件的保存目录
String savePath = "D:\\tmp\\file_server\\app\\";
//上传时生成的临时文件保存目录
String tempPath = "D:\\tmp\\file_server\\tmp"; File tmpFile = new File(tempPath);
if (!tmpFile.exists()) {
//创建临时目录
tmpFile.mkdir();
} //使用Apache文件上传组件处理文件上传步骤：
//1、创建一个DiskFileItemFactory工厂
DiskFileItemFactory factory = new DiskFileItemFactory();
//设置工厂的缓冲区的大小，当上传的文件大小超过缓冲区的大小时，就会生成一个临时文件存放到指定的临时目录当中。
factory.setSizeThreshold(1024 * 1024 * 10);//设置缓冲区的大小为10M，如果不指定，那么缓冲区的大小默认是10KB
//设置上传时生成的临时文件的保存目录
factory.setRepository(tmpFile); //2、创建一个文件上传解析器
ServletFileUpload upload = new ServletFileUpload(factory); //解决上传文件名的中文乱码
upload.setHeaderEncoding("UTF-8");
//3、判断提交上来的数据是否是上传表单的数据
if (!ServletFileUpload.isMultipartContent(request)) {
//按照传统方式获取数据
return;
} //设置上传单个文件的大小的最大值，目前是设置为1024*1024*10字节，也就是10MB
upload.setFileSizeMax(1024 * 1024 * 10);
//设置上传文件总量的最大值，最大值=同时上传的多个文件的大小的最大值的和，目前设置为10MB
upload.setSizeMax(1024 * 1024 * 10); //4、使用ServletFileUpload解析器解析上传数据，解析结果返回的是一个List<FileItem>集合，每一个FileItem对应一个Form表单的输入项
List<FileItem> list = null;
try {
list = upload.parseRequest(request);
for (FileItem item : list) {
//如果fileitem中封装的是普通输入项的数据
if (item.isFormField()) {
String name = item.getFieldName();
//解决普通输入项的数据的中文乱码问题
String value = item.getString("UTF-8");
//value = new String(value.getBytes("iso8859-1"),"UTF-8");
System.out.println(name + "=" + value);
} else {//如果fileitem中封装的是上传文件
//得到上传的文件名称，
String filename = item.getName();
System.out.println(filename);
if (filename == null || filename.trim().equals("")) {
continue;
} //注意：不同的浏览器提交的文件名是不一样的，有些浏览器提交上来的文件名是带有路径的，如： c:\a\b\1.txt，而有些只是单纯的文件名，如：1.txt
//处理获取到的上传文件的文件名的路径部分，只保留文件名部分
filename = filename.substring(filename.lastIndexOf("\\") + 1);
//得到上传文件的扩展名
String fileExtName = filename.substring(filename.lastIndexOf(".") + 1);
//如果需要限制上传的文件类型，那么可以通过文件的扩展名来判断上传的文件类型是否合法
System.out.println("上传的文件的扩展名是：" + fileExtName);
//获取item中的上传文件的输入流
InputStream in = item.getInputStream(); //得到文件保存的名称
String saveFilename = makeFileName(filename);
//得到文件的保存目录
String realSavePath = makePath(saveFilename, savePath);
//创建一个文件输出流
FileOutputStream out = new FileOutputStream(realSavePath + "\\" + saveFilename);
//创建一个缓冲区
byte buffer[] = new byte[1024];
//判断输入流中的数据是否已经读完的标识
int len = 0;
//循环将输入流读入到缓冲区当中，(len=in.read(buffer))>0就表示in里面还有数据
while ((len = in.read(buffer)) > 0) {
//使用FileOutputStream输出流将缓冲区的数据写入到指定的目录(savePath + "\\" + filename)当中
out.write(buffer, 0, len);
}
//关闭输入流
in.close();
//关闭输出流
out.close();
//删除处理文件上传时生成的临时文件
item.delete(); resultMap.put("no", 1);
resultMap.put("msg", "文件上传成功！");
resultMap.put("uuid", UUID.randomUUID().toString().replaceAll("-", "")); result = new Gson().toJson(resultMap);
}
}
} catch (FileUploadException ex) {
Logger.getLogger(FileUploadServer.class.getName()).log(Level.SEVERE, null, ex);
} finally{
pw.print(result);
} } @Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
} @Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
} private String makeFileName(String filename){
//为防止文件覆盖的现象发生，要为上传文件产生一个唯一的文件名
return UUID.randomUUID().toString() + "_" + filename;
} private String makePath(String filename,String savePath){
//得到文件名的hashCode的值，得到的就是filename这个字符串对象在内存中的地址
int hashcode = filename.hashCode();
int dir1 = hashcode&0xf; //0--15
int dir2 = (hashcode&0xf0)>>4; //0-15
//构造新的保存目录
String dir = savePath + "\\" + dir1 + "\\" + dir2; //upload\2\3 upload\3\5
//File既可以代表文件也可以代表目录
File file = new File(dir);
//如果目录不存在
if(!file.exists()){
//创建目录
file.mkdirs();
}
return dir;
} }
Layer文件上传同时传递表单数据的更多相关文章
- Struts2文件上传（基于表单的文件上传）
•Commons-FileUpload组件 –Commons是Apache开放源代码组织的一个Java子项目,其中的FileUpload是用来处理HTTP文件上传的子项目 •Commons-Fil ...
- servlet文件上传2——复合表单提交（数据获取和文件上传）
上传文件时表单enctype属性必须要更改为<enctype='multipart/form-data'>:采用post提交表单,元素需要有name属性: 利用第三方jar包(common ...
- Java中request请求之 - 带文件上传的form表单
常用系统开发中总免不了显示图片,保存一些文件资料等操作. 这些操作的背后,就是程序员最熟悉的 enctype="multipart/form-data"类型的表单. 说起file类 ...
- 【文件上传】文件上传的form表单提交方式和ajax异步上传方式对比
一.html 表单代码 …… <input type="file" class="file_one" name="offenderExcelFi ...
- layui框架实现多图片手动上传和随表单提交方法
首先在官方文档并没有手动上传的说明文档,这里手动实现上传原理是:在表单中有三个按钮,分别是上传图片按钮.隐藏上传按钮.表单提交按钮,点击上传图片按钮之后,图片添加在前端但是并没有真正的上传,而是在点击 ...
- java：struts框架3（自定义拦截器，token令牌，文件上传和下载（单/多））
1.自定义拦截器: struts.xml: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE ...
- 如何使用PHP上传文件,上传图片,php上传教程,php表单文件上传教程
使用PHP进行文件上传,主要使用到表单功能和PHP内置的$_FILES函数功能.接下来我们看如何实现PHP上传功能.例子效果图,此例子是在Mac下进行调试成功的. PHP上传图片文件的功能代码如下: ...
- Retrofit 2.0 轻松实现多文件/图片上传/Json字符串/表单
如果嫌麻烦直接可以用我封装好的库:Novate: https://github.com/Tamicer/Novate 通过对Retrofit2.0的前两篇的基础入门和案例实践,掌握了怎么样使用Retr ...
- 文件上传之form表单篇
form表单上传文件 作为本系列的最后一篇,也是楼主知道的第三种文件上传的方式--隆重推出Form表单 这是最传统的上传文件,提交数据的方式 Html: <form action="/ ...
随机推荐
- Centos7-网卡配置
目标计划:熟悉Linux网卡 1.修改网卡名称,替换自动生成的网卡名 2.新建网卡配置文件与新增网卡的关系 3.网卡bond模式配置,team模式 4.NetworkManager-nmcli管理网络 ...
- Java 第12次作业--你的生日
题目:计算自己的出生日期距今天多少天,再将自己的出生日期利用SimpleDateFormat类设定的格式输出显示. 代码: import java.util.*; import java.text.* ...
- C# 反射(转)
什么是反射 Reflection,中文翻译为反射. 这是.Net中获取运行时类型信息的方式,.Net的应用程序由几个部分:‘程序集(Assembly)’.‘模块(Module)’.‘类型 ...
- python中的assert
assert 2>3, ("错误")print("haha") 如果断言处的表达式是错误的话,会打印assert后面的提示,并且下面的语句就不会执行了. ...
- ctx控制超时的使用
cancel package main import ( "context" "fmt" "time" ) func gen(ctx con ...
- 2019-2020-1 20199302《Linux内核原理与分析》第九周作业
一.进程调度的时机 硬中断和软中断 中断:程序执行过程中的强制性转移到操作系统内核相应的处理程序,起到切出指令流的作用. 中断处理程序:与进程无关的内核指令流. 进程切换:切换两个进程的内核堆栈. 硬 ...
- [RN] React Native 查看console打印出来的内容
我们在调试React Native 程序的时候,经常会用到Js的打印语句Console.log等 但我们一脸蒙逼的时候,启动的时候完全看不到打印的内容在哪儿呢??? 原来还要在命令行下输入一个语句才能 ...
- Kafka 消费者到底是什么 以及消费者位移主题到底是什么（Python 客户端 1.01 broker）
Kafka 中有这样一个概念消费者组,所有我们去订阅 topic 和 topic 交互的一些操作我们都是通过消费者组去交互的. 在 consumer 端设置了消费者的名字之后,该客户端可以对多个 to ...
- 安装关系型数据库MySQL 安装大数据处理框架Hadoop
作业要求来自:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE2/homework/3161 1.Hadoop的介绍 Hadoop最早起源于Nutch.Nut ...
- 第06组 Beta冲刺（2/5）
队名:拾光组 组长博客链接 作业博客链接 团队项目情况 燃尽图(组内共享) 组长:宋奕 过去两天完成了哪些任务 维护后端代码 学习后端架构 GitHub签入记录 接下来的计划 维护后端代码,跟进组员完 ...