bootstrap-fileinput文件上传&后台接收处理

bootstrap-fileinput文件上传&后台接收处理使用bootstrap-fileinput进行文件上传,bootstrap提供了吩咐的API属性、方法、事件;控制文件上传每一个环境,提供各个部分的`class`。Java上传图片处理以及nodeJS上传文件处理。

大家好,又见面了,我是你们的朋友全栈君。

使用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方法后,相关的一些事件则不生效。

  1. 进行多文件上传,<input type="file" name="file" id="imgUpload" class="imgFile form-control" multiple> ,设置属性maxFileCount 文件的最大数量。
  2. 进行单文件上传时,上传后再次选择文件上传,之前上传的还在,需要在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错误。

multipartRequest属性对象

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文件对象:
files对象


2019-02-28 更新:补全Java存储路径部分代码

  1. 补全代码查看Java处理文件代码部分。

  2. 上传处理成功后,返回给前端结果时附带图片信息

     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账号...

(0)


相关推荐

  • java图片加密[通俗易懂]

    java图片加密[通俗易懂]刚接触java只是看一点写一点,也不知道对错,等将来学深入发现错了再改吧packagecom.demo.test;importjava.io.*;publicclassTest{/***@paramargs*@throwsIOException */publicstaticvoidmain(String[]args)throwsIO

  • 查看gcc的版本

    查看gcc的版本查看gcc版本 命令:debian:dpkg-lgccredhat:rpm-qa|grepgcc

  • Java课设:学生管理系统

    Java课设:学生管理系统文章目录StudentManagerStudentManagerMain.javaStuInfo.javaClassInfo.javaScoreInfo.javaAdd.javaDelete.javaStudentManager查询学生的个人基本信息,查询课程表、选课情况,查询课程的成绩信息。其中课程表及选课信息和成绩信息无法改动,个人基本信息可以添加或者删除。这是一个比较简单的管理系统,具…

  • request.getParameter();的意思[通俗易懂]

    request.getParameter();的意思[通俗易懂]对于httprequrest的request.getParameter()的作用,之前我只是在用它而不知道它到底有什么作用,今天看了一遍文章突然明白了其中的意思。  大致的内容如下:这个form提交请求后,在你的action中Stringname=request.getparameter(“name”);那么name的值就是“哈哈”  它是一种取参数的方法。

    2022年10月28日
  • HTML&CSS实现经典登录注册页面

    HTML&CSS实现经典登录注册页面提要:本篇文章说的是一个简单的登录、注册页面用HTML结合css如何实现,包括两个页面的相互跳转,不包括对输入数据的处理,适合刚入门的新手小白。1、首先看一下最后的实现效果:首先是一个登录界面,点击“立即注册”会跳转到第二张图片,也就是注册界面,点击注册界面的“请登录”又会跳转回到第一个登录界面。2、下面看一下具体的代码实现(使用的开发工具是HBuilder,有非常强大的提示功能,…

  • 解决Win10系统图标变白[通俗易懂]

    解决Win10系统图标变白[通俗易懂]解决因为安装路径文件名更改导致图标变白

    2022年10月19日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号