大家好,又见面了,我是你们的朋友全栈君。
使用bootstrap-fileinput进行文件上传,有丰富的属性、方法、事件,还有好多demo供参考。
前端处理
直接上代码,简单明了。
<div class="col-md-9 input-group">
<input type="file" name="file" id="imgUpload" class="imgFile form-control">
</div>
这是原始的HTML文件上传时的设置;然后使用bootstrap-fileinput渲染它。
$("#imgUpload")
.fileinput({
language: "zh", //设置语言
uploadUrl: url + "/upload/addImg", //上传的地址
allowedFileExtensions: ["jpg", "png", "jpeg", "bmp"], //接收的文件后缀
theme: "fa", // 主题设置
initialPreview: url1 + filePath + fileName, // 初始预览区域显示的图片
initialPreviewAsData: true,
initialPreviewConfig: [
{ type: "image", fileType: "image", caption: fileName }
],
dropZoneEnabled: false, // 禁止点击预览区域进行文件上传操作
maxFileCount: 1, // 最大上传为 1
showUpload: false, // 不显示上传按钮,选择后直接上传
previewClass:"uploadPreview",
})
.on("change", function() {
// 清除掉上次上传的图片
$(".uploadPreview").find(".file-preview-frame:first").remove();
$(".uploadPreview").find(".kv-zoom-cache:first").remove();
})
.on("filebatchselected", function(e, files) {
$(this).fileinput("upload"); // 文件选择完直接调用上传方法。
})
.on("fileuploaded", function(e, data, previewiId, index) { // 上传完成后的处理
var form = data.form,
files = data.files,
extra = data.extra,
response = data.response, // 响应
reader = data.reader; // 文件对象
if (response.flag) {
let img = new Image(); // 这里上传的是图片,对图片处理获取图片的分辨率
img.src = reader.result;
if (img.complete) {
$(this).attr("data-displayReso", img.width + "*" + img.height);
} else {
img.onload = function() {
$(this).attr("data-displayReso", img.width + "*" + img.height);
};
}
}
});
注意
手动调用上传upload
方法后,相关的一些事件则不生效。
- 进行多文件上传,
<input type="file" name="file" id="imgUpload" class="imgFile form-control" multiple>
,设置属性maxFileCount
文件的最大数量。- 进行单文件上传时,上传后再次选择文件上传,之前上传的还在,需要在
change
事件中手动清除之前的图片占位。设置属性previewClass
java 处理文件接收
@RequestMapping(value="/addImg",method={RequestMethod.POST})
@ResponseBody
public Map<String,Object> addImg(HttpServletRequest request, HttpServletResponse response){
Map<String,Object> result= new HashMap<String, Object>();
// 转型为MultipartHttpRequest:
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
// 获得文件:
MultipartFile file= multipartRequest.getFile("file");
try(){
if(!(imgFile.getOriginalFilename() == null || "".equals(imgFile.getOriginalFilename()))){
String imgDir = "E:\\images"; // 图片上传地址
// 对文件进行存储处理
byte[] bytes = file.getBytes();
Path path = Paths.get(imgDir,"\\"+file.getOriginalFilename());
Files.write(path,bytes);
result.put("msg","上传成功!");
result.put("result",true);
}
}catch(IOException e){
result.put("msg","出错了");
result.put("result",false);
e.printStackTrace();
}catch (Exception e1){
e1.printStackTrace();
}
return result;
}
划重点
MultipartFile imgFile = multipartRequest.getFile("file");
这里的file
指的是前端input
标签中的name
属性.之前没注意到导致前台上传文件时报500
错误。
nodeJS处理文件上传
使用express
框架搭建服务,使用formidable
模块处理文件,要使用到NodeAPIfs
文件系统和path
路径。
app.post("/upload/addImg", function (req, res) {
var form = new formidable.IncomingForm();
form.encoding = 'utf-8';
form.uploadDir = path.join(__dirname, 'tmp'); // 临时文件存储地址,之后进行重命名移动
form.keepExtensions = true; // 文件扩展名
form.parse(req, function (err, fields, files) {
var filepath = '';
for (var key in files) {
if (files[key].path && filepath == '') {
filepath = files[key].path; // 获取到临时存放的文件地址
break;
}
}
var targetDir = path.join(__dirname, "/upload/imgs/");
// 创建存放文件的目录
if (fs.existsSync(targetDir)) {
fs.mkdir(targetDir, {
recursive: true
}, (err) => {
if (err) throw err;
});
}
var fileExt = filepath.substring(filepath.lastIndexOf("."));
// 文件类型校验
if ((".jpg.png.bmp.jpeg").indexOf(fileExt.toLowerCase()) == -1) {
var errType = new Error("此文件类型不支持!");
res.json({
code: -1,
message: errType
});
} else {
var filename = new Date().getTime() + fileExt;
var targetFile = path.join(targetDir, filename);
fs.rename(filepath, targetFile, err => {
if (err) {
console.info(err);
res.json({
code: -1,
message: "操作失败"
});
} else {
// 上传成功后处理返回文件的地址
var fileUrl = path.join(__dirname, '/upload/imgs/' + filename);
res.json({
code: 200,
fileUrl: fileUrl
});
}
});
}
});
});
注意
文件创建目录会出错,Error: ENOENT: no such file or directory,
最好手动在指定路径下创建好存放的地址。
// 创建存放文件的目录
if (fs.existsSync(targetDir)) {
fs.mkdir(targetDir, {
recursive: true
}, (err) => {
if (err) throw err;
});
}
files
文件对象:
2019-02-28 更新:补全Java存储路径部分代码
-
补全代码查看Java处理文件代码部分。
-
上传处理成功后,返回给前端结果时附带图片信息
File file1=new File(path.toString()); InputStream ins = new FileInputStream(file1); // 返回图片的地址,宽、高 BufferedImage bufferedImage = ImageIO.read(ins); extData.put("imgUrl", path.toString()); extData.put("imgW",bufferedImage.getWidth()); extData.put("imgH",bufferedImage.getHeight()); ins.close(); ins=null; BufferedImage=null;
在使用form
表单上传文件时,注意属性enctype="multipart/form-data"
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/133746.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...