web上传本地图片预览操作总结

最新推荐文章于 2024-06-06 09:02:41 发布

西蒙海

最新推荐文章于 2024-06-06 09:02:41 发布

阅读量259

点赞数

分类专栏： web前端文章标签： html

本文链接：https://blog.csdn.net/z15732637528/article/details/80022249

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>Load Image</title>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <script src="../static/js/jquery-3.2.1.min.js"></script>
    <script src="../static/js/bootstrap.min.js"></script>
</head>
<script>
    /****上传图片****/
    var imgurl = "";  
    function loadLocalImge(node) {  
        var imgURL = "";  
        try{  
            var file = null;  
            if(node.files && node.files[0] ){  
                file = node.files[0];  
            }else if(node.files && node.files.item(0)) {  
                file = node.files.item(0);  
            }  
            try{  
                imgURL =  file.getAsDataURL();  
            }catch(e){  
                imgRUL = window.URL.createObjectURL(file);  
            }  
        }catch(e){  
            if (node.files && node.files[0]) {  
                var reader = new FileReader();  
                reader.onload = function (e) {  
                    imgURL = e.target.result;  
                };  
                reader.readAsDataURL(node.files[0]);   
            }  
        }  
        creatImg(imgRUL);  
        return imgURL;  
    }  
    function creatImg(imgRUL){
        $("#result_img").attr("src",imgRUL);      
    }  
</script>

<body style="background:url(../static/imags/body_bg.png)">
  <div class="container center-block">
    <div class="row">
        <div class="col-xs-12">
            <img id="result_img" src="../static/imags/result1.png" class="img-responsive center-block">
        </div>
    </div>
    <div class="row" style="margin-top: 2rem;margin-bottom: 2rem">
        <div class="col-xs-8 col-xs-push-2">
            <img src="../static/imags/share-btn.png" class="img-responsive center-block" onclick="onShareButtonClick()">
        </div>
    </div>
    <div class="row" style="margin-top: 2rem;margin-bottom: 2rem;">
        <div class="col-xs-8 col-xs-push-2">
            <label for="xFile"><img src="../static/imags/upload.png" class="img-responsive center-block"></label>  
            <input type="file" accept="image/png,image/jpg" name="uploadPicture" id="xFile" value="" title="上传照片" style="position:absolute;clip:rect(0 0 0 0);" onchange="loadLocalImge(this)"/>
             <!-- 隐藏input原生 上传按钮，使用图片替换  -->
        </div> 
    </div>
 </div>
</body>


</html>