• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    HTML5图片预览实例分享

    HTML5图片预览需要用到两种方法

        1.URL
        2.FileReader
    直接上代码


    复制代码
    代码如下:

    <!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/jquery-1.8.3.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;height:300px;border:1px solid gray;"></div>
    </form>
    </body>
    </html>

    其中URL.revokeObjectURL方法Opera不支持,FileReader除IE9及以下不支持,其它浏览器都支持。

    上一篇:阻止移动设备(手机、pad)浏览器双击放大网页的方法
    下一篇:使用html5制作loading图的示例
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    HTML5图片预览实例分享 HTML5,图片,预览,实例,分享,