jizhicms 简历表单,包含上传

曹え 5811 发布于:2023-09-27 02:43:59

image.png


html

{php
		$code1 =time();
		$_SESSION['codenum'] = $code1;
	/}
    <!-- 弹窗 -->
    <div class="m-pop1" id="m-win">
        <div class="pop-bg">
        </div>
        <div class="inner">
            <div class="m-popform">
                <div class="close cls"></div>
                <div class="top">
                    <div class="tit">产品经理(1人) <span></span></div>
                    <div class="info">市场&战略发展中心 | 市场运营部|上海</div>
                </div>
                <form action="" id="form-file10">
					<input type="hidden" name="code" value="{php echo $code1; /}" >
                    <div class="m-formp1">
                        <div class="group">
                            <div class="txt">
                                姓名<span>*</span>
                            </div>
                            <div class="inp">
                                <input class="name" type="text" name="" id="">
                            </div>
                        </div>
                        <div class="group">
                            <div class="txt">
                                手机<span>*</span>
                            </div>
                            <div class="inp">
                                <input class="phone" type="text" name="" id="">
                            </div>
                        </div>
                        <div class="group">
                            <div class="txt">
                                邮箱
                            </div>
                            <div class="inp">
                                <input class="email" type="text" name="" id="">
                            </div>
                        </div>
                        <div class="group">
                            <div class="txt">
                                上传简历<span>*</span>
                            </div>
                            <div class="inp">
                                <label for="" class="upload">
                                    <!-- 上传前样式 -->
                                    <div class="up"><img src="images/joinus/a2.png" class="ico" alt="">选择文件</div>
                                    <!-- 上传前样式 end -->
									<input type="hidden" name="myfile" id="myfile10" >
                                    <input type="file" name="file" id="file10" data-file="1" >
									
                                    <!-- 上传后样式 -->
                                    <div class="up-1" style="display: none;"><img src="images/joinus/a5.png" class="ico" alt="">
										<span class="t">XXX简历.doc</span>
										<span class="del"></span>
									</div>
                                    <!-- 上传后样式end -->
                                </label>
                            </div>
                        </div>
                    </div>
                    <!-- 上传成功后显示按钮  -->
                    <div class="upload-btn" style="display: none;">
                        <a href="" class="btn">预览</a>
                        <!-- <a href="" class="btn">预览</a> -->
                    </div>
                    <div class="ort">
                        若上传简历遇到问题,可将简历发送至<a href="mailto:hr@dunwill.com">hr@dunwill.com</a>
                    </div>
                    <input type="submit" class="submit" name="" id="" value="提交">
                </form>
            </div>
        </div>
    </div>


js

<script>
		// 上传
		var file = 1;
		/*
		    data-file=1:还未选择文件
		    data-file=2:已经成功上传文件
		*/
	   // $("#file10").val('');
	   $('#file10').change(function() {
		   console.log('aaaaa')
	       let filePath = $(this).val();
	       // let urlArr = filePath.split("\\"); //以反斜杠'\'截取文件名为数组
	       // let fileName = urlArr[urlArr.length - 1]; //获取文件名
	       // $(this).parents('.choice-file').find('.tips').text(fileName);
		   var fname= this.files[0].name;
	       let form = 'form-file10';
	       let file = '#file10';
	       let myfile = '#myfile10';
	       uploadsFile(form, myfile, file,fname);
	    
	       $(this).attr('data-file', 2); //已经选择文件
	   })
	   
	   //文件上传
	   function uploadsFile(form, myfile, file,fname) {
	       let forms = document.getElementById(form);
	       let files = $(file);
	       let data = new FormData(forms);
	       data.append("filename", files.attr("name"));
	       $.ajax({
	           url: "/common/uploads.html", //处理图片的文件路径
	           type: "POST", //传输方式
	           data: data,
	           dataType: "json", //返回格式为json
	           processData: false, // 告诉jQuery不要去处理发送的数据
	           contentType: false, // 告诉jQuery不要去设置Content-Type请求头
	           success: function(res) {
	               if (res.code == 0) {
	                   alert('文件上传成功');
	                   $(myfile).attr('value', res.url);
					   $('.m-popform .upload .up').hide();
					   $('.m-popform .upload .up-1').css('display','flex')
					   $('.m-popform .upload .up-1 .t').text(fname);
	               } else {
	                   alert(res.error);
	               }
	           }
	       });
	   }
	   // 删除上传文件
	   $('.m-popform .upload .del').click(function(){
		   $('.m-popform .upload .up-1').hide();
		   $('.m-popform .upload .up').css('display','flex')
		   $('.m-popform .upload .up-1 .t').text('');
		   $('#myfile10').attr('value','');
	   })
	</script>
	
	<script>
	// 表单ajax提交
		
		$('.m-popform .submit').click(function(){
			
			// 姓名
			let name = $('.name').val();
			if(!name){ 
				alert('姓名不能为空')
				return false;
			}
			
			// 手机
			let phone = $('.phone').val();
			console.log(phone)
			if(!phone){
				alert('手机号码不能为空')
				return false;
			}
			// 定义正则表达式
			var reg='^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-9])|(18[0-9])|166|198|199|191|(147))\\d{8}$';
			//创建正则表达式对象
			var regExp=new RegExp(reg);
			//使用test()函数验证数据是否匹配正则表达式,匹配返回true,否则返回false
			if(!regExp.test(phone)){
				alert('请输入正确手机号')
				return false;
			}
			// 邮箱
			let email = $('.email').val();
			if(!email){
				alert('邮箱不能为空')
				return false;
			}
			
			let jl = $('#myfile10').val();
			if(!jl){
				alert('请上传简历')
				return false;
			}
			
			
			let data={
				tid:111,
				title:'表单提交',
				name:name,
				email:email,
				phone:phone,
				jl:jl,
				ajax:1
			}
			$.post('/message/index',data,function(res){
			    if(res.code==0){
			        alert('提交成功!');
			        window.location.reload();
			    }else{
			        alert(res.msg);//弹出错误提示
			    }
			    
			},'json')
		})
		
		
	</script>


觉得有用请点个赞吧!
0 128