js中如何点击一个按钮弹出一个file文件框

JavaScript019

js中如何点击一个按钮弹出一个file文件框,第1张

js中点击一个按钮弹出一个file文件框的步骤如下:

1.在文件夹中创建一个html文件“test”。

2.在test文件中添加一个html的框架。

3.添加两个input,一个是button,一个是file把id设置为“open”style类型设置为“display:none”不显示。

4.打开后我们发现只显示这一个“打开文件”按钮。

5.现在我们给button添加onclick事件,调用openfile触发id为“open”的file。

6.现在我们在浏览器中点击“打开文件”文件按钮就会弹出选择文件路径对话框了。这样就解决了js中点击一个按钮弹出一个file文件框的问题了。

1、对已有对象进行扩充方法和属性

 var object = new Object()

    object.name = "zhangsan"//每个对象需要写这些语句

    object.sayName = function(name){//每个对象需要写这些语句

        this.name = name

    }

    object.sayName("lisi")

    alert(object.name)

2、工厂方式创建对象

 function createObject() {

        var object = new Object()

        object.username = "zhangsan"

        object.password = "123456"

        object.get = function(){

            alert(this.username + "," + this.password)

        }

        return object

    }

    var object1 = createObject()

    var object2 = createObject()

    object1.get()

    object2.get()

    // 带参数的构造方法

    function createObject(username, password){

        var object = new Object()

        object.username = username

        object.password = password

        object.get = function(){//缺点是,多少个对象则方法就有多少个

            alert(this.username + ", " + this.password)

        }

        return object

    }

    var object1 = createObject("zhangsan",123456)

    object1.get()

    // 最佳改进方式

    function get(){//使该函数被多个对象共享

        alert(this.username + ", " + this.password)

    }

    function createObject(username, password){//创建对象

        var object = new Object()

        object.username = username

        object.password = password

        object.get = get

        return object

    }

    var object1 = createObject("zhangsan", "123456")

    var object2 = createObject("wangwu", "654321")

    object1.get()

    object2.get()

3、构造函数方式创建对象

 function Person(){

        //在执行第一行代码欠,js引擎会为我们生成一个对象

        this.username = "zhangsan"

        this.password = "123"

        this.getInfo = function(){

            alert(this.username + ", " + this.password)

        }

        //此处有一个隐藏的return语句,用于将之前生成对象返回。

    }

    var p1 = new Person()

    p1.getInfo()

    //带参数

    function Person(username, password){

        this.username = username

        this.password = password

        this.getInfo = function(){

            alert(this.username + ", " + this.password)

        }

    }

    var p1 = new Person("zhangsan","1234546")

    p1.getInfo()

4、原型(“prototype”)方式

function Person(){}

    Person.prototype.username = "zhangsan"

    Person.prototype.password = "123456"

    Person.prototype.getInfo = function(){

        alert(this.username + ", " + this.password)

    }

    var person = new Person()

    var person2 = new Person()

    person.username = "haha"

    person.getInfo()

    person2.getInfo()

    //单纯使用原型方式定义对象无法在构造函数中为属性赋值,只能在对象生成后再去改变属性值

    function Person(){}

    Person.prototype.username = new Array()

    Person.prototype.password = "123456"

    Person.prototype.getInfo = function(){

        alert(this.username + ", " + this.password)

    }

    var person = new Person()

    var person2 = new Person()

    person.username.push("zhangsan")

    person.username.push("lisi")

    person.password = "321"

    person.getInfo()

    person2.getInfo()

5、综合方式(原型+构造函数方式搭配)

  function Person(){

        this.username = new Array()//不被多个对象共享

        this.password = "123"

    }

    Person.prototype.getInfo = function()//被多个对象共享

    {

        alert(this.username + "," + this.password)

    }

    var p1 = new Person()

    var p2 = new Person()

    p1.username.push("zhangsan")

    p2.username.push("lisi")

    p1.getInfo()

    p2.getInfo()

6、动态原型方式

    function Person(){

        this.username = "zhangsan"

        this.password = "123"

        //通过标志量让所有的对象共享方法

        if(typeof Person.flag == "undefined"){

            alert("prototype")

            Person.prototype.getInfo = function() {

                alert(this.username + ", " + this.password)

            }

            Person.flag = true

        }

    }

    var p = new Person()

    var p2 = new Person()

    p.getInfo()

    p2.getInfo()