实现效果:

速度过快，调式浏览器方式:F12

后台java代码

public String imageshangchuan(@RequestPart("xxx") MultipartFile multipartFile, Model model, HttpServletRequest request) {

        if (!multipartFile.getContentType().contains("image/")) {

            model.addAttribute("err", "只能是图片文件！");

            return "/inputfile";

        }

        if (multipartFile.getSize() > 1024 * 1024 * 5) {

            model.addAttribute("err", "只能是5M以下！");

            return "/inputfile";

        }

        //取得相对路径

        String basePath = request.getServletContext().getRealPath("/img");

        File files = new File(basePath);

        if(!files.exists()){

            files.mkdir();

        }

        String rekativePath;

        try {

            rekativePath = makeImagePath(basePath, multipartFile.getOriginalFilename());

            File file = new File(rekativePath);

            file.getParentFile().mkdir();

            multipartFile.transferTo(file);

        } catch (IOException e) {

            model.addAttribute("err", "上传失败，请重试");

            return "/inputfile";

        }

        return "/index";

        }

        public String makeImagePath (String basePath, String fileName){

            Date date = new Date();

            //String[] filename = simpleFile(fileName);

            return String.format("%s%s%s%supload_%s_%s.%s",

                    basePath,

                    File.separator,

                    new SimpleDateFormat("yyyyMMdd").format(date),

                    File.separator,

                    "11",

                    new SimpleDateFormat("hhmmss").format(date),

                    "jpg"

            );

        }

        public String[] simpleFile (String file){

            int sum = file.lastIndexOf(".");

            return new String[]{

                    file.substring(0, sum),

                    file.substring(sum + 1)

            };

        }

方法一：canvas实现

<html>

<head>

    <title>Title</title>

</head>

<body>

<input type="file" id="myfile"/>

<canvas id="myCanvas" width="200" height="250" style="border:1px solid #d3d3d3;">

</canvas>

<button onclick="test()">提交</button>

<script src="css/jquery-1.11.3.js"></script>

<script>

    //选择图片后

    myfile.onchange=function () {

        createURLImg(myfile.files[0]);

    }

    var pen=myCanvas.getContext("2d");

    //加载入canvas

    function createURLImg(file,callback) {

        var imgUrl=URL.createObjectURL(file);

        var image=new Image();

        image.src=imgUrl;

        image.onload=function (ev) {

            pen.drawImage(image,0,0,200,250);

            if(callback) callback();

            URL.revokeObjectURL(imgUrl);

        }

    }

    //提交按钮

    function test() {

        myCanvas.toBlob(function (result) {

            var form=new FormData();

            form.append("xxx",result);

            ajax(form);

        })

    }

    function biafenb(r) {

        if(!pen) pen=myCanvas.getContext("2d");

        pen.save();

        pen.globalAlpha=0.3;

        pen.fillRect(0,(1-r)*200,200,250);

        pen.globalAlpha=1;

        pen.fillStyle = "white";

        pen.font = "20px 微软雅黑";

        pen.textAlign='center';

        pen.fillText(Math.round(r*100)+"%",100,100);

        pen.restore();

    }

    function ajax(formData) {

        $.ajax({

            url:"/bbbbb",

            type:"post",

            Accept:"html/text;chatset=utf-8",

            contentType:false,

            data:formData,

            processData:false,

            xhr: function () {

                var myXhr = $.ajaxSettings.xhr();

                myXhr.upload.onprogress=function (ev) {

                    pen.clearRect(0,0,200,250);

                    createURLImg(myfile.files[0],function () {

                        biafenb(ev.loaded/ev.total);

                    })

                }

                return myXhr;

            }, success: function (data) {

                console.log("上传成功!!!!");

            }, error: function () {

                console.log("上传失败！");

            }

        })

    }

</script>

</body>

</html>

方法二：img+canvas实现

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>canvas + ajax</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"

          integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <style>

        #myimg {

            border: 3px solid gray;

            border-radius: 5px;

            position: absolute;

            top: 0;

            left: 0;

        }

        #mymask {

            position: absolute;

            top: 0;

            left: 0;

        }

    </style>

</head>

<body>

<div class="container">

    <div style="margin-top: 2em;">

        <input type="file" id="myfile" style="display: none"> <!-- 选择文件后，要预览 -->

        <button class="btn btn-primary" onclick="myfile.click()">选择图片</button>

        <button class="btn btn-primary" onclick="clickMe()">上传图片</button>

    </div>

    <div style="position: relative">

        <img src="" id="myimg" title="暂时没有上传" width="200" height="200"/>

        <canvas id="mymask" width="200" height="200">不支持canvas</canvas>

    </div>

</div>

