您的位置：首页 > Web前端 > HTML5

HTML5 预览预加载文件，图片

2015-12-22 11:39 513 查看
<!DOCTYPE HTML>

<html>

<head>

    <meta charset="utf-8">

    <title>html5 图片上传预览</title>

    <style>

        #preview {

            width: 300px;

            height: 300px;

            overflow: hidden;

        }

            #preview img {

                width: 100%;

                height: 100%;

            }

    </style>

    <script src="jquery-1.8.2.min.js"></script>

    <script type="text/javascript">

        function preview1(file) {

            var img = new Image(), url = img.src = URL.createObjectURL(file)

            var $img = $(img)

            img.onload = function () {

                URL.revokeObjectURL(url)

                $('#preview').empty().append($img)

            }

        }

        function preview2(file) {

            var reader = new FileReader()

            reader.onload = function (e) {

                var $img = $('<img>').attr("src", e.target.result)

                $('#preview').empty().append($img)

            }

            reader.readAsDataURL(file)

        }

        $(function () {

            $('[type=file]').change(function (e) {

                var file = e.target.files[0]

                preview1(file)

            })

        })

    </script>

</head>

<body>

    <form enctype="multipart/form-data" action="" method="post">

        <input type="file" name="imageUpload" />

        <div id="preview" style="width: 300px; border: 1px solid gray;"></div>

    </form>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航