前端接受文件调用后台上传文件的方法

Posted 2020-10-15 洛阳之晨，譬如临安初雨

需要用到

slice() 方法

参考

http://www.w3school.com.cn/jsref/jsref_slice_array.asp

前端html使用标签是

type=file的input标签，可以直接选择文件上传

JS：

 function () {
        var file = $("#SelectImageFile")[0].files[0];
        var fileName = file.name;
        var fileSplitSize = 1 * 1024 * 1024;　　//文件分段大小5M
        var size = file.size;
        var posturl = postWebUrl;//上传文件的后台方法地址
        var formData = new FormData();
        var index1 = fileName.lastIndexOf(".");
        var index2 = fileName.length;
        var suffix = fileName.substring(index1, index2);//后缀名
        //如果需要限制后缀名，可以这么写
        if (suffix != ".rar" && suffix != ".zip" && suffix != ".7z") {
            msg("上传的影像信息必须为.rar,.zip,.7z格式");
        } else {
            formData.append("file", file.slice(start, start +fileSplitSize));
            formData.append("name", fileName);
            $.ajax({
                url: posturl,
                type: ‘POST‘,
                data: formData,  // 告诉jQuery不要去处理发送的数据 
                processData: false,  // 告诉jQuery不要去设置Content-Type请求头 
                contentType: false,
                beforeSend: function () {
                    //console.log("正在进行，请稍候");
                },
                //分段上传，1-5上传成功后，再上传6-11，以此类推，成功后，给出提示，在成功之前，会一直显示上传进度
                success: function (data) {
                    $("#process").show();//进度条显示
                    if (start + fileSplitSize >= size) {
                        $("#spnProcessShow").css("width", "100%");
                        $("#spnProcessText").html("上传完成，已上传100%");
                    } else {
                        start += fileSplitSize;
                        Percentage = Math.round(start / size * 100);
                        $("#spnProcessShow").css("width", Percentage + "%");
                        $("#spnProcessText").html("正在上传，已上传" + Percentage + "%");
                    }
                },
                error: function (data) {
                    start = 0;
                    $("#process").hide();//隐藏进度条
                    $("#spnProcessShow").css("width", "0%");
                    $("#lblMsg").html("影像上传失败");
                    
                }
            });
        }
    }