javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JS上传文件显示进度条

JS实现上传文件显示进度条

作者:酷爱编程的小猿同学

这篇文章主要为大家详细介绍了JS实现上传文件显示进度条,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JS实现上传文件显示进度条的具体代码,供大家参考,具体内容如下

用户反馈:图片上传过程中,如果网络比较慢,会发现上传图片后没有一点反应,体验性很差,图片回显也比较慢

解决思路:通过XMLHttpRequest的progress来实现监听图片上传的进度,实时显示百分比,后台保存图片成功后再将图片转为Base64编码的字符串在前端显示出来,这样可以很大程度提高用户体验

需要达到的效果:

1、用户可以看到图片上传进度条百分比

2、提升图片回显速度(将图片转为Base64编码的字符串在前端显示)

HTML代码:

<!-- 上传input -->
<input class="file-input" name="uploadImage" id="uploadImage" type="file">
<!-- 上传进度条显示 -->
<a id="showProgress" style="display:none;" href="#"></a> 

JS代码:

// 上传input绑定一个change事件
$("#uploadImage").on("change", uploadPicture());
 
// 上传方法,里面处理进度条逻辑
function uploadPicture() {
    var $this= $(this);
    document.getElementById("showProgress").style.display="block";
    var fd = new FormData();
    fd.append("file", $this.context.files[0]);
 
    var xhr = new XMLHttpRequest();
    //上传中设置上传的百分比
    xhr.upload.addEventListener("progress", function(evt){
        if (evt.lengthComputable) {
            var percentComplete = Math.round(evt.loaded * 100 / evt.total);
            if (percentComplete == 100){
                setTimeout(function () {
                    document.getElementById("showProgress").innerHTML = '已上传'+percentComplete+"%";
                },1500)
            }else{
                document.getElementById("showProgress").innerHTML = '已上传'+percentComplete+"%";
            }
        }else {
            document.getElementById("showProgress").innerHTML = '无法计算';
        }
    }, false);
    //请求完成后执行的操作
    xhr.addEventListener("load", function(evt){
        var message = evt.target.responseText,
                obj = eval("("+message+")");
        $("#uploadImage").attr("src",obj);
        document.getElementById("showProgress").style.display="none";
         alert("上传成功!");
 
    }, false);
    //请求error
    xhr.addEventListener("error", uploadFailed, false);
    //请求中断
    xhr.addEventListener("abort", uploadCanceled, false);
    //发送请求
    xhr.open("POST", /uploadPicture.json);
    xhr.send(fd);
    }
 
function uploadFailed(evt) {
   alert("上传出错.");
}
 
function uploadCanceled(evt) {
   alert("上传已由用户或浏览器取消删除连接.");
}

后台代码:

/**
     * 上传图片
     * @param request
     * @return
     */
    @RequestMapping(value = "/uploadPicture", method = RequestMethod.POST)
    @ResponseBody
    public String uploadPicture(HttpServletRequest request) {
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
        Iterator<String> iter = multipartRequest.getFileNames();
        MultipartFile file = null;
        while (iter.hasNext()) {
            file = multipartRequest.getFile(iter.next());
        }
 
        CommonsMultipartFile cFile = (CommonsMultipartFile) file;
        DiskFileItem fileItem = (DiskFileItem) cFile.getFileItem();
        String filePath = "";
        byte[] data = null;
        String originalFilename = file.getOriginalFilename();
        try {
            String fileType = originalFilename.substring(
                    originalFilename.lastIndexOf(".") + 1).toLowerCase();
 
            float bb = bytes2kb(file.getSize());
 
            if (bb > 10) {
                throw new Exception("文件上传失败,最大上传大小为10M。");
            }
 
            filePath = 上传图片方法,这里改为自己公司的;
            
            // 转为输入流
            InputStream inputStream = fileItem.getInputStream();
            data = new byte[inputStream.available()];
            inputStream.read(data);
            inputStream.close();
            // 对字节数组进行Base64编码,得到Base64编码的字符串
            BASE64Encoder encoder = new BASE64Encoder();
            String base64Str = encoder.encode(data);
            return "data:image/jpeg;base64,"+base64Str;
        } catch (Exception e) {
            e.printStackTrace();
        }
 
        return null;
    }
 
public static float bytes2kb(long bytes) {
        BigDecimal filesize = new BigDecimal(bytes);
        BigDecimal megabyte = new BigDecimal(1024 * 1024);
        float returnValue = filesize.divide(megabyte, 2, 0)
                .floatValue();
 
        return returnValue;
    }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文