用layui.upload.render()和ssh框架实现单次上传多个文件,请写出代码
时间: 2023-06-12 22:05:52 浏览: 148
element-ui中el-upload多文件一次性上传的实现
5星 · 资源好评率100%
以下是使用layui.upload.render()和ssh框架实现单次上传多个文件的代码示例:
HTML代码:
```
<div class="layui-upload">
<button type="button" class="layui-btn" id="upload">上传文件</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
预览图:
<div class="layui-upload-list" id="preview"></div>
</blockquote>
</div>
```
JavaScript代码:
```
layui.use(['upload', 'layer'], function() {
var upload = layui.upload;
var layer = layui.layer;
//执行实例
var uploadInst = upload.render({
elem: '#upload', //绑定元素
url: '/upload/', //上传接口
accept: 'file',
multiple: true, //允许多文件上传
before: function(obj) {
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result) {
$('#preview').append('<div class="layui-upload-item"><img src="' + result + '" class="layui-upload-img"><div class="layui-upload-info"><span class="layui-upload-file">' + file.name + '</span><span class="layui-upload-delete">删除</span></div></div>');
});
},
done: function(res) {
//上传完毕回调
console.log(res);
layer.msg('上传成功');
},
error: function() {
//请求异常回调
layer.msg('上传失败');
}
});
//删除文件
$('#preview').on('click', '.layui-upload-delete', function() {
$(this).parents('.layui-upload-item').remove();
});
});
```
Java代码:
```
public String upload(MultipartFile[] files) {
try {
for (MultipartFile file : files) {
String fileName = file.getOriginalFilename();
String filePath = "/upload/" + fileName;
SftpUtil.upload(file.getInputStream(), filePath);
}
return "上传成功";
} catch (Exception e) {
e.printStackTrace();
return "上传失败";
}
}
```
其中,SftpUtil是一个封装了ssh连接的工具类,用于将文件上传至远程服务器。需要根据实际情况进行修改。
阅读全文