input file 样式美化

冷不防 2023-07-12 14:25 10阅读 0赞

**input file 样式美化**

[点击查看文件上传美化][Link 1][https://www.buruyouni.com/static/demo/%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%E6%A0%B7%E5%BC%8F%E7%BE%8E%E5%8C%96.html][Link 1]  
![20200309094115308.png][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3NTE3Mzc3_size_16_color_FFFFFF_t_70][]  
  
![2020030910225177.png][]

<html>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <a href="javascript:;" class="fileStyle">File Upload
    	<input type="file" id="ajaxUpload" style="width:50%">
    </a>
    <style>
       .fileStyle {
    		position: relative;
    		display: inline-block;
    		background: #28bdb7;
    		border: 1px solid #99D3F5;
            border-radius: 4px;
    		padding: 4px 12px;
    		overflow: hidden;
    		color: white;
    		text-decoration: none;
            text-indent: 0;
    		line-height: 20px;
       }
       .fileStyle input {
            position: absolute;
    	    font-size: 100px;
    	    right: 0;top: 0;
    	    opacity: 0;
       }
       .fileStyle:hover {
            background: #AADFFD;
    	    border-color: #78C3F3;
    	    color: #004974;
    	    text-decoration: none;
       }
       
       
       .commAlertMask {
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.1);
        position: fixed;
        top: 0;
        right: 0;
        z-index: 100;
    }
    
    .commAlertMask .commMaskBox{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);   
        background: #fff;
        min-width: 400px;
        max-width: 90%;
        max-height: 90%;
        overflow: auto;
        -webkit-box-shadow: 0 0 25px #666;
        box-shadow: 0 0 25px #666;
        padding: 30px;
    }
    
    .commAlertMask .commMaskBox .commMaskClose{
        position: absolute;
        top: 5px;
        right: 10px;
        height: 24px;
        width: 24px;
        cursor: pointer;
        opacity: .5;
        -webkit-transition: opacity .3s linear;
        -o-transition: opacity .3s linear;
        transition: opacity .3s linear;
    }
    
    .commMaskBox .commMaskClose i{
        font-size: 24px;
        font-weight: bold;
    }
    
    .commMaskBox .commMaskClose:hover{
        opacity: 1;
    }
    
    
    </style>
    
    <script>
    function LoadingStart(LoadText){ 
        var loadingHidder = null;    
        loadingHidder = "<div class='commLoading' style='background: rgba(0,0,0,0.1); width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 100;'><div style='background: #fff;position: absolute;top: 50%;left: 50%; transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);padding: 30px 50px 20px;border-radius: 5px;line-height: 20px;box-sizing: border-box;text-align: center;'><img src='https://www.buruyouni.com/static/upload/images/loading.gif' style='width: 35px;display: block;margin: 0 auto 15px;' /><span>" + LoadText + "<span></div></div>";
        $("body").css("overflow","hidden").append(loadingHidder);
    }
    
    function LoadingEnd(){
        $("body").css("overflow","");
        $(".commLoading").remove();
    }
    function commAlert(ALERTINNERHTML){
        var alertHTML = "";
        alertHTML += "<div class='commAlertMask'><div class='commMaskBox'><div class='commMaskClose'><i style='font-size:22px;font-style:normal'>x</i></div><div className='commAlertCont'>" + ALERTINNERHTML + "</div></div></div>";
    
        $("body").append(alertHTML);
    
        $(".commAlertMask .commMaskClose").click(function(){
            $(".commAlertMask").remove();
        });
    }
    /**
     *  当文件上传的input改变内容的时候上传文件
     */
    $('#ajaxUpload').change(function(){
    	LoadingStart("uploading...");
    	
    	var data = new FormData();
    	data.append('myfile',$(this).get(0).files[0]);//获取当前的input的files,后台接收的时候name是"myfile"
    	//data.append('isUploadImage','1');//可自己增加的选项
    	
    	/* ajax上传部分
    	$.ajax({
    		url:'/ajaxUploadFile',//你的上传方法
    		type:'POST',
    		data:data,
    		cache: false,//选项必填
    		contentType: false,//选项必填
    		processData: false,//选项必填
    		success:function(data){
    			console.log(data);
    			
    			if(data.url){
    				$("#business_license").val(data.url);
    				$("#business_license_img").css('display','inline-block');
    				$("#business_license_img").attr('src',data.url);
    			}
    			
    			LoadingEnd();
    		},
    		error:function(){
    			LoadingEnd();
    			commAlert("Upload failed, please try again");
    		}
    	});
    	*/
    	
    	setTimeout(function(){
    		LoadingEnd();
    		commAlert("上传成功...");
    	},2000);
    });
    </script>
    
    
    </html>

[Link 1]: https://www.buruyouni.com/static/demo/%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%E6%A0%B7%E5%BC%8F%E7%BE%8E%E5%8C%96.html
[20200309094115308.png]: https://img-blog.csdnimg.cn/20200309094115308.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3NTE3Mzc3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200309102328202.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3NTE3Mzc3,size_16,color_FFFFFF,t_70
[2020030910225177.png]: https://img-blog.csdnimg.cn/2020030910225177.png