zoukankan      html  css  js  c++  java
  • 前端接受文件调用后台上传文件的方法

    需要用到

    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("影像上传失败");
                        
                    }
                });
            }
        }    
  • 相关阅读:
    VS Code 中文显示乱码_ubuntu
    解决source insight不识别.cu文件的问题/sourceinsight设置.cu类型的文件
    PPT图片素材
    Jetson Xavier NX apt更换国内源
    xavier NX安装torchvision
    xavier NX上安装pytorch_前面一二三四是失败的方法,可以直接按照步骤五进行安装
    jquery.cookie()方法
    JavaScript错误处理
    Jquery中$.post()与$.get()区别
    jQuery中$.get()、$.post()和$.ajax()
  • 原文地址:https://www.cnblogs.com/llcdbk/p/7903423.html
Copyright © 2011-2022 走看看