H5 选择图片上传及预览

 

 

<div class="sctp">
    <img src="img/sczp.png" id="photo" alt="" />
    <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>