Summary_javascript实现个人简历上传照片

最新推荐文章于 2022-07-31 00:18:58 发布

家有喜娟儿

最新推荐文章于 2022-07-31 00:18:58 发布

阅读量465

点赞数

分类专栏： JavaScript html

本文链接：https://blog.csdn.net/chengtengfei352/article/details/104284570

版权

JavaScript 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

<html>
<head>
    <style>
        input{
            border: 0px;
            outline:none;
            height: 50px;
            text-align: center;
            font-size: 16px; font-family: "Microsoft YaHei";
        }
        textarea{
            border:0px;
            outline:none;
            text-align: left;
            font-size: 16px; font-family: "Microsoft YaHei";
        }
        table{
            border-color: black;
            border-collapse: collapse;
            text-align: center;
        }
        tr{
            border: 0px;
        }
        td{
            text-align: center;
        }
        pre{
            font-size: 16px; font-family: "Microsoft YaHei";
        }
        form img {
            height: 140px;
            width: 100px;
        }
        label{
            background-color: gainsboro;
            padding: 5px 10px;
            border-radius: 5px;
            border: 1px ridge black;
            font-size: 0.8rem;
            height: auto;
        }
        label.pos_abs{
            position:absolute;
            left: 953px;
            top: 225px;
        }
    </style>
    <title>个人简历</title>
 
</head>
<body>
 
<form action="" method="post">
    <h3 align="center">个人简介</h3>
    <table  border="1" align="center" rules=none cellspacing=0 >
        <tr>
            <td border="0">
                <table border="1">
                    <tr>
                        <td width="100" height="50">姓名</td>
                        <td height="50"><input type="text" name="name" style="width: 100px" value="小丸子"></td>
                        <td width="100" height="50">性别</td>
                        <td height="50"><input type="text" name="sex" style="width: 100px" value="女"></td>
                        <td width="100" height="50">出生年月</td>
                        <td height="50"><input type="text" name="birthday" style="width: 100px" value="1998/10/15"></td>
                        <td rowspan="4" colspan="1"  width="50">
                            <div class="preview">
                                <p>未上传证件照...</p>
                            </div>
                            <div>
                                <label class="pos_abs" for="uploadPhoto" style="">上传证件照</label>
                                <input type="file" style="width: 107px" id="uploadPhoto" class="uploadPhoto" name="photo" accept=".jpg, .jpeg, .png" style="opacity: 0">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td width="100" height="50">民族</td>
                        <td height="50"><input  type="text" name="nation" style="width: 100px" value="汉"></td>
                        <td width="100" height="50">政治面貌</td>
                        <td height="50"><input type="text" name="politicsStatus" style="width: 100px" value="共青团员"></td>
                        <td width="100" height="50">身高</td>
                        <td height="50"><input type="text" name="height" style="width: 100px" value="1xxcm"></td>
                    </tr>
                    <tr>
                        <td width="100" height="50">学制</td>
                        <td height="50"><input type="text" name="lengthOfSchooling" style="width: 100px" value="4"></td>
                        <td width="100" height="50">学历</td>
                        <td height="50"><input type="text" name="educationBackground" style="width: 100px" value="本科"></td>
                        <td width="100" height="50">户籍</td>
                        <td height="50"><input type="text" name="censusRegister" style="width: 100px" value="安徽"></td>
                    </tr>
                    <tr>
                        <td width="100" height="50">专业</td>
                        <td height="50"><input type="text" name="major" style="width: 100px" value="CS"></td>
                        <td width="160" height="50" colspan="2">毕业学校</td>
                        <td height="50" colspan="2"><input type="text" name="graduateSchool" width="300" value="南昌大学"></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    
</form>
<script>
    var input = document.querySelector('#uploadPhoto');
    var preview = document.querySelector('.preview');<!--获取第一个元素-->
	
    input.style.opacity = 0;
    input.addEventListener('change', updateImageDisplay);
    
	function updateImageDisplay() {
        while(preview.firstChild) {
            preview.removeChild(preview.firstChild);
        }
        var curFiles = input.files;
        if(curFiles.length === 0) {
            var para = document.createElement('p');
            para.textContent = 'No files currently selected for upload';
            preview.appendChild(para);
        } else {
            var list = document.createElement('dl');
            preview.appendChild(list);
            for(var i = 0; i < curFiles.length; i++) {//curFiles[i].name
                var listItem = document.createElement('dt');
                var image = document.createElement('img');
                image.src = window.URL.createObjectURL(curFiles[i]);
                listItem.appendChild(image);//图片
                list.appendChild(listItem);
            }
        }
    }
</script>
</body>
</html>

家有喜娟儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Summary_javascript实现个人简历上传照片

<html><head> <style> input{ border: 0px; outline:none; height: 50px; text-align: center; font-size: 16px; fo...
复制链接

扫一扫