bootstrapfileinput上传图片

阅读: 评论:0

bootstrapfileinput上传图片

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:"${tPath}/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 + "']").sponse.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 = OriginalFilename(); // 获取上传文件的原名
        //获取服务器指定文件存取路径   
        String savedDir = Session().getServletContext().getRealPath("");
        savedDir=savedDir.substring(0,savedDir.lastIndexOf("\"));
        savedDir+=ConstantConfiguration.logoimgUrl;
        //获取36位的 UUID.randomUUID()
        // 上传图片
        if (myfile != null && oldFileName != null && oldFileName.length() > 0) {
            // 新的图片名称
            String newFileName = DateFormat() + oldFileName.substring(oldFileName.lastIndexOf("."));
            // 新图片
            File newFile = new File(savedDir + "\" + newFileName);
            // 将内存中的数据写入磁盘
            ansferTo(newFile);
            // 将新图片名称返回到前端
            Map<String, Object> map = new HashMap<String, Object>();
            File f = new Class().getResource("/").getPath()); 
            System.out.println("f "+Thread.currentThread().getContextClassLoader().getResource(".").getPath() );
            map.put("success", "成功啦");
            int i = String().indexOf("webapps");
            String url = String().substring(i+8, String().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;
        }
    }

本文发布于:2024-02-04 23:20:20,感谢您对本站的认可!

本文链接:https://www.4u4v.net/it/170718701760689.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

留言与评论(共有 0 条评论)
   
验证码:

Copyright ©2019-2022 Comsenz Inc.Powered by ©

网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22/a> 网站地图23