首页 > Web开发 > 详细

H5 选择图片上传及预览

时间:2019-06-26 11:07:49      阅读:409      评论:0      收藏:0      [点我收藏+]

 

 

<div class="sctp">
    <img src="img/sczp.png" id="photo"  />
    <input class="iptsc" type="file" name="file" id="file" />
    <input type="hidden" id="fileVal">
</div>

  

<script type="text/javascript">
    $(function () {
        function chooseImage(fileid, imgid, fileValId) {
            var fileObj = document.getElementById(fileid);  
            if (typeof (fileObj) == "undefined" || fileObj.files.length == 0) {
                 console.log(‘file ‘ + fileid + ‘ not exists‘);
                 return;
            }
            var file = fileObj.files[0];
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                var imgResult = e.target.result;
                var imgObj = document.getElementById(imgid);
                if (typeof (imgObj) != "undefined") {
                    imgObj.setAttribute("src", imgResult);
                }
                var fileValObj = document.getElementById(fileValId);
                if (typeof (fileValObj) != "undefined") {
                    fileValObj.setAttribute("value", imgResult);
                }
            };
        };
        $(‘#file‘).on(‘change‘, function () {
            chooseImage(‘file‘, ‘photo‘, ‘fileVal‘);
        });
    });
</script>

  

 

H5 选择图片上传及预览

原文:https://www.cnblogs.com/dreamman/p/11088554.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!