js实现图片上传并即时显示

最新推荐文章于 2024-08-29 21:19:22 发布

尘中客

最新推荐文章于 2024-08-29 21:19:22 发布

阅读量8.6k

点赞数 2

分类专栏： jscript 文章标签： js实现图片上传并即时常显示 javascript 图片

jscript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

原地址http://www.jb51.net/article/76651.htm

HTML代码

<label for="thumbnail" class="col-md-3 control-label">缩略图</label>
<div class="col-md-6">
    <input type="file" class="form-control" id="thumbnail" name="thumbnail">
</div>

JS代码

<script>
    function getObjectURL(file) {
        var url = null ;
        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 ;
    }

    $('#thumbnail').change(function() {
        var eImg = $('<img />');
        eImg.attr('src', getObjectURL($(this)[0].files[0])); // 或 this.files[0] this->input
        $(this).after(eImg);});
</script>