• js上传



    // 文件格式
    <input type="file" class="bookVal" fileName="" fileUrl="" fileSuffix="" fileSize="" onchange="startUploadFn(this)">
    // 图片 accept标识接受的类型 如果是文件则需要特殊的符号标识
    <input type="file" class="bookImgVal" fileUrl="" accept="image/gif, image/jpeg, image/png" onchange="uploadImg(this)">

    function startUploadFn(ele){
    var that = $(ele);
    var formData = new FormData();
    var fileObj = that.get(0).files[0]; // js 获取文件对象
    if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
    layer.msg('请选择文件', {icon: 1, time:600});
    return;
    }
    console.log(fileObj)
    let typeFlag = false

    // 通过后缀 校验文件格式
    const fileTypeArr = ['doc','docx','xls','xlsx','ppt','PPTX','pdf'] //'wps','txt'
    const index = fileObj.name.lastIndexOf(".")
    const postfix = fileObj.name.substr(index+1).toLowerCase()
    for (let el of fileTypeArr) {
    if (postfix === el.toLowerCase()) {
    typeFlag = true
    }
    }
    if (!typeFlag) {
    layer.msg("请选符合要求的文件格式", {icon: 2, time:1000});
    return
    }

    // 通过type参数校验文件格式
    const imgType = fileObj.type.toLowerCase();
    var if( (imgType == "image/jpg") || (imgType == "image/jpeg") || (imgType == "image/png") || (imgType == "image/gif") ){
    layer.msg("符合图片文件格式", {icon: 2, time:1000});
    return
    };

    // 校验文件大小
    const isSize = Math.floor(fileObj.size / 1024 );
    if(isSize>50) {
    layer.msg("图片大小不超过50KB", {icon: 2, time:1000});
    return false;
    }

    formData.append("file", fileObj); //加入文件对象
    formData.append("type", 1);

    // 加载层
    var layerUploadIndex = layer.load(1, {
    shade: [0.1,'#fff'] //0.1透明度的白色背景
    });
    $.ajax({
    url: baseUrl+"/fileUplad/uploadFile",
    type: "post",
    dataType: "json",
    data:formData,
    cache: false,//上传文件无需缓存
    processData: false,//用于对data参数进行序列化处理 这里必须false
    contentType: false, //必须
    success: function (result) {
    //关闭
    layer.close(layerUploadIndex);

    if(result.code==-1){
    layer.msg(result.message, {icon: 2, time:1000});
    }else{
    layer.msg("上传成功", {icon: 1, time:600});

    // 截取名字
    const name = fileObj.name.substring(0,fileObj.name.lastIndexOf('.'));
    }
    },
    error:function (err) {
    //关闭
    layer.close(layerUploadIndex);
    layer.msg("操作失败", {icon: 2, time:600});
    }
    })
    }

  • 相关阅读:
    学数据结构,仅仅须要主要的编程体验
    Android中的跨进程通信方法实例及特点分析(二):ContentProvider
    phpStorm打开提示 failed to create JVM 的解决的方法
    (转)Hibernate框架基础——Java对象持久化概述
    (转)版本管理工具介绍——SVN篇(二)
    (转)版本管理工具介绍——SVN篇(一)
    (转)全文检索技术学习(三)——Lucene支持中文分词
    (转)全文检索技术学习(二)——配置Lucene的开发环境
    (转)全文检索技术学习(一)——Lucene的介绍
    (转) 学习淘淘商城第一课
  • 原文地址:https://www.cnblogs.com/bester-ace/p/12954880.html
Copyright © 2020-2023  润新知