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

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" alt="" id="userphoto"
                                 name="userphoto"/>
                        <?php else: ?>
                            <img style="width:300px;height:250px;" src="<?php echo $datalist['userphoto']; ?>" alt=""
                                 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" alt=""
                                 id="idcardphoto" name="idcardphoto"/>
                        <?php else: ?>
                            <img style="width:300px;height:250px;" src="<?php echo $datalist['idcardphoto']; ?>" alt=""
                                 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);
    }
}

转载于:https://www.cnblogs.com/lqw4/p/4661261.html