bootstrapfileinput上传图片

引入js

<!-- 组件上传 -->
<link rel="stylesheet"
    href="../static/plugs/css/fileinput.css">
<script type="text/javascript"
    src="../static/plugs/js/fileinput.min.js"></script>
    <!-- 这个是汉化-->
<script type="text/javascript"

    src="../static/plugs/js/locales/zh.js"></script>




  <input id = "kv-explorer" type="file" name="myfile" data-ref="companyImage"

                                class="col-sm-10 myfile" value="" />
             <input type="hidden"

                                name="companyImage" value="">  

   $(".myfile").fileinput({
        //上传的地址
        uploadUrl:"${pageContext.request.contextPath}/companyBriefController/uploadingFile",
        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',
        /* uploadExtraData:function (previewId, index) {    
          var data = {
               URL:"\\temp\\upload\\logo"
            };
          return data;
          上传传值
        } */
    })
    //异步上传返回结果处理
    $('.myfile').on('fileerror', function(event, data, msg) {
        console.log("fileerror");
        console.log(data);
    });
    //异步上传返回结果处理
    $(".myfile").on("fileuploaded", function(event, data, previewId, index) {
        var ref = $(this).attr("data-ref");
        $("input[name='" + ref + "']").val(data.response.url);


    });


    //同步上传错误处理
    $('.myfile').on('filebatchuploaderror', function(event, data, msg) {
        console.log("filebatchuploaderror");
        console.log(data);
    });


    //同步上传返回结果处理
    $(".myfile").on("filebatchuploadsuccess",
            function(event, data, previewId, index) {
                console.log("filebatchuploadsuccess");
                console.log(data);
            });


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


<后台>

@RequestMapping("/uploadingFile")

    @ResponseBody
    public Map<String, Object> uploadFile(MultipartFile myfile,HttpServletRequest request,
HttpServletResponse response)
            throws IllegalStateException, IOException {
        // 原始名称
        String oldFileName = myfile.getOriginalFilename(); // 获取上传文件的原名
        //获取服务器指定文件存取路径   
        String savedDir = request.getSession().getServletContext().getRealPath("");
        savedDir=savedDir.substring(0,savedDir.lastIndexOf("\\"));
        savedDir+=ConstantConfiguration.logoimgUrl;
        //获取36位的 UUID.randomUUID()
        // 上传图片
        if (myfile != null && oldFileName != null && oldFileName.length() > 0) {
            // 新的图片名称
            String newFileName = this.getDateFormat() + oldFileName.substring(oldFileName.lastIndexOf("."));
            // 新图片
            File newFile = new File(savedDir + "\\" + newFileName);
            // 将内存中的数据写入磁盘
            myfile.transferTo(newFile);
            // 将新图片名称返回到前端
            Map<String, Object> map = new HashMap<String, Object>();
            File f = new File(this.getClass().getResource("/").getPath()); 
            System.out.println("f "+Thread.currentThread().getContextClassLoader().getResource(".").getPath() );
            map.put("success", "成功啦");
            int i = newFile.toString().indexOf("webapps");
            String url = newFile.toString().substring(i+8, newFile.toString().length());
            System.out.println(url);
            map.put("url", url);
            return map;
        } else {
            Map<String, Object> map = new HashMap<String, Object>();
            map.put("error", "图片不合法");
            return map;
        }
    }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值