多文件上传

2022-06-17

upload函数

// 绑定上传按钮事件
$('#upload_btn').off('click').on('click',function(){
	$('.file').trigger('click')
})
//文件选择监听
$('.file').on('change',function(e){
    let files = e.target.files;
    console.log('文件',e.target,files);
    if(!files.length) return;
    let formData = new FormData();
    for (let i = 0; i < files.length; i++) {
       formData.append('file',files[i],files[i].name)
    }
    console.log(formData.getAll('upFile'));
    $.ajax({
        url:api.uploadMoreFiles,
        type:"post",
        data:formData,
        // 设置 processData 选项为 false，防止自动转换数据格式
        processData: false,
        // contentType 设置为 false 避免 JQuery 对其操作
        contentType: false,
        timeout: -1,
        cache: false, //上传文件无需缓存
        success:function(data){
        	console.log('上传',data)
        },
        error:function(){
            showTips('失败')
        },
        complete:function(){
            $(".file").val(null)
        }
    })
    console.log('over');
})


同时限制上传.xls、.xlsx文件

<input 
    class="note-image-input form-control" 
    type="file" 
    name="files" 
    accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel " 
    multiple="multiple"
>

后缀

more >>

展开全文 >>

在线预览

2022-06-17

实现在线预览Word,Excel,PowerPoint格式的文档

使用微软的预览接口来实现该功能

输入文档地址（可访问资源），点击创建URL按钮就可以生成一个新的链接：https://view.officeapps.live.com/op/view.aspx?src=http://mczaiyun.top/ht/123.xlsx

也就是说在使用的过程中可以通过‘https://view.officeapps.live.com/op/view.aspx?src=’ + url的方式打开

//a标签跳转新页面方式打开
<a target='_black'  href='https://view.officeapps.live.com/op/view.aspx?src=http://mczaiyun.top/ht/123.xlsx'>预览文件</a>

//当前页面iframe嵌入方式打开
<iframe src='https://view.officeapps.live.com/op/view.aspx?src=http://mczaiyun.top/ht/123.xlsx' />

more >>

展开全文 >>

标签模板

2022-06-17

//创建标签模板 防止用户恶意输入
//string：除变量外的其他字符串数组，argus：变量数组，前者总比后者长度大1
function SaferHTMLx(string,...argus) {
    console.log(string,argus);//["<p>", " has ", " sent you a message.</p>"] , 
    // ["<script>alert("abc")</script>", "<script>alert("abc")</script>"]
    let s = string[0];
    for (let i = 1; i < string.length; i++) {
      let arg = String(argus[i-1]);
 	  //对变量参数进行处理
      s += arg.replace(/&/g, "&amp;")
              .replace(/</g, "&lt;")
              .replace(/>/g, "&gt;");
              .replace(/"/g, "&qout;")
              .replace(/'/g, "&#27;")
              .replace(/\//g, "&#x2F;");
      s += string[i]         
    }
    return s
  }
 
let senderx = '<script>alert("abc")</script>';
//使用标签模板 
let messagex = SaferHTMLx`<p>${senderx} has ${senderx}sent you a message.</p>`;
console.log(messagex);//<p>&lt;script&gt;alert("abc")&lt;/script&gt; has sent you a message.</p>

展开全文 >>

对象

2022-06-17

Object Origin Program

对象的属性

let obj = Object.create({},{
    a:{
        configurable:true,//是否可以通过 delete 删除并重新定义，是否修改它的访问属性
        enumerable:true,//是否可枚举
        writable:true,//是否可写
        value:'xxx',//实际值
    },
    b:{
    	configurable:true,
        enumerable:false,
        writable:false,
        value:'66'
	}
})
    
一、定义对象的属性方法
1、defineProperty
Object.defineProperty(obj,'a',{
    configurable:true,//是否可以通过 delete 删除并重新定义，是否修改它的访问属性
    enumerable:true,//是否可枚举
    writable:true,//是否可写
    value:'xxx',//实际值
})
2、defineProperties
Object.defineProperties(obj,{
    a:{
        value:'xxx',
    },
    b:{
        value:'66'
	}
})
//[注意]：省略不写的属性描述符默都是false

二、获取对象的属性的特性
1、getOwnPropertyDescriptor
Object.getOwnPropertyDescriptor(obj,'a');
//{
//   value:'xxx',
//}
2、getOwnPropertyDescriptors
Object.getOwnPropertyDescriptor(obj);
//{
//    a:{
//        value:'xxx',
//    },
//    b:{
//        value:'66'
//	  }
//}
//[注意]:Symbol类型的键名属性获取不了

3、Object.getOwnPropertySymbols 
//与getOwnPropertySymbols一样，针对Symbol类型属性

4、Object.getOwnPropertyNames
Object.getOwnPropertyNames(obj);//不管对象属性是否可枚举都能获取到

三、对象属性是否可枚举
Object.propertyIsEnumerable(obj); //true

四、对象是否拥有某属性
Object.hasOwnProperty(obj);//true

more >>

展开全文 >>

js拓展

2022-06-17

1、发展史

5大主流浏览器

名称	内核
IE	trident
chrome	webkit blink
safari	webkit
firefox	gecko
opera	presto

历史事件

2、js相关概念

more >>

展开全文 >>

正则表达式

2022-06-17

匹配模式符


-i	忽略大小写
-g	全局模式
-m	多行模式
-y	粘附模式,查找从 lastIndex开始及之后的字符串
-u	Unicode匹配
-s	doAll模式，匹配任何字符（包括 \n,\r）

2、字符转译 
为区别字符和语法 ( [ { \ ^ $ | ) ] } ? * + 等符号 作为匹配字符串时前面要加 \ (如\.)

使用技巧

匹配两个字符（串）中甲的内容

more >>

展开全文 >>

获取地理位置

2022-06-17

百度地图方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--引入百度 API，"ak=" 后面一串码是密钥，最好自己申请-->
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=7a6QKaIilZftIMmKGAFLG7QT1GLfIncg"></script>
</head>
<body>
    <input type="button" onclick="getLocation()" value="确认" />
    <div id="position"></div>
    <script type="text/javascript">
    var x = document.getElementById('position');
    function getLocation() {
        // 创建百度地理位置实例，代替 navigator.geolocation
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(e) {
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                // 百度 geolocation 的经纬度属性不同，此处是 point.lat 而不是 coords.latitude
                x.innerHTML = '纬度：' + e.point.lat + '<br/>经度：' + e.point.lng;
            } else {
                x.innerHTML = 'failed' + this.getStatus();
            }
        });
    }
    </script>
</body>
</html>

more >>

展开全文 >>

第一章什么是JavaScript

2022-06-17

1995年，JavaScript问世。它的用途是代替Perl等服务器端语言处理输入验证。

应为js问世前，验证表单是否已填、是否有效都需要与服务端一次通信。缓慢的网速导致用户体验极差

可以想象一下，你填写完表单，单击“提交”按钮，等 30 秒处理，然后看到一条消息，告诉你有一个必填字段没填。

随着时间推移，现在的js已不仅仅是用于数据验证，而是渗透到浏览器窗口及其内容的方方面面。JavaScript 已被公认为主流的编程语言，能够实现复杂的计算与交互，包括闭包、匿名（lambda）函数，甚至元编程等特性。不仅是桌面浏览器，手机浏览器和屏幕阅读器也支持 JavaScript，其重要性可见一斑。就连拥有自家客户端脚本语言 VBScript 的微软公司，也在其 Internet Explorer（以下简称 IE）浏览器最初的版本中包含了自己的 JavaScript 实现。