原生js图片上传 jquery

野性酷女 2022-11-10 03:46 215阅读 0赞

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <meta name="divport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="format-detection" content="telephone=no">
        <title>测试</title>
        
        <style type="text/css">
        	.userInfo{ 
    			margin-top: 52px;
    			width: 94%;
    			margin-left: 3%;
    			background-color: white;
    			border-radius: 12px;
    			display: flex;
    			flex-direction: column;
    }
    .userHeader{ 
    	position: relative;
    }
    .row{ 
    	display: flex;
    	flex-direction: row;
    	justify-content: space-between;
    	align-items: center;
    	padding:10px 20px 10px 12px;
    	font-size: 30px;
    	border-bottom: solid 1px #E9E9E9;
    }
    .row:last-child{ 
    	border-bottom:none
    }
    .userHead{ 
    	width: 100px;
    	height: 100px;
    	border-radius: 100%;
    }
        </style>
    </head>
    
    <body ontouchstart>
    	<div class="userInfo">
    	<div class="userHeader row">
    		<span>头像</span>
    		<img class="userHead" src="C:\Users\Administrator\Pictures\Screenshots\cat.jpg" alt="" />
    		<input type="file" value=""  id="chooseFile" multiple="multiple" accept="image/*"  style="display: none ;" onclick="toUploadPic(this);"/>
    	</div>
    	</div>
    	
    </body>
    </html>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
    var HTTP="http://test.shirenzuile.com/yslp-agent/";
    $('.userHead').click(function(){ 
    //点击事件才能唤起input输入框的文件上传，change事件必须点击改变才可以唤起文件上传
    $("#chooseFile").trigger("click");
    });
    function toUploadPic(dom){ 
    	console.log(dom.value,"dom")
    				if(dom.value.length != 0){ 
    					if(!/image\/\w+/.test(dom.files[0].type)){ 
    				        pointOut("请确保文件为图像类型");
    				        return false;
    				   }
    					var formData = new FormData();
        				formData.append("file", dom.files[0]);
        				$.ajax({ 
        					type:"post",
        					url:HTTP+"file/upload",
        					data: formData,
    				        async: false,
    				        cache: false,
    				        contentType: false,
    				        processData: false,
    				        dataType: "json",
        					success:function(data){ 
        						console.log(data,11111);
        						if(data.result==0){ 
        							$(".userHead").attr("src",data.data);
        						}
        					}
        				});
    				}
    			}
    </script>