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)
blank

相关推荐

  • ac测评题库_awing

    ac测评题库_awing杭州人称那些傻乎乎粘嗒嗒的人为 62(音:laoer)。杭州交通管理局经常会扩充一些的士车牌照,新近出来一个好消息,以后上牌照,不再含有不吉利的数字了,这样一来,就可以消除个别的士司机和乘客的心理障碍,更安全地服务大众。不吉利的数字为所有含有 4 或 62 的号码。例如:62315,73418,88914 都属于不吉利号码。但是,61152 虽然含有 6 和 2,但不是 连号,所以不属于不吉利数字之列。你的任务是,对于每次给出的一个牌照号区间 [n,m],推断出交管局今后又要实际上给多少辆新的士车上牌

  • android换苹果,苹果换手机怎么转移数据?苹果、安卓都可以一键转移数据[通俗易懂]

    android换苹果,苹果换手机怎么转移数据?苹果、安卓都可以一键转移数据[通俗易懂]原标题:苹果换手机怎么转移数据?苹果、安卓都可以一键转移数据要更换手机的话,旧手机上的数据怎么办还真的是一个难题啊,毕竟手机用久了,上面的有各种重要的数据不是。那苹果手机换机的话,将数据进行转移,可以分成两种情况,一种吧,就是苹果转苹果,一种就是苹果转安卓了。一、苹果手机数据转移到新iPhone1、借助iCloud云备份手机自带的云备份功能,肯定是可以用上的。①手机连接上WiFi,然后在手机“设置…

  • SpringBoot面试题及答案140道(2021年最新)

    SpringBoot面试题及答案140道(2021年最新)工作5年,处于找工作中ing。今年10月份刚刚整理出来的SpringBoot面试题,时间比较赶就没有按照模块分类排序了。总而言之,顺序比较乱,希望大家耐着性子看。如果实在介意,评论告知,我会视情况作修改的。另外如果大家觉得我找的SpringBoot面试题答案不够清晰,欢迎私信或者评论只出,我看到都会去修改的!1、SpringBoot有哪些优点?SpringBoot的优点有:1、减少开发,测试时间和努力。2、使用JavaConfig有助于避免使用XML。3、避免大量的Maven…

  • SPI协议详解(图文并茂+超详细)

    SPI协议详解(图文并茂+超详细)先说串口因为之前写过一篇UART,通用串行异步通讯协议,UART的相关资料因为UART没有时钟信号,无法控制何时发送数据,也无法保证双发按照完全相同的速度接收数据。因此,双方以不同的速度进行数据接收和发送,就会出现问题。如果要解决这个问题,UART为每个字节添加额外的起始位和停止位,以帮助接收器在数据到达时进行同步;双方还必须事先就传输速度达成共识(设置相同的波特率,例如每秒9600位)。传输速率如果有微小差异不是问题,因为接收器会在每个字节的开头重新同步。相应的协议如下图所示;如果您注意到

  • 关于cv::imread读取图片类型的初探[通俗易懂]

    关于cv::imread读取图片类型的初探[通俗易懂]关于cv::imread读取图片类型的初探问题来源环境首先生成单通道和三通道的png图片cv::imread函数及其参数不同参数读取rgb图像不同参数读取单通道图片问题来源在处理深度图的时候,在用cv::imread读取深度图像时,本以为得到的是单通道图,但实际是三通道图。所以仔细看了一下cv::imread函数。环境Ubuntu16Opencv4.0.0首先生成单通道和三通…

    2022年10月14日
  • HashMap底层数据结构原理解析[通俗易懂]

    HashMap底层数据结构原理解析[通俗易懂]老师:JDK中我们最常用的一个数据类是HashMap。那么,谁可以回答一下HashMap的底层数据结构原理是什么呢?小明:老师,我知道。众所周知,HashMap是一个用于存储Key-Value键值对的集合,每一个键值对也叫做Entry。这些个键值对(Entry)分散存储在一个数组当中,这个数组就是HashMap的主干。HashMap数组每一个元素的初始值都是Null。…

发表回复

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

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