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

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

使用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错误。

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存储路径部分代码

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"