springboot+h5+formdata文件上传带进度条（文件+其他属性一起）

springboot+h5+formdata文件上传带进度条（文件+其他属性一起）

网上很多文章都是只介绍了H5的，有些只写了部分代码，有些是通过后台来实现的，我比较了一下，体验最好并且最简单的还是用H5做的最好，下面记录下我的操作步骤：

---

H5部分

<!--表单部分-->
<form id="upload_form">
    <div>资源名称：<input type="text" name="name" /></div>
    <div>资源文件：<input type="file" name="file" /></div>
    <div><input type="button" value="上传文件" /></div>
</form>
<!--进度条部分(默认隐藏)-->
<div style="display: none;" class="progress-body">
    <div style="margin-bottom: 10px;"><span style="width: 100px; display: inline-block; text-align: right">上传进度：</span><progress></progress></div>
    <div style="margin-bottom: 10px; margin-left: 30px; width: 200px;" class="progress-speed">0 bytes</div>
    <div style="margin-bottom: 10px; margin-left: 30px; width: 200px;" class="progress-info">资料正准备上传</div>
</div>

CSS部分

progress {
    background-color: #56BE64;
}
progress::-webkit-progress-bar {
    background: #ccc;
}
progress::-webkit-progress-value {
    background: #56BE64;
}

JS部分（需要引用jquery文件）

/******核心AJAX部分开始******/
var formData = new FormData($('#upload_form')[0]);
$.ajax({
    url: '/admin/resource/upload',
    type: 'post',
    data: formData,
    dataType: 'json',
    processData: false,
    contentType: false,
    xhr: function () {
        var xhr = $.ajaxSettings.xhr();
        if (xhr.upload) {
         //处理进度条的事件
            xhr.upload.addEventListener("progress", progressHandle, false);
            //加载完成的事件
            xhr.addEventListener("load", completeHandle, false);
            //加载出错的事件
            xhr.addEventListener("error", failedHandle, false);
            //加载取消的事件
            xhr.addEventListener("abort", canceledHandle, false);
            //开始显示进度条
            showProgress();
            return xhr;
        }
    }, success: function (data) {
        if (data.code == 200) {
            alert('添加资源成功');
        } else {
            alert(data.message);
        }
    }
});
/******核心AJAX部分结束******/
//显示进度条的函数
function showProgress() {
    $(".progress-body").css("display", "block");
}
//隐藏进度条的函数
function hideProgress() {
    $('.progress-body>.progress-speed', window.parent.document).html("0 bytes");
    $('.progress-body>.progress-info', window.parent.document).html("资料正准备上传");
    $(".progress-body", window.parent.document).css("display", "none");
}
//进度条更新
function progressHandle(e) {        
    $('.progress-body progress').attr({value: e.loaded, max: e.total});
    var percent = e.loaded / e.total * 100;
    $('.progress-body>.progress-speed').html(((e.loaded / 1024) / 1024).toFixed(2) + "/" + ((e.total / 1024) / 1024).toFixed(2) + " MB. " + percent.toFixed(2) + "%");
    if (percent == 100) {
        $('.progress-body>.progress-info').html("上传完成,后台正在处理...");
    } else {
        $('.progress-body>.progress-info').html("资料上传ing...");
    }
};
//上传完成处理函数
function completeHandle(e) {
    $('.progress-body>.progress-info').html("上传资料完成");
    setTimeout(hideProgress, 2000);
};
//上传出错处理函数
function failedHandle(e) {
    $('.progress-body>.progress-info', window.parent.document).html("上传资源出错");
};
//上传取消处理函数
function canceledHandle(e) {
    $('.progress-body>.progress-info', window.parent.document).html("上传资源取消");
};

后台controller部分

//文件上传存储路径
@Value("${file.src.path}")
String srcPath;

/**
 * 资源上传
 *
 * @param map
 * @param file
 * @return
 * @throws IOException
 */
@RequestMapping("upload")
@ResponseBody
public AjaxResult addResource(@RequestParam Map<String, Object> map, @RequestParam("file") MultipartFile file) throws IOException {
    Object name = map.get("name");
    if (name == null) {
        return AjaxResult.failResult("资源名称不能为空");
    }

    //1.验证资源路径是否存在
    File srcDirPath = new File(srcPath);
    if (!srcDirPath.exists()) {
        srcDirPath.mkdirs();
    }
    //2.传输文件到服务器
    String originalFilename = file.getOriginalFilename();
    File srcFile = new File(srcPath + originalFilename);
    file.transferTo(srcFile);
    try {        
        //3.资源入库
        Map<String, Object> resourceMap = new HashMap<>();
        resourceMap.put("name", name);
        resourceMap.put("filePath", srcFile.getPath());
        resourceService.addResource(resourceMap);

    } catch (Exception e) {
        e.printStackTrace();
    }
    return AjaxResult.successResult();
}