图片上传并预览

来源：互联网发布：产品瀑布流js代码编辑：程序博客网时间：2024/06/02 16:58

<script type="text/javascript">        $(document).ready(function () {            $("#li_0").removeClass("active");            $("#li_1").addClass("active");        });        $(document).ready(function () {            $("#li_front").mouseover(function () {                $("#img0").attr("style", "display:none;")                $("#spA").attr("style", "display:block");                $("#file0").attr("style", "display:block")            });            $("#li_behind").mouseover(function () {                $("#img1").attr("style", "display:none;")                $("#spB").attr("style", "display:block");                $("#file1").attr("style", "display:block")            });            $("#file0").change(function () {                var objUrl = getObjectURL(this.files[0]);                console.log("objUrl = " + objUrl);                if (objUrl) {                    $("#img0").attr("src", objUrl);                    $("#spA").attr("style", "display:none");                    $("#file0").attr("style", "display:none");                    $("#img0").attr("style", "width:400px;height:200px;display:block;")                                    }            });            $("#file1").change(function () {                var objUrl = getObjectURL(this.files[0]);                console.log("objUrl = " + objUrl);                if (objUrl) {                    $("#img1").attr("src", objUrl);                    $("#spB").attr("style", "display:none");                    $("#file1").attr("style", "display:none");                    $("#img1").attr("style", "width:400px;height:200px;display:block;")                                   }            });            //建立一個可存取到該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>

<h4>照片上传</h4>                        <div class="list photo">                            <ul id="IDCard">                                <li id="li_front"><img src="" id="img0" style="display:none;" /><span id="spA">身份证正面照片</span><input type="file" id="file0" /></li>                                <li id="li_behind"><img src="" id="img1" style="display:none;" /><span id="spB">身份证反面照片</span><input type="file" id="file1" /></li>                                                   </ul>                        </div>

.photo.list li {  position: relative;  height: 200px;  width: 400px;  background: #f0f6f3;  line-height: 200px;  font-size: 20px;  text-align: center;  color: #9ba19e;  text-indent: 0; }

.photo.list li input[type='file'] {    display: block;    position: absolute;    height: 200px;    width: 400px;    top: 0;    cursor: pointer;    opacity: 0; }

0 0