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="/ ...
随机推荐
- linux下安装Sublime Text3并将它的快捷方式放进启动器中和卸载Sublime
Sublime Text是一个代码编辑器,我主要是用它来编辑python.下面就来简单说明下它在linux的安装过程吧! 1.添加sublime text3的仓库 首先按下快捷键ctrl+alt+t打 ...
- linux 查看某个目录下文件的数量
今日思语:时间是个庸医,却自称能包治百病~ 在linux环境下,经常需要查看某个文件目录下的文件数有多少,除了进入当前目录下查看,还可以使用命令: ls -l | grep "^-" ...
- HDU 6091 - Rikka with Match | 2017 Multi-University Training Contest 5
思路来自 某FXXL 不过复杂度咋算的.. /* HDU 6091 - Rikka with Match [ 树形DP ] | 2017 Multi-University Training Conte ...
- 非旋转 treap
其实之前学过一次非旋转 treap,但是全忘光了,今天复习一下. 洛谷 P3369 [模板]普通平衡树 code: #include <bits/stdc++.h> #define N 1 ...
- 原生js打地鼠
我们要做的是一个打地鼠的游戏,只用原生js 1.导入需要的图片 2.编写页面css样式demo.css *{ margin:0; padding:0; } .game{ position: relat ...
- proxysql 学习一 proxysql docker 运行试用
proxysql 是一个比较强大的mysql proxy 服务,支持动态mysql 实例调整,查询重写,查询cache,监控,数据镜像,读写分离 以及ha,最近已经发布了2.0 ,很值得试用下 环境准 ...
- 4、spark streaming+kafka
一.Receiver模式 1. receiver模式原理图 在SparkStreaming程序运行起来后,Executor中会有receiver tasks接收kafka推送过来的数据.数据会被持久化 ...
- vue-cli之路由独立成JS文件之后，如何在路由中获取vuex属性或者设置国际化i18n的当前使用语言
国际化vue-i18n的使用: import Vue from 'vue'; import VueI18n from 'vue-i18n'; // 引入语言包 import zh from '@/co ...
- 忽略 IDEA 文件
IntelliJ IDEA .idea *.iml /WebRoot/WEB-INF/classes
- SpringBoot聚合项目打包
1.打包遇到的问题: 子模块打包时,每次打包出来的jar都只有3k左右,没办法运行,目测应该是依赖的jar没有打包进来! 2.解决办法: 2.1.主项目的pom.xml里面不需要打包配置 2.2.在需 ...