面向对象，继承，浏览器，上传文件， ajax

Posted on 2017-03-21 16:57  听风吹来的种子  阅读(136)  评论(0)  编辑  收藏  举报

 

 1 'use strict';
 2 //父类
 3 class Student2{
 4 　　constructor(name){
 5 　　　　this.name = name || 'tom';
 6 　　}
 7 　　hello(){
 8 　　　　console.log('hello '+ this.name + '!');
 9 　　}
10 }
11 var xiao = new Student2("jack");
12 xiao.hello();
13 
14 //子类继承父类
15 class PrimaryStudent2 extends Student2{
16 　　constructor(name,grade){
17 　　　　super(name); // 记得用super调用父类的构造方法!
18 　　　　console.log(this);
19 　　　　this.grade = grade;
20 　　　　this.name = name;
21 　　}
22 　　mygrade(){
23 　　　　console.log(this.name +' at grade '+ this.grade);
24 　　}
25 }
26 var primary = new PrimaryStudent2('jack' ,'2');
27 primary.mygrade();
28 primary.hello();//调用父类的方法
 1 navigator 对象表示浏览器的信息，最常用的属性包括：
 2 
 3 navigator.appName：浏览器名称；
 4 navigator.appVersion：浏览器版本；
 5 navigator.language：浏览器设置的语言；
 6 navigator.platform：操作系统类型；
 7 navigator.userAgent：浏览器设定的User-Agent字符串。
 8 　　
 9 
10 location
11 
12 http://www.example.com:8080/path/index.html?a=1&b=2#TOP
13 location.protocol; // 'http'
14 location.host; // 'www.example.com'
15 location.port; // '8080'
16 location.pathname; // '/path/index.html'
17 location.search; // '?a=1&b=2'
18 location.hash; // 'TOP'
19  要加载一个新页面，可以调用location.assign()。如果要重新加载当前页面，调用location.reload()方法非常方便。
20 
21 if (confirm('重新加载当前页' + location.href + '?')) {
22 　　location.reload();
23 } else {
24 　　location.assign('/discuss'); // 设置一个新的URL地址
25 }

 

图片上传并显示
var fileInput = document.getElementById('test-image-file'),
    info = document.getElementById('test-file-info'),
    preview = document.getElementById('test-image-preview');
// 监听change事件:
fileInput.addEventListener('change', function () {
    // 清除背景图片:
    preview.style.backgroundImage = '';
    // 检查文件是否选择:
    if (!fileInput.value) {
        info.innerHTML = '没有选择文件';
        return;
    }
    // 获取File引用:
    var file = fileInput.files[0];
    // 获取File信息:
    info.innerHTML = '文件: ' + file.name + '<br>' +
                     '大小: ' + file.size + '<br>' +
                     '修改: ' + file.lastModifiedDate;
    if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
        alert('不是有效的图片文件!');
        return;
    }
    // 读取文件:
    var reader = new FileReader();
    reader.onload = function(e) {
        var
            data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...'            
        preview.style.backgroundImage = 'url(' + data + ')';
    };
    // 以DataURL的形式读取文件:
    reader.readAsDataURL(file);
});

 

---恢复内容结束---