html5利用getObjectURL获取图片路径上传图片 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/reset.css" />
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

<title>添加资讯页</title>
<style>
    *{margin: 0px; padding: 0px; font-size: 18px;}
    li{list-style: none;}
    .leftLi{
        text-align: left;
    }
    .rightLi{
        min-width: 500px;
        text-align: left;
    }
    .imgWrap{
        position: relative;
        z-index: 1;
        width: 120px;
        height: 120px;
        border-radius: 3px;
    }
    #img0{
        width: 120px;
        height: 120px;
        float: left;
    }
    #file0{
        position: absolute;
        top: 0;
        display: none;
    }
</style>
<script>
    $(function(){
                $("#img0").click(function(){
                        $("#file0").click();
                    })
                $("#file0").change(function(){
                    var objUrl = getObjectURL(this.files[0]) ;
                    console.log("objUrl = "+objUrl) ;
                    if (objUrl) {
                        $("#img0").attr("src", objUrl) ;
                    }
                }) ;
                //建立一個可存取到該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>
</head>

<body>

<ul>
      <li class="">
          <div class="leftLi">
              <span>封面:</span>
              <span style="color: #f00;">点击图片进行封面更换</span>
          </div>
        <div class="rightLi">
            <div class="imgWrap">
                <input type="file" name="file0" id="file0" multiple="multiple" />
                <img src="img/add.png" id="img0" >
            </div>
        </div>
      </li>
      
</ul>
 </form>
</div>
</div>
</body>
</html>

 

posted @ 2018-11-27 18:10  南夏啊南夏  阅读(1068)  评论(0)    收藏  举报