码迷,mamicode.com
首页 > Web开发 > 详细

js 实现在页面上传图片浏览

时间:2015-07-20 14:22:47      阅读:129      评论:0      收藏:0      [点我收藏+]

标签:

技术分享

html代码

        <table style="border:none">
            <thead>
            <tr>
                <th class="userphoto">人员登记照</th>
                <th class="idcardphoto">身份证件照</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>
                    <p class="short-input ue-clear">
                        <?php if (!isset($datalist[‘userphoto‘])): ?>
                            <img style="width:300px;height:250px;" src="/images/photo-empty.jpg" id="userphoto"
                                 name="userphoto"/>
                        <?php else: ?>
                            <img style="width:300px;height:250px;" src="<?php echo $datalist[‘userphoto‘]; ?>"
                                 id="userphoto" name="userphoto"/>
                        <?php endif; ?>
                    </p>
                </td>
                <td>
                    <p class="short-input ue-clear">
                        <?php if (!isset($datalist[‘idcardphoto‘])): ?>
                            <img style="width:300px;height:250px;" src="/images/shenfenzheng.jpg"
                                 id="idcardphoto" name="idcardphoto"/>
                        <?php else: ?>
                            <img style="width:300px;height:250px;" src="<?php echo $datalist[‘idcardphoto‘]; ?>"
                                 id="idcardphoto" name="idcardphoto"/>
                        <?php endif; ?>
                    </p>
                </td>

           </tr>
            <tr>
                <td>
                    <p class="short-input ue-clear">
                        <input type="file" name="userphoto1" class="default" multiple=""
                               onchange="Preview(this,‘userphoto‘,‘divuserphoto‘);" id="userphoto"/>
                    </p>
                </td>
                <td>
                    <p class="short-input ue-clear">
                        <input type="file" name="idcardphoto1" class="default" multiple=""
                               onchange="Preview(this,‘idcardphoto‘,‘dividcardphoto‘);" id="idcardphoto"/>
                    </p>
                </td>

            </tr>
            </tbody>
        </table>

js代码

function Preview(obj, obj1, obj2) {
    if (document.all) {//document.all是页面内所有元素的一个集合,可以判断浏览器是否是IE
        $("#" + obj1).css("width", "0px");
        $("#" + obj1).css("height", "0px");
        $("#" + obj2).css("display", "block");
        alert("sd");
        document.getElementById(‘‘ + obj2 + ‘‘).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = obj.value;
    } else {
        $(‘#‘ + obj1).show();
        var file = obj, objectURL = window.URL.createObjectURL(file.files[0]);
        $(‘#‘ + obj1).attr("src", objectURL);
    }
}

js 实现在页面上传图片浏览

标签:

原文地址:http://www.cnblogs.com/lqw4/p/4661261.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!