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("影像上传失败");
                        
                    }
                });
            }
        }    
  • 相关阅读:
    Mysql 重置密码
    windows下如何安装和启动MySQL
    连接到 PostgreSQL 数据源(SQL Server 导入和导出向导)
    通过apt-get安装JDK8
    Windows 更快捷方便的安装软件,命令提示符上安装 Chocolatey
    Windows 的命令行安装Scoop程序管理工具
    CentOS 7更改yum源与更新系统
    Mysql 获取表设计查询语句
    坐标3度带与6度带的知识(转载)
    jQuery学习---第三天
  • 原文地址:https://www.cnblogs.com/llcdbk/p/7903423.html
Copyright © 2011-2022 走看看