layui详细文件上传(前后台)
文件上传这个功能是做网站必不可少的,layui中的文件上传还是挺不错的,简单实用1、form表单进行文件上传,中间表单内容我就省略了,注意:enctype设为multipart/form-data<formclass="layui-form layui-form-pane" id="addgoods" style="padding: 15px;display: none"enctype="m
·
文件上传这个功能是做网站必不可少的,layui中的文件上传还是挺不错的,简单实用
1、form表单进行文件上传,中间表单内容我就省略了,注意:enctype设为multipart/form-data
<form class="layui-form layui-form-pane" id="addgoods" style="padding: 15px;display: none" enctype="multipart/form-data" >
<input hidden="hidden" name="downPath" id="downPath">
<div class="layui-form-item">
<label class="layui-form-label">办公用品名称</label>
<div class="layui-input-inline">
<input name="name" class="layui-input" lay-verify="required" type="text" placeholder="办公用品名称" >
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">上传附件</label>
<div class="layui-input-block">
<button type="button" class="layui-btn" id="uploadFile" lay-verify="isupload">选择文件</button>
<span id="filename" ></span>
</div>
</div>
<div class="layui-form-item" style="position: relative;left: 120px">
<button class="layui-btn" lay-submit lay-filter="add" type="submit">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</form>
2、js部分,点击上传时进行上传操作;bindAction这个值大家注意点,这个值指向一个按钮触发,你如果是上传多张图片的话可以把这个值指向提交按钮,提交的时候进行文件上传,都是在后台操作,容易存储多张图片的路径,这里因为是一张图片,我是点击的时候直接上传图片,地址由controller返回,赋值为Hidden中.
upload.render({
elem: '#uploadFile', //绑定元素(上传文件的id)
url: 'goods/filetoService', //上传接口
method: 'POST',
auto: true,
accept: 'images',//指定允许上传时校验的文件类型
acceptMime: 'image/*',//规定打开文件选择框时,筛选出的文件类型,值为用逗号隔开的 MIME 类型列表
field:'file',//设定文件域的字段名
//bindAction: '#submit', //指向一个按钮触发上传
size: 102400,//限制文件大小10M
multiple: false,
data:{},
choose:function(obj){
obj.preview(function(index, file, result){
if(file.name.length>0) {
choose_file_flag=true;
$("#filename").text(file.name);
}
});
},
before: function(obj) {
obj.preview(function(index, file, result){
layer.load();
if(file.name.length>0) {
choose_file_flag=true;
}
});
},
done: function(res, index, upload) {//上传完毕回调
if(isnull&&choose_file_flag){
layer.closeAll('loading');
if(res.code==0){
//上传完成,文件路径进行入库存储
downPath=res.downPath;
$("#downPath").val(res.downPath)
}else{
// parent.layer.alert(res.info)
}
}
}
, error: function() {//请求异常回调
layer.closeAll('loading');
layer.alert('网络异常,请稍后重试!');
}
});
3、前台进行验证到底上传没上传图片
form.verify({
isupload: function(value, item){//isupload的是lay-verify="isupload"定义的
if(choose_file_flag==false){
return '请选择文件';
}
}
});
4、后台的上传接口,NASUtils这个工具类我就不传了,文件服务器类型不同,上传的工具不同,后台主要是接收前台的file,由于是MultipartFile类型,我这边转成了file类型,唯一的问题是转换过程中会在根目录生成该文件,需要删除
//上传图片
@ResponseBody
@PostMapping("filetoService")
public JSONObject userupimg(@RequestParam(value = "file") MultipartFile file, HttpServletRequest request) throws Exception {
File file1 = MultiFileUtils.multipartFileToFile(file);
//由于文件服务器读取中文乱码,文件名改为数字
String s = "" + (int) ((Math.random() * 9 + 1) * 1000);
String name = s + "." + file1.getName().split("\\.")[1];
String downPath = NASUtils.NasUploadFileToFileserver(UUIDGenerator.getUUID(), name, file1);
if (!StringUtils.isEmpty(downPath)){//上传成功后需要删除
file1.delete();
}
JSONObject jsonObject = new JSONObject();
jsonObject.put("downPath", downPath);
jsonObject.put("code", 0);
jsonObject.put("msg", "上传成功");
return jsonObject;
}
5、MultiFileUtils工具类
package com.project1.utils;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.io.OutputStream;
public class MultiFileUtils {
public static File multipartFileToFile(MultipartFile file) throws Exception {
File toFile = null;
if (file.equals("") || file.getSize() <= 0) {
file = null;
} else {
InputStream ins = null;
ins = file.getInputStream();
toFile = new File(file.getOriginalFilename());
inputStreamToFile(ins, toFile);
ins.close();
}
return toFile;
}
private static void inputStreamToFile(InputStream ins, File file) {
try {
OutputStream os = new FileOutputStream(file);
int bytesRead = 0;
byte[] buffer = new byte[8192];
while ((bytesRead = ins.read(buffer, 0, 8192)) != -1) {
os.write(buffer, 0, bytesRead);
}
os.close();
ins.close();
} catch (Exception e) {
e.printStackTrace();
}
}
}
到此就结束了,其实后台接收到file了,剩下的就简单了,找到适合自己文件服务器的工具类
更多推荐
已为社区贡献1条内容
所有评论(0)