精华内容
下载资源
问答
  • layui上传图片到servlet后台处理,并且压缩图片 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf...

    layui上传图片到servlet后台处理,并且压缩图片

        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            request.setCharacterEncoding("utf-8"); // 设置编码
            
            System.out.println("上传照片");
            String id= request.getParameter("ID");
            System.out.println(id);
            JSONObject jsonobj = new JSONObject();
            int returnTag = -1;
            String saveName=null;
            //上传的文件名
            String filename=null;
            try {
                // 获得磁盘文件条目工厂
                DiskFileItemFactory factory = new DiskFileItemFactory();
                factory.setRepository(new File(TEMP_FOLDER));
                // 设置 缓存的大小,当上传文件的容量超过该缓存时,直接放到 暂时存储室
                factory.setSizeThreshold(1024 * 1024);
                
                // 高水平的API文件上传处理
                ServletFileUpload upload = new ServletFileUpload(factory);
     
                // 可以上传多个文件
                List<FileItem> list = upload.parseRequest(request);
                System.out.println("list==="+list);
                // 获取上传的文件
                String base64 = "";
                for (FileItem file : list) {
                    FileItem item = file;
                    // 获取文件名
                    filename = getUploadFileName(item);
                    if(filename == null){
                    }else{
                        String suffix = filename.substring(filename.lastIndexOf(".") + 1);
                        System.out.println("文件格式===="+suffix);
                        System.out.println("获取的文件后缀名=========================" + suffix);
                        String[] regular = { "JPG", "GIF","PNG","JPEG" ,"BMP"};
                        boolean flag = false;

                        // 保存后的文件名
                        saveName = new Date().getTime() + filename.substring(filename.lastIndexOf("."));
                        item.write(new File(PATH_FOLDER, saveName));
                        
                         //判断文件格式是否是图片
                        for (String str : regular) {
                            if (suffix.equalsIgnoreCase(str)) {
                                flag = true;
                            }
                        }
                        if (flag) {
                            long length = new File(PATH_FOLDER+"/"+saveName).length();
                            System.out.println(length);
                            if (length / 1048576 >= 0.5) {// 如果图片大于等于0.5MB 则按80%缩小
                                 try {
                                      zoom(PATH_FOLDER+"/"+saveName,PATH_FOLDER+"/"+saveName, length, 0.5);
                                 } catch (IOException e) {
                                     System.out.println("出错啦:" + e);
                                 }
                             }
                        }
                        
                        // base64
                        base64 = encodeBase64File(PATH_FOLDER+"/"+saveName);
                        System.out.println(base64);
                        System.out.println("luuuuuuuuuuuuuuuuuuuu="+PATH_FOLDER+"/"+saveName);
                    }
                }
                if (returnTag != -1) {
                    // 请求失败
                    jsonobj.put("STATUS", "1");
                } else {
                    jsonobj.put("code", 0);
                }
                response.getWriter().write(jsonobj.toString());
            }catch (Exception e) {
                System.out.println("出错啦");
                e.printStackTrace();
                jsonobj.put("errorCode", 0);
                response.getWriter().write(jsonobj.toString());
                response.getWriter().close();
            }
        }

        private String getUploadFileName(FileItem item) {
            // 获取路径名
            String value = item.getName();
            if(value == null){
                return null;
            }else{
                // 索引到最后一个反斜杠
                int start = value.lastIndexOf("/");
                // 截取 上传文件的 字符串名字,加1是 去掉反斜杠,
                String filename = value.substring(start + 1);
                return filename;
            }
        }
        
        public void init(ServletConfig config) throws ServletException {
            ServletContext servletCtx = config.getServletContext();
            // 初始化路径
            // 缩略图保存路径
            PATH_FOLDER = "F:/file";
            //PATH_FOLDER = "/apache-tomcat-7.0.63/img";
            System.out.println("保存缩略图的目录===========" + PATH_FOLDER);
            
            // 存放临时文件的目录,存放xxx.tmp文件的目录
            TEMP_FOLDER = servletCtx.getRealPath("/temp");
            System.out.println("存放临时文件的目录===========" + TEMP_FOLDER);
            
            File dir = new File(PATH_FOLDER);
            if (!dir.isDirectory()) {
                dir.mkdir();
            }
            File dir2 = new File(TEMP_FOLDER);
            if (!dir2.isDirectory()) {
                dir2.mkdir();
            }
        }

        
        /**
         * 获取参数
         * @param request
         * @return
         */
        private String getParams(HttpServletRequest request){
            StringBuilder param = new StringBuilder();
            try{
                BufferedReader br = new BufferedReader(new InputStreamReader(request.getInputStream(),"utf-8"));
                String line = null;
                while((line=br.readLine())!=null){
                    param.append(line);
                }
            }catch (Exception e) {
                e.printStackTrace();
            }
            return param.toString();
        }
        
        
         public static String encodeBase64File(String path) throws Exception {
             System.out.println("开始执行");
                File file = new File(path);
                FileInputStream inputFile = new FileInputStream(file);
                byte[] buffer = new byte[(int)file.length()];
                inputFile.read(buffer);
                inputFile.close();
                return new BASE64Encoder().encode(buffer);
         }
         
         public static void main(String[] args) {
             //Random random = new Random();
             //System.out.print(random.nextInt(100));
             String fullPath="F://file/1568086981813.jpg";
             String newPath="F://file/image/1568086981813.jpg";

             long length = new File(fullPath).length();
             if (length / 1048576 >= 0.5) {// 如果图片大于等于0.5MB 则按80%缩小
                 try {
                      zoom(fullPath, newPath, length, 0.5);
                 } catch (IOException e) {
                     System.out.println("出错啦:" + e);
                 }
             }
             String base64Str;
            try {
                base64Str = encodeBase64File(newPath);
                //System.out.println("base64Str===" + base64Str);
            } catch (Exception e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
             //String newPath = Base64Util.getBase64Str(newPath);

        }
         
        // 缩图
        public static void zoom(String oldFile, String zoomFile,long length,double newRate) throws IOException {
            DecimalFormat df = new DecimalFormat("0.00");// 设置保留位数
            double rate=0.8;
            System.out.println("原始图片大小:" + df.format((float) length / mb) + "MB");
            long newfile = new File(oldFile).length();
            int i = 1;
            // 如果首次压缩还大于2MB则继续处理
            while ((float) newfile / mb >= newRate) {
                System.out.println("压缩后图片大小:" + newfile);
                rate = rate - 0.05;// 暂定按照0.03频率压缩
                System.out.println(i + " rate=" + rate);
                BufferedImage srcImage = ImageIO.read(new File(oldFile));
                int WIDTH = (int) (srcImage.getWidth() * rate);
                int HEIGHT = (int) (srcImage.getHeight() * rate);
                BufferedImage image = new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);
                Graphics g = image.getGraphics();
                g.drawImage(srcImage, 0, 0, WIDTH, HEIGHT, null);
                // 缩小
                ImageIO.write(image, "jpg", new File(zoomFile));
                i++;
                newfile = new File(zoomFile).length();
                System.out.println("压缩次数:" + i);
            }
            // 调整方向
             BufferedImage newImage = ImageIO.read(new File(zoomFile));
             ImageIO.write(newImage, "jpg", new File(zoomFile));
            System.out.println("处理后图片路径:" + zoomFile + ";缩小之后大小:"
                    + df.format((float) new File(zoomFile).length() / mb) + "MB");
        }

    }
     

    展开全文
  • 故此,借用其上传功能,自己将图片压缩并上传.Layui 上传图片官方文档:https://www.layui.com/doc/modules/upload.htmlHTML:```html上传图片```tips:不一定非要是input标签,无论是什么标签,layui upload是根据...

    在工作中使用到layui,发现其上传功能并不是很适用于自己的项目。故此,借用其上传功能,自己将图片压缩并上传.

    Layui 上传图片官方文档:https://www.layui.com/doc/modules/upload.html

    HTML:

    ```html

    上传图片

    ```

    tips:不一定非要是input标签,无论是什么标签,layui upload是根据其 id 值进行操作的

    JS:

    ```js

    //使用layui上传图片

    layui.use('upload', function () {

    var upload = layui.upload;

    var layer = layui.layer;

    //执行实例

    var uploadInst = upload.render({

    elem: '#isTest', //绑定元素

    url: '/upload/', //上传接口

    accept: 'images',

    auto: false,

    choose: function (obj) { //选择文件后的回调

    var files = obj.pushFile();

    var filesArry = [];

    for (var key in files) { //将上传的文件转为数组形式

    filesArry.push(files[key])

    }

    var index = filesArry.length - 1;

    var file = filesArry[index]; //获取最后选择的图片,即处理多选情况

    if (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion.split(";")[1]

    .replace(/[ ]/g, "").replace("MSIE", "")) < 9) {

    return obj.upload(index, file)

    }

    canvasDataURL(file, function (blob) {

    var aafile = new File([blob], file.name, {

    type: file.type

    })

    var isLt1M;

    if (file.size < aafile.size) {

    isLt1M = file.size

    } else {

    isLt1M = aafile.size

    }

    if (isLt1M / 1024 / 1024 > 2) {

    return layer.alert('上传图片过大!')

    } else {

    if (file.size < aafile.size) {

    return obj.upload(index, file)

    }

    obj.upload(index, aafile)

    }

    })

    },

    done: function (res) {

    //上传完毕回调

    },

    error: function () {

    //请求异常回调

    }

    });

    });

    function canvasDataURL(file, callback) { //压缩转化为base64

    var reader = new FileReader()

    reader.readAsDataURL(file)

    reader.onload = function (e) {

    const img = new Image()

    const quality = 0.8 // 图像质量

    const canvas = document.createElement('canvas')

    const drawer = canvas.getContext('2d')

    img.src = this.result

    img.onload = function () {

    canvas.width = img.width

    canvas.height = img.height

    drawer.drawImage(img, 0, 0, canvas.width, canvas.height)

    convertBase64UrlToBlob(canvas.toDataURL(file.type, quality), callback);

    }

    }

    }

    function convertBase64UrlToBlob(urlData, callback) { //将base64转化为文件格式

    const arr = urlData.split(',')

    const mime = arr[0].match(/:(.*?);/)[1]

    const bstr = atob(arr[1])

    let n = bstr.length

    const u8arr = new Uint8Array(n)

    while (n--) {

    u8arr[n] = bstr.charCodeAt(n)

    }

    callback(new Blob([u8arr], {

    type: mime

    }));

    }

    ```

    一键复制

    编辑

    Web IDE

    原始数据

    按行查看

    历史

    展开全文
  • 使用Layui上传图片,并进行压缩

    千次阅读 2019-04-11 10:39:57
    故此,借用其上传功能,自己将图片压缩并上传. Layui上传图片官方文档:https://www.layui.com/doc/modules/upload.html HTML: <button type="button" class="layui-btn" id="test1"> <i class=...

    在工作中使用到layui,发现其上传功能并不是很适用于自己的项目。故此,借用其上传功能,自己将图片压缩并上传.

    Layui 上传图片官方文档:https://www.layui.com/doc/modules/upload.html

    HTML: 

    <button type="button" class="layui-btn" id="test1">
      <i class="layui-icon">&#xe67c;</i>上传图片
    </button>

    tips:不一定非要是input标签,无论是什么标签,layui upload是根据其 id 值进行操作的

    JS:  

    <script>
    //使用layui上传图片
      layui.use('upload', function () {
        var upload = layui.upload;
        var layer = layui.layer;
    
        //执行实例
        var uploadInst = upload.render({
          elem: '#isTest', //绑定元素
          url: '/upload/', //上传接口
          accept: 'images',
          auto: false,
    
          choose: function (obj) { //选择文件后的回调
            var files = obj.pushFile();
            var filesArry = [];
            for (var key in files) { //将上传的文件转为数组形式
              filesArry.push(files[key])
            }
            var index = filesArry.length - 1;
            var file = filesArry[index]; //获取最后选择的图片,即处理多选情况
    
            if (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion.split(";")[1]
                .replace(/[ ]/g, "").replace("MSIE", "")) < 9) {
              return obj.upload(index, file)
            }
            canvasDataURL(file, function (blob) {
              var aafile = new File([blob], file.name, {
                type: file.type
              })
              var isLt1M;
              if (file.size < aafile.size) {
                isLt1M = file.size
              } else {
                isLt1M = aafile.size
              }
    
              if (isLt1M / 1024 / 1024 > 2) {
                return layer.alert('上传图片过大!')
              } else {
                if (file.size < aafile.size) {
                  return obj.upload(index, file)
                }
                obj.upload(index, aafile)
              }
            })
          },
          done: function (res) {
            //上传完毕回调
          },
          error: function () {
            //请求异常回调
          }
        });
      });
    
      function canvasDataURL(file, callback) { //压缩转化为base64
        var reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = function (e) {
          const img = new Image()
          const quality = 0.8 // 图像质量
          const canvas = document.createElement('canvas')
          const drawer = canvas.getContext('2d')
          img.src = this.result
          img.onload = function () {
            canvas.width = img.width
            canvas.height = img.height
            drawer.drawImage(img, 0, 0, canvas.width, canvas.height)
            convertBase64UrlToBlob(canvas.toDataURL(file.type, quality), callback);
          }
        }
      }
    
      function convertBase64UrlToBlob(urlData, callback) { //将base64转化为文件格式
        const arr = urlData.split(',')
        const mime = arr[0].match(/:(.*?);/)[1]
        const bstr = atob(arr[1])
        let n = bstr.length
        const u8arr = new Uint8Array(n)
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n)
        }
        callback(new Blob([u8arr], {
          type: mime
        }));
      }
    
    </script>

     

    展开全文
  • tp5+layui上传图片图片压缩

    千次阅读 2018-07-17 15:38:13
    使用的是Layui的css样式 h5代码: &lt;div class="controls need-img"&gt; &lt;p style="text-align: left;color: #ccc;margin-left: 0.26rem;margin-top: 0.26rem"&gt;亲...

    使用的是Layui的css样式

    h5代码:

    <div class="controls need-img">
        <p style="text-align: left;color: #ccc;margin-left: 0.26rem;margin-top: 0.26rem">亲!最多可上传4张图片哦。</p>
        <div class="add-img" id="upload_img_icon" style="float: left">
        </div>
    </div>

    js代码:

        var upurl = "{:url('Index/upload1')}"; //上传图片提交地址
        layui.use(['layer','upload'], function(){
            var layer = layui.layer;
            var upload = layui.upload;
            upload.render({ //上传图片
                elem: '#upload_img_icon',
                url: upurl,
                multiple: true, //是否允许多文件上传。设置 true即可开启。不支持ie8/9
                auto:true,//自动上传
                before: function(obj) {
                    layer.msg('图片上传中...', {
                        icon: 16,
                        shade: 0.01,
                        time: 0
                    })
                },
                done: function(res) {
                    layer.close(layer.msg('上传成功!'));//下面是把上传以后的图片显示出来
                    var html='<div class="img"  style="float: left">'+
                        '<i class="layui-icon del_img" style="position: relative;right: -1.5rem;top: -0.45rem;">&#x1006;</i>'+
                    '<img class="wz_img" src="'+res.data+'" alt="" style="width: 1.5rem;height:1.5rem;margin:0.26rem 0 0.26rem 0rem;">'+
                        '</div>';
                    $('.need-img').append(html);
    //                $('.upload-img-box').append(
    //                    '<dd class="upload-icon-img"> <div class="upload-pre-item" style="width:120px;height:100px;float:left;margin-left:15px;"> <i onclick="deleteImg($(this))" class="layui-icon">X</i>                    <img src="' + res.data + '" class="img" style="width:100%;">  <input type="hidden" class="asd" name="case_images[]" value="' + res.data + '" /> </div></dd>');
                }
                ,error: function(){
                    layer.msg('上传错误!');
                }
        });
    
    });

    php代码:

    //文件上传代码--带缩率图
    private function uploads() {
        $params = $this->request->param();
        $file = request()->file('file');
        // 移动到框架应用根目录/public/uploads/ 目录下
        $file_path=ROOT_PATH . 'public/uploads/';
        $info = $file->move($file_path);
        $reubfo = array(); //定义一个返回的数组
        if ($info) {
            $reubfo['info'] = 1;
            $reubfo['savename'] = $info->getSaveName();
            $image = \think\Image::open(ROOT_PATH.'public/uploads'.DS.$reubfo['savename']);
            $width = $image->width();
            $height = $image->height();
            $path='sm_file/uploads/'.date('Ymd');
            if (!$this->checkPath($path)) {
                $reubfo['err'] = '生成缩略图失败';
            }
            $image->thumb(200,200,1)->save(ROOT_PATH.'public/sm_file/uploads'.DS.$reubfo['savename']);
        } else { // 上传失败获取错误信息
            $reubfo['info'] = 0;
            $reubfo['err'] = $file->getError();
        }
        return $reubfo;
    }
    展开全文
  • C#使用Layui上传图片,并进行压缩及多图片上传可删除(呕心沥血之作) Css: <style type="text/css"> .uploader-list { margin-left: -15px; } .uploader-list .info { position: relative; ...
  • 一、关于js上传图片压缩的方法,百度有很多种方法,这里我参考修改了一下:functionphotoCompress(file, w, objDiv) {var ready = newFileReader();/*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,...
  • 使用js在layui中实现上传图片压缩发布于 2020-6-7|复制链接摘记: 一、关于js上传图片压缩的方法,百度有很多种方法,这里我参考修改了一下```javascriptfunction photoCompress(file, w, objDiv) {var ready = new ...
  • 主要介绍了使用js在layui中实现上传图片压缩layui 是一款采用自身模块规范编写的前端 UI 框架,js上传图片压缩百度有很多方法,,需要的朋友可以参考下
  • 示例中使用的是Layui 2.5.6版本,需要的请到官网下载 首先添加上传图片的按钮控件: <button type="button" class="layui-btn" style="margin-top: 10px;width: 100%" id="upload"> <i class="layui-icon...
  • 一、关于js上传图片压缩的方法,百度有很多种方法,这里我参考修改了一下: function photoCompress(file, w, objDiv) { var ready = new FileR...
  • 是因为手机拍的原图太大 这里做一下压缩即可 <button type="button" class="layui-btn" id="test1"> <i class="layui-icon">&#xe67c;... //使用layui上传图片 layui.use('upload',...
  • 改造layui的上传组件,实现将大图片压缩然后进行上传,感兴趣的可以下载!

空空如也

空空如也

1 2 3 4
收藏数 65
精华内容 26
关键字:

layui压缩图片