fileinput文件上传控件应用

你还在为上传图片简陋的样式而烦恼吗？一个炒鸡好用的文件上传控件分享给你嘻嘻

样式：

对啦，这个是bootstrap的哦～

那用到人家的样式，是不是就要导入人家的CSS文件呢，各个操作是不是又是用人家的JS完成的呢，所以是不是也要用到人家的JS文件呢，还有一个汉化包嘻嘻，所以在使用之前，我们要导入三个表呢～（稍后我把这三个文件传上来，放心啦，不要C币的嘻嘻）

   <script src="../../js/fileinput.min.js"></script>
    <script src="../../js/fileinput_locale_zh.js"></script>
    <link rel="stylesheet" href="../../css/fileinput.min.css">

 <input type="file" id="file" class="form-control"  class="file" name="file">


    $("#file").fileinput({
        'language':"zh",
        'previewFileType':'image',
        'allowedFileTypes':['image'],
        'allowedFileExtensions':['jpg','jpeg','png'],
        'showUpload':false,
        'showRemove':false,
        'dropZoneEnabled':false,
        'uploadUrl': "../../WeChatMaterial/upload", // server upload action
        'uploadAsync': false,
        'minFileCount': 1,
        'maxFileCount': 1,
        'maxFileSize': 5000,
        'autoReplace':true
    }).on('filebatchuploadsuccess', function(event, data) {
        var response = data.response;
        if (response.result === 'ok') {
            document.getElementById("img").value = response.url;
        }
    }).on("filebatchselected", function() {
        $(this).fileinput("upload");
    });

然后对上面的参数有不懂的童鞋们就自己找度娘看看相关API巴拉巴拉的说明把～ps（有了这个，真是给我们只做后台研发朋友人省了太多太多事了啊！！！）

对啦对啦，再给大家贴一下我的后台吧（因为后台是要像微信发送一个请求的，请求的时候用的是file，所以对multipartfile做了和file的转换呢～）对了对了，关于转换大家可以看看我大概上一个或者上上个博客

    @PostMapping("upload")
    @ResponseBody
    public void upload(HttpServletResponse response,MultipartFile file)throws IOException{
        //MultipartFile file = ((MultipartHttpServletRequest) request).getFile("file");
        PrintWriter writer = response.getWriter();
        File f = null;
        if(file.equals("")||file.getSize()<=0){
            file = null;
        }else{
            InputStream ins = file.getInputStream();
            f=new File(file.getOriginalFilename());
            FileUtil.inputStreamToFile(ins, f);
        }

        JSONObject jsonObject= weChatMaterialService.getMediaId("image",f);
        writer.print(jsonObject);
        writer.flush();
        writer.close();

        File del = new File(f.toURI());
        del.delete();
        System.out.println(jsonObject);

    }

额，大家先不要吐槽我用了PrintWriter.... 这些像前台传了些数据的这用古老做法哈（虽然我现在也不知道我们公司是用的怎样的”先进“方法传一个json给前台）

fileinput文件上传控件应用

相关推荐