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

标签：bootstra   png   enc   public   led   变量   boot   ping   files   

<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" />

html:

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

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");
  });

@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;
    }

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

标签：bootstra   png   enc   public   led   变量   boot   ping   files   

原文地址：https://blog.51cto.com/357712148/2503286