layui 实现图片上传前后台

js部分:
  var uploadInst = upload.render({
        elem: '#testList' //绑定元素
        ,url: ctx+'/uploadController/uploadImage' //上传接口
        ,size:5*1024
        ,method:'post'
        , multiple: true
        ,auto: false
        ,bindAction: '#testListAction'
        ,choose: function(obj){
            debugger;
            var files = obj.pushFile(); //将每次选择的文件追加到文件队列

            //图像预览,如果是多文件,会逐个添加。(不支持ie8/9)

            obj.preview(function(index, file, result){

                var imgobj = new Image(); //创建新img对象

                imgobj.src = result; //指定数据源

                imgobj.className = 'thumb';

                imgobj.onclick = function(result) {

                    //单击预览

                    img_prev.src = this.src;

                    var w = $(window).width() - 42, h = $(window).height() - 42;

                    layer.open({

                        title: '预览',

                        type: 1,

                        area: [300,300], //宽高

                        content: $('#prevModal')

                    });

                };

                document.getElementById("div_prev").appendChild(imgobj); //添加到预览区域

            });

        }
        ,done: function(res, index, upload){
            if(res.code == 0) //上传成功
                var tr = demoListView.find('tr#upload-'+ index)
                    ,tds = tr.children();
            tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
            tds.eq(3).html(''); //清空操作
            return delete this.files[index]; //删除文件队列已经上传成功的文件

        } //code为后台传回来的数据,具体多少自己定,

java 后台部分:

  private List<PictureDto> upload(HttpServletRequest request){
        List<PictureDto> pictureDtoList = new ArrayList<PictureDto>();
        // 创建一个通用的多部分解析器
        CommonsMultipartResolver multipartResolver =
                new CommonsMultipartResolver(request.getSession().getServletContext());

        // 判断 request 是否有文件上传,即多部分请求
        if (multipartResolver.isMultipart(request)) {
            // 转换成多部分request
            MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
            // 取得request中的所有文件名
            Iterator<String> iter = multiRequest.getFileNames();

            while (iter.hasNext()) {
                MultipartFile importFile = multiRequest.getFile(iter.next());
                //文件名
                String fileName = importFile.getOriginalFilename();

                // importFile.getInputStream();

                //上传
                PictureDto pictureDto =  uploadFileImage("",fileName,importFile);
                if(pictureDto!=null){
                    pictureDtoList.add(pictureDto);
                }
            }
        }
        return pictureDtoList;
    }

    /**
     * 上传文件到服务器
     * @param URL
     * @param fileName
     * @param file
     * @return
     */
    private PictureDto uploadFileImage(String URL,String fileName,MultipartFile multipartFile){
        //上传图片
        URL = "";

        PictureDto pictureDto = null;

        UploadFileUtil uploadFileUtil = new UploadFileUtil();
        try {
            String result = uploadFileUtil.uploadFile(URL,fileName,multipartFile.getInputStream());
            JSONObject resultJson = JSON.parseObject(result);
            JSONObject dataJson = resultJson.getJSONObject("TData");

            pictureDto = new PictureDto();
            pictureDto.setBigPictureUrl(dataJson.getString("picUrl_500"));
            pictureDto.setMiddlePictureUrl(dataJson.getString("picUrl_50_percent"));
            pictureDto.setSmallPictureUrl(dataJson.getString("picUrl_20_percent"));
        } catch (IOException e) {
            e.printStackTrace();
        }
        return pictureDto;
    }

 

  • 3
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值