关于图片预加载事件,点击选择图片后直接显示在页面上

如图所示
呢么咱们来看demo详情。以下所示: jquery

页面demo以下所示:web

    <img id="photos" src="" width="100" height="100" />
   <input id="files" type="file" onchange="chan(this)" name="files" />
js代码:chrome

<script src="~/Scripts/jquery-1.10.2.js"></script>浏览器

 //浏览图片
    function chan(i) {
        var objUrl = getObjectURL(i.files[0]);
        if (objUrl) {
            $("#photos").attr("src", objUrl);  //这里的id是要显示图片位置的Id
        }
    };
    //创建一個可存取到該file的url
    function getObjectURL(file) {
        var url = null;
        // 下面函数执行的效果是同样的,只是须要针对不一样的浏览器执行不一样的 js 函数而已
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    } 函数

</script>
 this

相关文章
相关标签/搜索