jQuery上传图片显示预览

来源：互联网发布：农村淘宝编辑：程序博客网时间：2024/04/28 23:47

jQuery上传图片显示预览

<!DOCTYPE html><html><head>    <title>HTML5上传图片预览</title>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    <script src="http://img9.tongzhuo100.com/js/jquery-1.7.2.min.js"></script>    <style>        .hide        {            display:none;        }    </style></head><body><h3>请选择图片文件：JPG/GIF</h3><form name="form0" id="form0" >    <input type="file" name="file0" id="file0" multiple="multiple" />    <br><br><img src="" id="img0" width="120" class="hide"></form><script>    $("#file0").change(function(){        var objUrl = getObjectURL(this.files[0]) ;        console.log("objUrl = "+objUrl) ;        if (objUrl)         {            $("#img0").attr("src", objUrl);            $("#img0").removeClass("hide");        }    }) ;    //建立一個可存取到該file的url    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 ;    }</script></body></html>

0 0