URL图片预览（createObjectURL）revokeObjectURL

最新推荐文章于 2023-10-26 20:12:13 发布

xmlife

最新推荐文章于 2023-10-26 20:12:13 发布

阅读量6.2k

点赞数

分类专栏： jquery

jquery 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.说明

1)createObjectURL

　　作用：创建url（creates a URL for the specified object）;

　　语法：var url = URL.createObjectURL(object,options);

　　参数说明：1）object可以包含下列类型：Blob，MSStram，IstaorageItem，MediaCapture，IRandomAccessStreamWithContentType，

　　　　　　　2）options若设置为true，则是oneTimeOnly attribute，doesn't need to be revoked once used，即只是用一次

2）revokeObjectURL

　　作用：将对象鱼url关联（rovokes a URL from a document and frees the object associated with that URL）

　　语法：var retval = URL.revokeObjectURL(url);

2.例子

<!DOCTYPE HTML>
<html>
    <head>
    <meta charset="utf-8">
    <style>
        #preview {
            width: 300px;
            height: 300px;
            overflow: hidden;
        }
        #preview img {
            width: 100%;
            height: 100%;
        }
    </style>
    <script src="../js/jquery-1.9.1.min.js"></script>
</head>
<body>
<form enctype="multipart/form-data" action="" method="post">
    <input type="file" name="imageUpload"/>
    <div id="preview" style="width: 300px;height:300px;border:1px solid gray;"></div>
</form>
</body>
 <script type="text/javascript">
        $(function(){
            $('[type="file"]').change(function(e){
                var file = e.target.files[0];
                preview(file);
            });
        })
        function preview(file){
            var img = new Image();
            url = img.src=URL.createObjectURL(file);
            var $img = $(img);
            img.onload = function(e){
                URL.revokeObjectURL(url);
                $('#preview').empty().append($img);
            }
        }
    </script>
</html>

效果如下：（点击上传后立刻在页面上显示）

xmlife

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
URL图片预览（createObjectURL）revokeObjectURL

1.说明1)createObjectURL　　作用：创建url（creates a URL for the specified object）;　　语法：var url = URL.createObjectURL(object,options);　　参数说明：1）object可以包含下列类型：Blob，MSStram，IstaorageItem，MediaCapture，IRan
复制链接

扫一扫