上传文件input(type=file)美化。

input file 把之前的按钮透明度opacity设置为0,外层用div包裹。

1 <div class="uploadButDiv greenButton text-center">
2   <input type="file" accept="image/jpeg,image/jpg,image/png,image/gif"/>上传
4 </div>
.uploadButDiv {
    width: 100%;
    height: 3.25rem;
    line-height: 3.2rem;
    position: relative;
    cursor: pointer;
    color: #0057FF;
    font-size: 1.125rem;
    background: #fff;
    border: 1px solid #0057FF;
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;
}

.uploadButDiv input {
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
    cursor: pointer
}
时间: 2024-10-31 07:09:55

上传文件input(type=file)美化。的相关文章

文件上传按钮input[type=&quot;file&quot;]按钮美化时在IE8中的bug【兼容至IE8】

首先看一下完成后的效果,鼠标移入可改变为手指的效果. 在此就不加图标了 <label class="file-upload"> <span>上传附件</span> <input type="file" name=""> </label> 在IE8中需要将input透明后还不能完全达到效果,还需要将字体设大一些,撑开input,这是IE自带的兼容问题. .file-upload{ disp

用jQuery重置用于文件上传的input (type=&quot;file&quot;)

页面中有如下标签: <input type="file" id="upload"/> 此标签本用于文件上传,现在有需要将其值重置为空.于是想当然地写出如下代码: $('#upload').val(''); 但经测试,该处理方法对IE无效,因为IE不允许javascript改变type为file的input的值,又是让人蛋疼的IE... 在浏览器兼容性方面本人是白痴一个,遂放狗一搜,有解决方案如下: if(ie) { // 此处判断是否是IE $('#up

自定义上传按钮 &lt;input type=&quot;file&quot; name = &quot;file&quot;/&gt; (将file隐藏在button下)

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>定义input type="file" 的样式</title><style type="text/css">body{ font-size:

php 上传文件 $_FILES[&#39;&#39;][&#39;type&#39;]的值

php 上传文件 $_FILES['']['type']的值 一个函数 function upload_file($fname,$ftype,$fsize,$ferror,$ftmp_name,$fpath){ date_default_timezone_set('PRC'); $store_nm = date("YmdHis") . "-" . rand(10000,99999) . "-". strlen($fname)."-$fn

form表单上传域(type=&quot;file&quot;)的使用----上传文件

一,单个文件的上传 1.html/jsp页面 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/

spring mvc 中的MultipartFile 上传文件错误:File has already been moved - cannot be transferred again

没有正确配置临时文件的存储空间: 在spring mvc配置文件的修改: <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <!-- 上传文件大小上限 --> <property name="maxUploadSize"> <value>52

上传文件类型type和大小size限制

运行效果 原文地址:https://www.cnblogs.com/caststudy/p/11456320.html

上传文件 隐藏input type=&quot;file&quot;,用其它标签实现

html: <a id="js-load-diagram" title="导入BPMN文件" onclick="bpmnFile.click()"> 上传文件 <input type="file" id="bpmnFile" style="display:none"> </a> js: $('#bpmnFile').on('change', funct

使用Servlet上传文件

使用浏览器向服务器上传文件其本质是打开了一个长连接并通过TCP方式传输数据.而需要的动作是客户端在表单中使用file域,并指定该file域的name值,然后在form中设定enctype的值为multipart/form-data和method值为post.其他就如同一般表单一样.示例如下: <form name="form" action="uploadbyservlet1" enctype="multipart/form-data" m