bootstrap fileinput插件 实现表单数据和图片异步上传的方法

bootstrap fileinput插件 实现表单数据和图片异步上传的方法

昨天在做毕业设计的时候在一个地方遇到了困难，是想实现图片和form表单的数据提交保存到数据库，但是图片栏保存到数据库的是图片地址。经过一番的查找资料，终于在这篇文章https://blog.csdn.net/s740556472/article/details/71617402给了我启发，感谢这位博主。下面就来分享我的心得

准备工作
先下载必要的 bootstrap-fileinput 插件
bootstrap-fileinput插件下载地址

页头配置：

<script type="text/javascript" src="${APP_PATH}/static/bootstrap-fileinput/fileinput.min.js"></script>           
<script type="text/javascript" src="${APP_PATH}/static/bootstrap-fileinput/locales/zh.js"></script>          
<link href="${APP_PATH}/static/bootstrap-fileinput/fileinput.min.css" rel="stylesheet" />

jsp页面表单
为了方便理解，我把多余的样式，属性都删除了

<form action="news/addnews.action"  method="POST"  id="addnew_form">
					<input type="text" name="head" >
					 <input type="file" name="newpic"  class="myfile"/> 
					<input type="text" name="body">
        			<button type="submit" >推送</button>
        	</form>

jsp页面js

$(".myfile").fileinput({
      uploadUrl:"${APP_PATH}/news/uploadFile", //接受请求地址
      uploadAsync : true, //默认异步上传
      showUpload : false, //是否显示上传按钮,跟随文本框的那个
      showRemove : false, //显示移除按钮,跟随文本框的那个
      showCaption : true,//是否显示标题,就是那个文本框
      showPreview : true, //是否显示预览,不写默认为true
      dropZoneEnabled : false,//是否显示拖拽区域，默认不写为true，但是会占用很大区域
      //minImageWidth: 50, //图片的最小宽度
      //minImageHeight: 50,//图片的最小高度
      //maxImageWidth: 1000,//图片的最大宽度
      //maxImageHeight: 1000,//图片的最大高度
      //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
      //minFileCount: 0,
      maxFileCount : 1, //表示允许同时上传的最大文件个数
      enctype : 'multipart/form-data',
      validateInitialCount : true,
      previewFileIcon : "<i class='glyphicon glyphicon-king'></i>",
      msgFilesTooMany : "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
      allowedFileTypes : [ 'image' ],//配置允许文件上传的类型
      allowedPreviewTypes : [ 'image' ],//配置所有的被预览文件类型
      allowedPreviewMimeTypes : [ 'jpg', 'png', 'gif' ],//控制被预览的所有mime类型
      language : 'zh'
  })
  //异步上传返回结果处理
  $('.myfile').on('fileerror', function(event, data, msg) {
      console.log("fileerror");
      console.log(data);
  });
  //异步上传返回结果处理
  $(".myfile").on("fileuploaded", function(event, data, previewId, index) {
      console.log("fileuploaded");
      var ref = $(this).attr("data-ref");
      $("input[name='" + ref + "']").val(data.response.url);

  });

  //上传前
  $('.myfile').on('filepreupload', function(event, data, previewId, index) {
      console.log("filepreupload");
  });

contorller 后台
第一步：图片上传

@RequestMapping("news/uploadFile")
    public String uploadFile(MultipartFile newpic)
            throws IllegalStateException, IOException {
       		 // 原始图片名称
        String oldFileName = newpic.getOriginalFilename(); // 获取上传文件的原名
			// 存储路径
        String saveFilePath = "D://新建文件夹 (4)//house//src//main//webapp//housepic";
            // 新的图片名称
            String newFileName = UUID.randomUUID() + oldFileName.substring(oldFileName.lastIndexOf("."));
            // 新图片
            File newFile = new File(saveFilePath + "\\" + newFileName);
            // 将内存中的数据写入磁盘
            newpic.transferTo(newFile);
            // 将路径名存入全局变量mynewpic
            mynewpic = "./housepic/"+newFileName;
    }

全局变量：

private String mynewpic;

点击上传按钮后，就会执行第一步的方法，将图片保存到路径下，然后定义新的图片名存入全局变量中

第二步：存入表单
同个controller下的方法：

@RequestMapping("/addnews")
	public String addnews(News news,HttpServletRequest request){
		news.setNewpic(mynewpic);
		newService.insert(news);
		return "redirect:/manager_news.jsp";
	}

service层

public void insert(News news) {
		// TODO Auto-generated method stub
		newsMapper.insert(news);
	}

最后点击推送，完整的数据表单就能保存到数据库中啦。

注意这里设计数据库的时候newpic列长度最好设置在100以上

如果各位前辈有更好的方法或者意见欢迎在下面评论留言，本文部分内容转载至https://blog.csdn.net/s740556472/article/details/71617402，若有侵权，联系必删