实现input选择文件（图片）之后，预览图片的效果

Posted on | In 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// document.getElementById('file').onchange = function () {
    //    alert(this.value);
    //	  this.value = null;
    // };​

    function upchange(){
        console.log("----",document.getElementById("myfile").files[0]);

    }

    //    $(function () {
    //        $('#myfile').change(function () {
    //            $(".img").attr("src", URL.createObjectURL($(this)[0].files[0]));
    //            getObjectUrl($(this)[0].files[0]);
    //        })
    //    })

    function getObjectUrl(file) {
        console.log("file", file);//文件
        console.log("file", file.name);
        console.log("file", file.size / 1024);
        var url = null;
        if (window.createObjectURL != undefined) {
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) {
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) {
            url = window.webkitURL.createObjectURL(file);
        }
        console.log("url", url);
        return url;

    }