<script>

    var ctx;

    myfile.onchange = () => { // 预览图片

        var imgUrl = URL.createObjectURL(event.target.files[0]);

        myimg.src = imgUrl;

        myimg.onload = () => URL.revokeObjectURL(imgUrl);

    };

    function clickMe() {

        compressImgWithCanvas(myfile.files[0], uploadWithAJAX);

    }

    /**

     * 压缩图片，然后执行某些任务

     */

    function compressImgWithCanvas(blob, taskCallback) {

        var rat = 2;

        var w = myimg.naturalWidth / rat, h = myimg.naturalHeight / rat;

        var canvas = document.createElement("canvas");

        canvas.width = w;

        canvas.height = h;

        var ctx = canvas.getContext('2d');

        ctx.drawImage(myimg, 0, 0, w, h);

        ctx.fillText("nf147", w - 20, h - 20);

        canvas.toBlob(taskCallback, "image/jpeg");

    }

    /**

     * 更新预览进度

     */

    function refreshProgress(r) {

        if (!ctx) ctx = mymask.getContext('2d');

        ctx.save();

        ctx.clearRect(0, 0, 200, 200);

        ctx.globalAlpha = 0.6;

        ctx.fillRect(0, (1 - r) * 200, 200, 200);

        ctx.globalAlpha = 1;

        ctx.fillStyle = "white";

        ctx.font = "20px 微软雅黑";

        ctx.fillText(r * 100 + '%', 80, 180);

        ctx.restore();

    }

    /**

     * 通过 AJAX 上传 blob 类型的文件

     * @param blob

     */

    function uploadWithAJAX(blob) {

        var fd = new FormData();

        fd.append("xxx", blob);

        $.ajax({

            method: 'post',

            url: "/bbbbb",

            cache: false,

            contentType: false,

            data: fd,

            processData: false,

            xhr: () => {

            var xhr = $.ajaxSettings.xhr();

        xhr.upload.onprogress = (ev) => {

            refreshProgress(ev.loaded / ev.total);

        };

        return xhr;

    }

    }).done(console.log)

            .fail((xhr, staus, err) => console.error(xhr, staus, err));

    }

</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"

        integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"

        crossorigin="anonymous"></script>

</body>

</html>

使用canvas上传图片+上传进度的更多相关文章

  1. 使用ajax上传图片，并且使用canvas实现出上传进度效果

    前端代码: <%@ page contentType="text/html;charset=UTF-8" language="java" %> &l ...

  2. [Swift通天遁地]四、网络和线程-(9)上传图片并实时显示上传进度

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  3. 安卓自定义View实现图片上传进度显示（仿QQ）

    首先看下我们想要实现的效果如下图(qq聊天中发送图片时的效果): 再看下图我们实现的效果: 实现原理很简单,首先我们上传图片时需要一个进度值progress,这个不管是自己写的上传的方法还是使用第三方 ...

  4. .NetCore多文件上传进度的示例

    主要讲的内容有: 1-----form方式上传一组图片 2-----ajax上传一组图片 3-----ajax提交+上传进度+一组图片上传 4-----Task并行处理+ajax提交+上传进度+一组图 ...

  5. 使用element UI el-upload组件实现视频文件上传及上传进度显示方法总结

    实现效果: 上传中: 上传完成: 代码: <el-form-item label="视频上传" prop="Video"> <!-- acti ...

  6. jQuery文件上传插件jQuery Upload File 有上传进度条

    jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...

  7. HTML5矢量实现文件上传进度条

    在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...

  8. 基于HT for Web矢量实现HTML5文件上传进度条

    在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...

  9. PHP中使用Session配合Javascript实现文件上传进度条功能

    Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP .4以前,实现这样的进度条并不容易 ...

随机推荐

  1. Kettle集群部署（1台Windows主机和2台Linux服务器）

    不多说,直接上干货! http://blog.csdn.net/jianglushou9763/article/details/70859616

  2. 案例44-crm练习新增客户使用struts2

    1 src下配置文件 1 struts.xml <?xml version="1.0" encoding="UTF-8"?> <!DOCTYP ...

  3. Python下Mysql数据连接池——单例

    # coding:utf-8 import threading import pymysql from DBUtils.PooledDB import PooledDB from app.common ...

  4. Python 进阶

    高阶函数 定义 函数接受的参数是一个函数 函数的返回值为一个函数 满足以上2点中其中一个就是高阶函数 函数嵌套 定义 函数中def定义一个函数 嵌套会存在闭包, 其他情况不会有闭包(闭包闭的是变量) ...

  5. HRBUST 1909——理工门外的树——————【离线处理，差分前缀和】

    理工门外的树 Time Limit: 1000 MS Memory Limit: 32768 KB 64-bit integer IO format: %lld , %llu Java class n ...

  6. 使用Razor

    新建一个名称为Rezor的mvc空项目,定义一个模型内容 public class Product { //定义模型 public int ProductID { get; set; } public ...

  7. jeecg308 <t:authFilter />标签失效的问题

    <%--该标签放到body末尾会无效,估计是js冲突,放到body前好用--%><t:authFilter /> <body></body>

  8. DOM的概念和简单应用：使用DOM解析XML数据

    概念:DOM是Document Object Model的简称,即文档数据模型. Oracle公司提供了JAXP(Java API for XML Processing)来解析XML.JAXP会把XM ...

  9. c++sizeof大全

    sizeof,一个其貌不扬的家伙,引无数菜鸟竟折腰,小虾我当初也没少犯迷糊,秉着“辛苦我一个,幸福千万人”的伟大思想,我决定将其尽可能详细的总结一下.但当我总结的时候才发现,这个问题既可以简单,又可以 ...

  10. fireworks图片边缘化 fireworks羽化图片边缘的教程

    fireworks羽化图片边缘的教程如下: 1. 打开一个图片. 2.点击“工具”面板“位图”部分的“选取框”工具.也可以选择“椭圆选取框”工具. 3.选择部分图象. 4.在属性检查器中,“边缘”项中 ...