input file 样式美化

于 2020-03-09 10:26:54 发布
阅读量1k 收藏 3
点赞数
分类专栏： js/jq/h5/cs3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27517377/article/details/104746070
版权

input file 样式美化

点击查看文件上传美化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




 

<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>

<!--
//php服务端文件上传方法
 public function ajaxUploadFile(){
        header('Content-Type:application/json');
        $path = 'image/catalog/image/';
        $file = "";
        if (!is_dir($path)) {
            @mkdir($path, 0755);
        }
        if(is_dir($path)){
            if(isset($_FILES['myfile']['name'])) {
                $allowed_file=array('gif','png','jpg','pdf','doc','docx','jpeg');
                $filename = basename(preg_replace('/[^a-zA-Z0-9\.\-\s+]/', '', html_entity_decode($_FILES['myfile']['name'], ENT_QUOTES, 'UTF-8')));
                $extension = pathinfo($filename, PATHINFO_EXTENSION);
                if($filename != '') {
                    if($_FILES['myfile']['size']>1024*1024*5){//limit 5M
                        echo json_encode(array('url'=>'','msg'=>'file size is over 5MB'));exit();
                    }
                    if(in_array($extension,$allowed_file) ) {
                        $file = time().'-'.$filename;
                        $directory  = $path;
                        $fileNameAndPath = $directory.$file;
                        move_uploaded_file($_FILES['myfile']['tmp_name'], $fileNameAndPath);

                        echo json_encode(array('url'=>$directory.'/'.$file,'msg'=>'upload success'));
                    }else{
                        echo json_encode(array('url'=>'','msg'=>'notAllow','notAllow'=>'not allow file'));
                    }
                }else{
                    echo json_encode(array('url'=>'','msg'=>'upload error','notAllow'=>''));
                }
            }else{
                echo json_encode(array('url'=>'','msg'=>'upload error','notAllow'=>''));
            }
        }

 }
 
 -->
</html>

 

