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="/ ...
随机推荐
- flume的sink写入hive表
flume的配置文件如下: a1.sources=r1 a1.channels=c1 a1.sinks=s1 a1.sources.r1.type=netcat a1.sources.r1.bind= ...
- Laravel —— 多模块开发
Laravel 框架比较庞大,更适用于比较大的项目. 为了整个项目文件结构清晰,不同部分分为不同模块很有必要. 一.安装扩展包 1.根据不同 Laravel 版本,选择扩展包版本. packagest ...
- Laravel —— batch 实现
很多项目中会用到自动执行脚本的功能, 例如,自动统计上个月的注册用户,定时生成 csv 文件并邮箱发送给客户等等. Laravel 中的任务调度,可实现定时任务, 结合自定义 artisan 命令,即 ...
- Cocos2d-x学习小结 配置篇
Cocos2d-x学习小结 配置篇 学习工具:Cocos2d-x用户手册,<Cocos2d-x游戏开发之旅> 首先官网下载cocos2d-x源码,安装vs2019.如果没有安装python ...
- 学习Spring-Data-Jpa(十三)---动态查询接口JpaSpecificationExecutor
1.JpaSpecificationExecutor JPA2引入了一个criteria API,我们可以使用它以编程的形式构建查询.通过编写criteria,动态生成query语句.JpaSpeci ...
- LeetCode 1027. Longest Arithmetic Sequence
原题链接在这里:https://leetcode.com/problems/longest-arithmetic-sequence/ 题目: Given an array A of integers, ...
- learning java NIO 之 CharBuffer
import java.nio.CharBuffer; public class BufferTest { public static void main(String[] args) { CharB ...
- rust cargo 一些方便的三方cargo 子命令扩展
内容来自cargo 的github wiki,记录下,方便使用 可选的列表 cargo-audit - Audit Cargo.lock for crates with security vulner ...
- vscode vue文件格式化没效果
在vscode 中 格式化vue文件没效果 解决办法: 点击头部文件 >首选项>设置 在右侧加入这两句 "vetur.format.defaultFormatter.js&q ...
- Linux 把进程为D(不可中断进程)转换成其他状态
问题现象:当前集群跑hadoop的时候,,任务失败,但是跑任务的容器没有正常退出,显示一大堆的YarcChild进程,,more /proc/进程/status 查看其状态,进程为D(disk s ...