或非与
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
input上传文件美化
12-22
input标签type="file"，上传文件样式美化。 上传完毕显示文件名。
用css alpha 滤镜 实现input file 样式美化代码
10-30
现在，我们已经成功地实现了使用CSS Alpha滤镜对`<input type="file">`的样式美化，同时保持了其功能的正常使用。你可以根据需要调整按钮的位置、颜色和其他样式属性，以适应不同的设计需求。 总结一下，本文主要...
input file样式美化
weixin_33798152的博客
10-30 379
默认样式： <input type="file" /> 美化样式时： 将其设置为透明，设置宽高覆盖到需要用的地方，宽100%，高100% 可以用到定位 .box{　　position:relative;　　width:300px;　　height:36px;} input[type="file"]{　　width:100%;　　height:100%...
css input[type=file] 样式美化，input上传按钮美化
weixin_34341229的博客
07-05 402
今天的内容是input[type=file] 样式美化，input上传按钮美化。我们在做input文本上传的时候，html自带的上传按钮比较丑，如何对其进行美化呢？同理：input checkbox美化，input radio美化是一个道理的，后面文章会总结。思路：input file上传按钮的美化思路是，先把之前的按钮透明度opacity设置为0,然后，外层用div包裹，就实现了美化功能。代码如...
input file 美化
gao199108的博客
09-12 387
的默认外观实在难看，绝大多数情况都需要对其美化。找了很多资料，目前发现以下方式是最简单的美化方式。 1.将file input用label包裹起来，然后给这个label增加我们想要的样式。 2.给input增加样式： style="left:-9999px;position:absolute;" 3.label内增加显示文本 上传文件 完整代码：(点击查看demo) label
css input[type=file] 样式美化(input上传文件样式 )
09-24
本教程将详细介绍如何使用CSS对`input[type=file]`进行样式美化，使文件上传按钮更加符合网站的整体风格。 首先，我们来看一个简单的例子。在这个例子中，我们创建了两个不同的样式来展示如何自定义文件上传按钮： ...
上传控件input file 样式美化
04-24
通过以上方法，我们可以对`<input type="file">`上传控件进行样式美化，创建出符合网页设计风格的上传界面。但请注意，虽然我们可以改变控件的外观，但其核心功能和交互仍受浏览器安全策略的限制。在设计时，要兼顾...
文件上传input file简便美化方案(css)
09-25
件上传input在各个浏览器里表现形式都不一样,这里通过css样式控制，尽量在多浏览器中的表现都一样
定义input type=file 样式的方法
12-14
`input type="file"` 是HTML中用于创建文件选择器的元素，它的默认样式往往不符合设计师的期望，因此需要对其进行美化。原始的`file`控件通常呈现为一个简单的文本框和一个"浏览"按钮，其外观朴素且难以与页面其他...
input file选择文件之后自动上传（样式自定义美化）
09-01
自动上传文件，样式美化，input file选择文件之后自动上传（样式自定义美化），$.ajaxFileUpload自动上传文件。不会包教会。你值得拥有！
美化file input
08-07
美化file input, http://blog.csdn.net/wuqinfei_cs/article/details/38413317
input file美化
_ACME_的博客
07-11 3629
input file太丑了，所以美化那是势在必行的。方法很多种。我就介绍两种方法.1.利用一个按钮去触发input file。 如图: html代码：<input type="text" id="show-path" style="height: 30px"/> <button style="height: 36px" id="btn">选择文件</button> <input type="
input file 的美化
Fighting_xr的博客
03-27 2596
原文链接：Styling & Customizing File Inputs the Smart Way（作者：Osvaldas Valutis） 这份教程主要介绍如何将与配合、以保持语义化+可访问性为目标辅以少量Javascript来美化。 实例 网上流传过一些“自定义”元素的方法，试验过但都实现不了像Readerrr上那种上传文件即时显示到内容流里的效果。兴许最烂
input[type=file] 样式美化
Tjhfsghbjknjdy的博客
04-06 529
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>HTML Input file美化</title> <style type="text/css"> a{text-decorati...
css input file样式美化
最新发布
06-28
### 回答1： CSS可以用来美化input file样式，具体方法如下： 1. 隐藏默认的input file样式 ```css input[type="file"] { display: none; } ``` 2. 创建一个自定义的按钮样式 ```css .custom-file-upload { border: 1px solid #ccc; display: inline-block; padding: 6px 12px; cursor: pointer; } ``` 3. 将自定义按钮和input file关联起来 ```html <label for="file-upload" class="custom-file-upload"> 选择文件 </label> <input id="file-upload" type="file"/> ``` 这样就可以实现一个简单的input file样式美化了。当然，还可以根据需求进行更加复杂的样式设计。 ### 回答2： 在Web开发中，我们经常使用input file标签来让用户上传文件。然而，由于input file的样式比较简单单调，我们往往需要用CSS来美化样式，使其更加符合网站的视觉风格，以增强用户的体验。在以下的回答中，我将介绍几种常见的CSS input file样式美化方法。 1. 纯CSS样式美化 在这种方法中，我们通过CSS样式对input file标签进行美化。一般来说，我们需要通过input[type=file]这个CSS选择器来选中input file标签。然后，我们可以通过设置样式来改变这个标签的外观，例如修改背景颜色，设置文字样式，以及添加边框、阴影等效果。 2. 借助JavaScript库实现 除了纯CSS样式美化，我们还可以借钩JavaScript库来实现input file样式的美化。比如，利用jQuery的filestyle插件，我们可以在input file标签的旁边添加一个按钮，使得用户点击按钮后弹出文件选择框。这样在视觉效果上会更加美观，用户操作也更加方便。 3. 页面元素替换 在这种方法中，我们可以将input file标签替换成其他更符合页面风格的元素，并设置对应的事件处理函数。例如，我们可以通过一个div元素来替代input file标签，当用户点击这个div时，触发input file的点击事件，从而弹出文件选择框。接着，我们可以通过CSS样式来让div元素看起来像自己设计的按钮或图标，从而实现input file样式的美化。 总之，通过CSS input file样式美化，我们可以提高用户的使用体验和页面的视觉效果。无论是使用纯CSS的方式、借助JavaScript库实现，还是进行页面元素替换，我们都需要尽量保证美化后的样式与页面整体视觉风格相符，使得整个网站看起来更加统一、美观。 ### 回答3： CSS Input File样式美化是一种通过CSS来美化HTML的文件输入元素的方法。通常，HTML文件输入元素的默认样式是单调和无聊的。美化它们的样式既能够增强页面的可视性，也能够提高用户体验。在这里，我们将介绍几种常见的CSS Input File样式美化的方法。 1. 使用伪类选择器：可以通过给文件输入元素添加伪类选择器来美化它们的样式。例如，通过添加 ::before 和 ::after 伪类选择器，我们可以为文件输入元素添加图标和文本来让它看起来更加有吸引力和易于使用。 2. 改变字体颜色和背景颜色：可以通过改变文件输入元素的字体和背景颜色来使其看起来更加有吸引力。这样可以使其更加显眼和易于使用。 3. 使用CSS框架：也可以使用CSS框架来美化文件输入元素，框架通常包含现成的文件输入样式。Bootstrap和Foundation等CSS框架目前是最受欢迎的。 4. 自定义CSS样式表：可以自定义CSS样式表来美化文件输入元素。通过调整文件输入元素的边框，背景颜色，颜色，字体等属性，可以轻松地制作美观且实用的样式。 在进行CSS Input File样式美化时，要注意遵循通用CSS最佳实践，避免过度使用样式。同时要确保文件输入元素的有效性，并遵循HTML标准。切勿使用外部插件进行文件输入元素的美化，这会增加额外的代码和安全漏洞。总之，好的文件输入文件样式应该是简单，易于使用和眼睛友好的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值