精华内容
下载资源
问答
  • 自定义input type=file 样式,美化input type=file 改变input type=file控件“丑陋面貌”
    自定义input type=file 样式 美化input type=file 改变input type=file控件“丑陋面貌”

          当我们想要用css美化表单的时候,有两个控件就会和前段人员作对,一个是是大名鼎鼎的select,另一个就是我现在要说说的input type=file 

           原始的input type=file太丑了,丑的惨不忍睹,当一个非常漂亮的页面,就因为input type=file这个控件破坏整体美感的时候,你会有“一颗老鼠屎坏了一锅汤”的感慨。我们要美化input type=file控件。

          原理:看起来input type=file 是 一个text和一个button组合,那我们就用一个text和一个button来代替input type=file控件,美化text和button对我们来说so easy!然后我们把input type=file控件变成透明的,并且将input type=file控件放置text和button组合上。

         技术点:

             1、将input type=file控件透明

             2、将input type=file控件放置text和button组合上,必须保持input type=file控件与text和button组合大小一致,位置完全重合。

        原始的file控件是这样的:

    <input type="file" name="file" /> 

    既然这样我们就用一个text和一个button来显示这个file的样式,html代码是这样: 

    <div class="daoru">导入文件路径:
       <input type="text"   class="input_text" id="textfield"  > 
       <input type="button" class="input_sub"  value="浏览..." > 
       <input type="submit" class="input_sub"  value=" 上 传 " >
       <input type="file"   class="input_file" contenteditable="false"  οnchange="document.getElementById('textfield').value=this.value">
    </div>


    外面的一层div是为了给里面的input提供位置参考,因为写样式的时候需要相对定位,使真正的file控件覆盖在模拟的上面,然后隐藏掉file控件(使file控件不可见),所以css代码是这样的: 

    .daoru {font-size: 13px;}
    .daoru .input_text {width: 140px;height: 12px;line-height: 12px;padding: 5px;border: 1px solid #C0C5CB;font-size: 12px;color: #333;}
    .daoru .input_sub {width: 60px;height: 24px;line-height: 24px;text-align: center;font-size: 13px;color: #fff;border: none;background: #DA3610;}
    .daoru .input_file {position: absolute;top: 0;left: 99px;height: 24px;_height: 30px;filter: alpha(opacity : 0);opacity: 0;width: 218px}


        效果图:




        具体代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta charset="utf-8" />
    <title>自定义上传文件样式</title>
    <style type="text/css">
    .daoru {font-size: 13px;}
    .daoru .input_text {width: 140px;height: 12px;line-height: 12px;padding: 5px;border: 1px solid #C0C5CB;font-size: 12px;color: #333;}
    .daoru .input_sub {width: 60px;height: 24px;line-height: 24px;text-align: center;font-size: 13px;color: #fff;border: none;background: #DA3610;}
    .daoru .input_file {position: absolute;top: 0;left: 99px;height: 24px;_height: 30px;filter: alpha(opacity : 0);opacity: 0;width: 218px}
    </style>
    </head>
    <body>
    	<div class="daoru">导入文件路径:
    	    <input type="text"   class="input_text" id="textfield"  > 
    	    <input type="button" class="input_sub"  value="浏览..." > 
    	    <input type="submit" class="input_sub"  value=" 上 传 " >
    	    <input type="file"   class="input_file" contenteditable="false"  οnchange="document.getElementById('textfield').value=this.value">
    	</div>
    	<input type="file" >
    </body>
    </html>
    


    展开全文
  • 获取input type=file的文件名方法: let filePath = $("input[type = 'file']").val(); //获取路径 let urlArr = filePath.split("\\"); //以反斜杠'\'截取文件名为数组 let fileNam...

    获取input type=file的文件名方法:

     

            let filePath = $("input[type = 'file']").val();        //获取路径

            let urlArr = filePath.split("\\");                    //以反斜杠'\'截取文件名为数组

            let fileName = urlArr[urlArr.length-1];        //获取文件名

    input type=file在个浏览器中样式各不相同,如下图所示:

    若要统一样式,可将原有样式设置属性 opacity: 0,布局上用定位position:relative/absolute实现,实现效果如下:


    具体实现代码如下:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <script src="./d3/jquery-1.12.0.min.js"></script>
        <style>
            .fileIpt {
                width: 423px;
                height: 30px;
            }
            input {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }
            .label-text[for = "inputDataBackup1"] {
                color: #0e0e0e;
                padding: 5px 20px 6px 20px;
                margin-bottom: 0px;
                font-weight: 500;
                background: #2fc8f6;
                border-radius: 3px 0px 0px 3px;
                -webkit-border-radius: 3px 0px 0px 3px;
                -moz-border-radius: 3px 0px 0px 3px;
                font-size: 14px;
                vertical-align: middle;
                text-align: center;
            }
            #inputDataBackup1 {
                width: 268px;
                height: 30px;
                background: transparent;
                position: relative;
                display: inline-block;
                margin-left: -6px;
                padding: 1px 0px 0px 0px;
                color: #57D1F7;
                text-align: center;
                vertical-align: middle;
                border: 2px solid #2fc8f6;
                border-radius: 3px;
                -webkit-border-radius: 3px;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }
          .selectFile {
              position: absolute;
              left: 0;
              top: -1px;
              z-index: 3;
              height: 30px;
              width: 268px;
              opacity: 0;
          }
        .errTip {
              position: absolute;
              top: 20px;
              left: 50%;
              margin-left: -90px;
              color: red;
              font-size: 12px;
          }
        .fileName {
              width: 210px;
              height: 30px;
              position: absolute;
              left: 0;
              top: -2px;
              z-index: 1;
              color: #000;
              text-align: center;
              background-color: transparent;
              border-color: transparent;
              overflow: hidden;
              text-overflow: ellipsis;
          }
        .path {
              width: 55px;
              height: 30px;
              background-color: #2fc8f6;
              display: inline-block;
              position: absolute;
              top: -2px;
              right: 0;
              z-index: -1;
              text-align: center;
              vertical-align: middle;
              border-radius: 0px 3px 3px 0px;
              -webkit-border-radius: 0px 3px 3px 0px;
              -moz-border-radius: 0px 3px 3px 0px;
          }
          .pathText {
              display: inline-block;
                font-size: 12px;
                line-height: 30px;
                color: #fff;
                letter-spacing: 3px;
          }
        </style>
    </head>
    <body>
        <div class="fileIpt">
          <label class="label-text" for="inputDataBackup1">选择文件</label>
          <div id="inputDataBackup1" class="input-selectStyle">
            <input class="selectFile" type="file" multiple="multiple" title="未选择任何文件">
            <p class="errTip"></p><input class="fileName" readonly="readonly">
            <div class="path">
              <span class="pathText">上传</span>
            </div>
          </div>
        </div>
        <script type="text/javascript">
            $(".selectFile").on("change",function(){
                console.log($(this))
                var filesNum = $('.selectFile')[0].files.length;
                if(filesNum > 1){
                    var fileTiltle = [];
                    for(var i = 0 ;i<filesNum;i++){
                        var file=$('.selectFile')[0].files[i];
                        console.log(file.name);
                        fileTiltle.push(file.name)
                    }
                    $(".fileName").val(fileTiltle.join(","));
                    $(this).attr("title",filesNum+'个文件');
                }else if(filesNum == 1){
                    var filePath = $(this).val();
                    var urlArr = filePath.split("\\");
                    var fileName = urlArr[urlArr.length-1];
                    $(".fileName").val(fileName);
                    $(this).attr("title",fileName);
                }
            
            if(fileName == "") {
                $(".errTip").html("请选择上传文件");
            }else{
                $(".errTip").html("");
            }
        })
        </script>
    </body>
     
    </html>

     

    展开全文
  • 关于input type=“file”的及其files对象的深层探究

    万次阅读 多人点赞 2018-05-11 16:57:03
    我们都知道,html5中有个input type=file元素。用该元素可以实现页面上传文件的功能 但一般的做法只是简单的在表单中操作,我来研究一下深层东西 想要了解它,就要知道它的内置对象,files 页面上写一个input,...

    我们都知道,html5中有个input type=file元素。用该元素可以实现页面上传文件的功能

    但一般的做法只是简单的在表单中操作,我来研究一下深层东西

    想要了解它,就要知道它的内置对象,files

    页面上写一个input,然后选俩个图片,打印这个input对象

    $("input[name='file1']").change( function(e){
        console.log($("input[name='file1']"))
    })

    发现有下列值,在0中,有一个files对象

    我们发现input选择的文件被记录到了这个对象中,这个是fileList对象,是一个只读对象,不能修改

    因为它不能修改,所以很难实现对已选中多个文件的删除某个文件等操作

    里面记录了文件的name,size,type,和修改时间等,可知这个对象只存放了一些文件的信息,相当于是本地文件的索引,并不是把文件放到input中了,上传文件时它会再去找到实际的本地文件

    fileList数组包含多个File对象,File对象是继承与Blob对象的,关于file,url,blob,dataUrl可以详细查查

    一般url可以是本地地址,http地址等

    blob对象一般的形式是:blob:http://192.168.100.151:8080/1148dcd6-952e-4478-823d-21b37e537c2f,属于浏览器对象

    dataUrl 一直格式是:以data:image/jpeg;base64,这种类似形式打头的一串很长的字符串。

    这三种形式在img标签中src属性都可以调用。

    File对象有name,size,lastModified属性

    File对象的创建:

    var file1=new File([blob], "aa.png",{type:"image/jpg"}); //第一个参数是Blob对象或者dataUrl,第二个参数是文件名,三个参数可选,规定文件类型

    注意:第一个参数必须是对象,不能是转换成的字符串,比如uniapp或者微信小程序的chooseImage方法返回的blob的url,他是一个字符串,这样生成的File对象只是将url字符串变成文件了,不是文件本身!!!

    想把blob字符串变成Blob对象,可以用es6的:const blob = await fetch(image.path).then(r => r.blob())

    或者用传统的XHR或者ajax也行,就是把blob对象根据url给获取出来就行。

    利用这个files对象,我们可以实现很多功能,例如:

    一.选择图片未经后端显示预览图片

    方法1:利用window的url工具将文件生成url,再将url赋值给img的src属性,显示出选中图像

    顺便提一下,input中控制选中类型加一个accept属性就行了,只会显示设定的文件类型

     

    <input id="file1" type="file"  name="file1" multiple="multiple" accept=".doc,.jpg">
    $('.fbpj-camera').change(function(event) {
    	 	//$('.dianpuzhuangxiu .addmokuai .block .shuoming1 .pic .pic1').children().remove();
       		 // 根据这个 <input> 获取文件的 HTML5 js 对象
    	    var files = event.target.files, file;        
    	    if (files && files.length > 0) {
    	      // 获取目前上传的文件
    	      file = files[0];
    	      // 来在控制台看看到底这个对象是什么
    	      console.log(file);
    	      // 那么我们可以做一下诸如文件大小校验的动作
    	      if(file.size > 1024 * 1024 * 2) {
    	        alert('图片大小不能超过 2MB!');
    	        return false;
    	      }
    	      // !!!!!!
    	      // 下面是关键的关键,通过这个 file 对象生成一个可用的图像 URL
    	      // 获取 window 的 URL 工具     
    	      var URL = window.URL || window.webkitURL;     
    	      // 通过 file 生成目标 url
    	      var imgURL = URL.createObjectURL(file);
    	      // 用这个 URL 产生一个 <img> 将其显示出来
    	      $('.fbpj .container').prev().find("img").attr('src', imgURL);
    	      // 使用下面这句可以在内存中释放对此 url 的伺服,跑了之后那个 URL 就无效了
    	      	 //URL.revokeObjectURL(imgURL);
       		 }
      		});

    方法二:利用html5的FileReader()读取文件

    *前提是浏览器支持的话

    if(window.FileReader) {  
        var fr = new FileReader();  
        // add your code here  
    }  
    else {  
        alert("Not supported by your browser!");  
    } 
    <script type="text/javascript">  
            function showPreview(source) {  
                var file = source.files[0];  
                if(window.FileReader) {  
                    var fr = new FileReader();  
                    fr.onloadend = function(e) {  
                        document.getElementById("portrait").src = e.target.result;  
                    };  
                    fr.readAsDataURL(file);  //也是利用将图片作为url读出
                }  
            }  
        </script>  
      
    <input type="file" name="file" onchange="showPreview(this)" />  
                                    <img id="portrait" src="" width="70" height="75">  

    FileReader还有一些其他用法

    <html>  
      <head>  
      <meta http-equiv="content-type" content="text/html; charset=utf-8">  
      <meta name="author" content="oscar999">  
      <title></title>  
      <script>  
      function  handleFiles(files)  
      {  
        if(files.length)  
        {  
           var file = files[0];  
           var reader = new FileReader();  
           reader.onload = function()  
           {  
               document.getElementById("filecontent").innerHTML = this.result;  
           };  
           reader.readAsText(file);   //作为字符串读出
            //reader.readAsText(file,'gb2312');   //默认是用utf-8格式输出的,想指定输出格式就再添加一个参数,像txt的ANSI格式只能用国标才能显示出来
        }  
      }  
      </script>  
        
      </head>  
      <body>  
      
      <input type="file" id="file" onchange="handleFiles(this.files)"/>  
      <div id="filecontent"></div>  
      </body>  
    </html>  

    readAsText一般只能读取txt,html等等文件,局限性较大,比如想要前端读excel文件,由于解决文件编码问题较为复杂,需要用到js-xlsx插件,具体可百度方法。

    常用API:

    FileReader.readAsDataURL(File) //转换成base64格式

    FileReader.readAsText() //转换成字符串格式

    FileReader.readAsArrayBuffer(File) //转换成ArrayBuffer格式

    FileReader.readAsBinaryString(File) //转换成原始二进制格式(貌似已被废除)

    FileReader.onload = function (e) { console.log(e.target.result) } //在上述读取事件完成时触发

     

    二.文件拖拽的方法保存文件

     

    关于文件拖拽下面有注释,我主要说一下怎么给用js给input赋值,而不是手动去选文件

    因为拖拽的区域只是一个div,无法进行上传操作,所以需要加一个form和input,让拖拽进去的文件进入input中。

    取出files后,用$("#file1")[0].files=files;将文件赋值给input,注意赋值的必须是fileList对象,不要试图只放进去一个文件,fileList只读。

    然后用h5中的FormData将form转化,提交即可

    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            .container{
                width:300px;height: 300px;
                border:2px dashed #ddd;
                text-align: center;
                padding:50px;
            }
        </style>
        <title>
            培训活动列表
        </title>
    </head>
    <body>
    <div class="container">
        拖拽进入
    </div>
    <form id="form1" method="post" enctype="multipart/form-data">
        <input type="file" name="file1" id="file1" value="" />
    </form>
    <script type="text/javascript">
        $('.container').bind('dragenter dragover', ignoreDrag);
        $(".container").on({drop:function(e){
            var flag=true;
            e.preventDefault();
            //jquery的file要去e.originalEvent里面拿,拖拽获取files的方式与input的不同
            var files = e.originalEvent.dataTransfer.files;
            //var files = e.dataTransfer.files;  原生的话这样就可以获取
            for(var i=0;i<files.length;i++){
                myFileReader(files[i],function(result,file){
                    if(result){
                        //文件
                        console.log(file.name)
    
                    }else{
                        //文件夹
                        console.log("不要上传文件夹")
                        flag=false;
                    }
                });
            }
            if(flag){
                $("#file1")[0].files=files;   //关键:将取到的文件赋值给input,用于ajax提交文件!!!
                var formData = new FormData($("#form1")[0]);     
                $.ajax({
                    url : "/it/orderManage/saveActivity",
                    type : 'POST',
                    data : formData,
                    // 告诉jQuery不要去处理发送的数据
                    processData : false,
                    // 告诉jQuery不要去设置Content-Type请求头
                    contentType : false,
                    async : true,
                    success : function(ret) {
                        //alert("上传成功")
                        if(ret){
                            $("#trainInfoModal").modal("hide");
                            layer.alert("保存成功")
                            $('#orderTable').bootstrapTable("refresh");
                            $("#trainInfoModal input").val("");
                            $("#trainInfoModal textarea").val("");
    
                        }
                    }
                });
            }
            console.log(files);
        }})
    
        function ignoreDrag(e) {e.originalEvent.stopPropagation();
            e.originalEvent.preventDefault();
        }
    
        function myFileReader(file, callback){
            if(!window.FileReader){
                callback(true,file);
                return false;
            }
            var fr = new FileReader();
            fr.readAsDataURL(file);
            fr.onload=function(e){
                callback(true,file);
            }
            fr.onerror=function(e){  //不好判断是否是文件夹,通过上传报错可以判断是文件夹
                callback(false,file);
            }
            return true;
        };
    </script>
    </body>
    </html>

    后台获取文件还是用MutipartFile[]接收

    public String saveActivity(@RequestParam HashMap<String, String> param,
                                   //@RequestParam(value = "banner") MultipartFile[] files,
                                   @RequestParam(value = "file1") MultipartFile[] file1,
                                   HttpServletRequest request,
                                   String fileNames,
                                   String TID, HttpServletRequest req) {


    三.vue+axios 上传文件

    无论ajax还是axios,都不是直接用表单提交的,都是 要用 new FormData()转化一下。

    所以axios方法与ajax方法类似

    <input type="file" class="inputBtn"  @change="uploadMarketingForm">
    uploadMarketingForm(e){
    	console.log(e)
    	var fileName=e.target.files[0].name; //文件名
    	var fileSize=e.target.files[0].size; //文件大小
    	var param = new FormData();
            //添加表单参数,如果后台用文件数组接收
            //param.append("file", e.target.files);
            //如果后台只接收单一文件
    	param.append("file", e.target.files[0]);
            //设置表头类型
    	const config = {
    		headers: { "Content-Type": "multipart/form-data" }
    	};
    	this.axios.post("/.../uploadTest", param, config).then(res => {
    		console.log(res);
    	});
    },
    

    在java spring mvc中还是这么接收

    @ResponseBody
    @RequestMapping(value = "uploadTest", produces = "text/plain;charset=UTF-8")
    public String uploadTest(@RequestParam Map<String,String> param,@RequestParam(value = "file") MultipartFile[] file1,
                             HttpServletRequest request) throws IOException {
        RetBase retBase = new RetBase();
        //文件可以在参数中用MultipartFile[](多文件) 或者 MultipartFile (单一文件)接收
        //也可以像这样在request中接收
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
        MultipartFile multifile = multipartRequest.getFile("file"); // 通过参数名获取指定文件
        String fileName = multifile.getOriginalFilename();
        // 获取文件后缀
        String prefix=fileName.substring(fileName.lastIndexOf("."));
        // 用uuid作为文件名,防止生成的临时文件重复
        final File file = File.createTempFile(UUID.randomUUID().toString(), prefix);
        // MultipartFile to File
        return JSON.toJSONString(retBase, SerializerFeature.WriteMapNullValue);
    }

     

     

     

     

    展开全文
  • <input type='text' id='keyword' placeholder="请输入用户名\职位\公司" style="display:inline" data-inline='true' /> <input type='button' id='btnok' value='搜索' data-inline='true' style="display:...
  • html input type=file

    千次阅读 2018-03-14 09:56:44
    一、 input type=file与文件上传本文所说的input type=file指的是type类型是file的input元素,最简HTML代码如下:&lt;input type=file&gt;但是,为了习惯,我们多写成:&lt;input type="file"...


    一、 input type=file与文件上传

    本文所说的input type=file指的是type类型是fileinput元素,最简HTML代码如下:

    <input type=file>

    但是,为了习惯,我们多写成:

    <input type="file">

    在HTML5出现之前(XHTML),我们的闭合规则则有些出入:

    <input type="file" />

    顾名思义,选择文件,并上传文件。

    在万恶的旧时代,HTML5还没有出现之前,原生的file input表单元素只能让我们一次上传一张图片。无法满足一次上传多图的交互需求,所以,很多场景,就被swfupload.js给取代了,有点逐渐淡出人们视野的感觉。

    然,技术发展,日新月异,三十年河东,三十年河西。随着原生HTML5表单对多图(multiple属性)、上传前预览,二进制上传等支持越来越广泛,原生的file input表单元素又迎来了新的升级,flash为背景的swfupload.js注定要落寞。

    但是,对于PC项目,IE8-IE9浏览器还是不能忽略的。所以,现在,很流行的一种处理方式,就是HTML5 file上传和flash swfupload上传一起整合的模式,优先使用原生HTML5上传,不支持的,使用flash上传。我之前有篇关于HTML5上传的文章,每天访问量很高的:“基于HTML5的可预览多图片Ajax上传”,大家有兴趣可以看看。

    二、input上传与表单form元素

    如果想使用浏览器原生特性实现文件上传(如图片)效果,父级的form元素有个东西不能丢,就是:

    enctype="multipart/form-data"

    enctype属性规定在发送到服务器之前应该如何对表单数据进行编码,默认的编码是:”application/x-www-form-urlencoded“。对于普通数据是挺适用的,但是,对于文件,科科,就不能乱编码了,该什么就是什么,只能使用multipart/form-data作为enctype属性值。

    无论是旧时代的单图上传,还是HTML5中的多图上传,均是如此。

    三、file input图片上传前预览与Ajax上传

    文件,尤其图片,上场前能够预览,是很棒的交互体验。不走服务器,不耗费流量,多棒!

    理想虽好,实现起来……

    在HTML5还没出现的旧时代,只有低版本的IE浏览器貌似有方法,使用私有的滤镜,超越安全的限制(其实是利用了不好的东西),实现图片直接预览;但是呢,那个时候,Chrome, FireFox没有这一出,于是,想要使用原生file input实现图片的上传前预览,兼容性坎很难跨过去。

    但是,后来,HTML5来了,我们出现了转机,IE10+以及其他现代浏览器,可以让我们直接读取图片的数据,然后在页面上呈现,实现了上传前预览;加上之前老IE的滤镜策略,貌似,可行。但是呢但是,老的IE浏览器只能最多一次选择一个文件,因此,只有单图上传的时候,大家可以考虑考虑。

    传统的form提交,是要改变页面流的,也就是刷新后跳转。好的体验应该是走Ajax交互的。HTML5里面支持二进制formData数据提交,因此,可以从容Ajax提交上传的文件数据;那老旧的IE浏览器怎么办?

    一般方法如下:

    1. form元素新增target属性,其值指向页面内隐藏的一个<iframe>元素的id, 如下示意:
      <form action="" method="post" enctype="multipart/form-data" target="uploadIframe"><
      <iframe id="uploadIframe"></iframe>  
    2. 处理<iframe>元素的onload事件,获得返回内容(如下代码示意),具体细节非本文重点,不表。
      var doc = iframe.contentDocument ? iframe.contentDocument : frames[iframe.id].document;
      var response = doc.body && doc.body.innerHTML;

    OK, 当然,你也可以不用像上面这么麻烦,直接使用jquery.form.js. 原理呢,就是上面这样,但是,不需要这么麻烦。

    四、file input大小、按钮文字等UI自定义

    原生的file input不收待见的另外一个原因是:长的丑还不好控制。

    举个例子,下图这个“选择文件”这几个文字,我们就不好对file控件动刀子实现自定义:
    file input框

    怎么办呢?

    有一种方法是这样的:
    让file类型的元素透明度0,覆盖在我们好看的按钮上。然后我们去点击好看的按钮,实际上点击是是file元素。

    然而,此方法有一些不足:

    1. 尺寸控制不灵活。CSS width属性有些浏览器不管用,需要使用size,然后高度控制也不精准,我们很难正好覆盖在好看的自定义按钮上。
    2. 样式不好控制,按钮的hover态以及active态不好处理。
    3. HTML结构限制以及定位成本。

    更好的方法是,使用label元素与file控件关联,好处在于:

    1. 点击自定义的漂亮按钮就是点击我们file控件;
    2. 没有尺寸控制不精确的问题;
    3. 没有不能响应hover态active态的问题;
    4. 我们的漂亮按钮甚至可以在form表单元素的外面,例如:
      <label class="ui_button ui_button_primary" for="xFile">上传文件</label>
      <form><input type="file" id="xFile" style="position:absolute;clip:rect(0 0 0 0);"></form>

      效果如下(真实实时效果):

      上传文件

    五、file类型控件的accept属性

    input file类型控件有一个属性,名为accept, 可能有些小伙伴不太了解。可以用来指定浏览器接受的文件类型,也就是的那个我们打开系统的选择文件弹框的时候,默认界面中呈现的文件类型。例如:accept="image/jpeg",则界面中只有jpg图片,如下截图,同时,窗体右下方是“自定义文件”按钮:
    自定义文件

    实际开发的时候,很少只允许传jpg图片,应该都是只能传图片类型,此时,可以使用:

    accept="image/*"

    于是乎,“自定义文件”按钮变成了语义更明确的“图片文件”:
    图片文件

    但是,需要注意的是,虽然使用accept="image/*"很方便,但是在Chrome浏览器下,可能会有文件选择窗口打开非常慢点问题,因此,如果仅仅是上传图片,建议使用:

    accept="image/png, image/jpeg, image/gif, image/jpg"

    accept属性值其实是MIME类型, 例如下面几个可能常用的:

    accept="application/pdf"
    accept="audio/x-mpeg"
    accept="text/html"
    .accept="video/x-mpeg2"

    然后,多个属性值使用逗号分隔,例如:

    <input accept="audio/*,video/*,image/*">

    六、input file只选择文件夹而不是文件

    试试下面的代码,测试了下,Chrome浏览器下是可以的,Firefox浏览器下也是可以的,IE貌似还不行。

    <input type="file" webkitdirectory directory multiple/>

    七、input file值的清除

    现代浏览器直接value = "", 有些IE浏览器貌似不行,好像使用file.outerHTML = file.outerHTML,我自己没测试。

    不过我觉得比较麻烦,还要判断浏览器什么的。像本文的Ajax单图上传,直接form.reset()就可以了。

    以上~

    展开全文
  • input type=“date“ 赋值默认当天日期

    万次阅读 2019-04-01 14:37:40
    1.背景:使用jqueryweui的input type="date" 时本来想默认展示提示用户选择时间,由于在h5中不支持placeholder属性,因此经过 沟通时间默认显示当天日期 2.html部分:<input class="weui-input" type="date" id=...
  • 修改 input type=file 的样式的最简单方法

    万次阅读 多人点赞 2018-07-01 22:42:39
    input type="file"&gt;的样式是很难修改的,事实上也是,bootstrap也没用对其有什么美化,但是那么丑,要怎么修改呢? 其实很简单!!!很多人都想复杂了。 先卖个关子,有些人是这么做的,另外写一...
  • input type="file"获取文件名方法

    万次阅读 2019-09-24 18:58:48
    传统文件上传比较丑,样式调整时会有一个获取文件名,或者包含文件路径的文件名的方法 <div class="file-box"> <form id="uploadForm"> <input type="text" id="textfield" ...input type="...
  • React中input type=file, 时,onChange事件不触发问题当选择图片相同的时候,不会触发onchange事件, 当选择图片相同的时候,不会触发onchange事件, 最近在做react项目时发现的问题,代码如下 // An highlighted ...
  • input type=number 去掉箭头

    千次阅读 2018-11-07 15:56:06
    input type="number" ...&gt; &lt;style&gt; input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type="number"]{ ...
  • 自定义input type=”radio”样式

    千次阅读 2017-12-28 09:15:31
    input type="radio" name="sex" value="man" id="man" checked> label for="man">男label> input type="radio" name="sex" value="female" id="female"> label for="female">女label> label{ position: rel
  • 获取input type=file的文件路径

    千次阅读 2018-01-25 11:59:44
    获取input type=file的文件路径
  • 如何限制 input type=text 只能接受数字

    万次阅读 2017-10-10 10:40:46
    input type='text' onkeyup="this.value=this.value.replace(/[^0-9]+/,'');" />/只能输入非负整数 <input type='text' onkeyup="this.value=this.value.replace(/[^0-9-]+/,'');" />只能输入整数 ...
  • 记录下解决的问题:用js判断 input type="file"上传文件是否为空,若为空或者上传的文件内容为空,则给出提示。 参考链接: jquery判断 input type="file"上传文件是否为空(files属性), 用form表单input type=...
  • input type="search" 实现搜索框。

    千次阅读 2019-03-11 08:53:36
    input type=text并不能达到这种效果,google了一下,html5 增加的type=search可以做到(但需要input type=search外面包上一层带action属性的form)。 &lt;div class="search-input-wrap clearfix"&...
  • 自定义input type=checkbox

    千次阅读 2018-11-06 10:23:42
    一个比较常见的需求,自定义checkbox那个箭头的样式 核心思想是用一个lable和checkbox绑定,将css加到label上,然后隐藏原来的...input type="checkbox" id="test"&gt; &lt;label fo...
  • input type=number禁止输入小数

    万次阅读 2017-10-09 22:37:55
    最近做一个项目需求是输入框只能输入数字,并且禁止输入小数 intpu type=number 就可以控制只允许输入数字,但是不能控制输入小数 在网上查阅相关资料后整理了下 ... <title>input type=number 禁止输入小数点</tit
  • vue input type=file 获取文件本地路径

    万次阅读 2018-06-02 22:55:29
    input type=&quot;file&quot; :id=&quot;id&quot; name=&quot;image&quot; class=&quot;getImgUrl_file&quot; @change=&quot;preview($event)&quot;&amp;gt; srcipt ...
  • h5 input type=file 设置

    千次阅读 2018-09-15 17:36:11
    input type=file 设置accept属性可以限定上传的文件 比如我需要上传图片 accept="image/*" 因为input的css样式肯定是不符合开发中需要的 修改样式又比较麻烦 会需要把输入框隐藏 然后点击别的按钮...
  • input type=number 输入11位手机号写法

    千次阅读 2020-10-14 16:26:10
    <input type="number" oninput="if(value.length>11)value=value.slice(0,11)" name="mobile" id="mobile" value="" maxlength="11" required />
  • 使用input type=file标签进行文件上传时,在安卓手机中的微信浏览器中不能调起相机,但是在苹果手机中的微信浏览器中可以调用相机。解决办法很简单, input type="file" name="upload" onchange="onChooseFile...
  • input type="file">配合使用。它规定能够通过文件上传进行提交的文件类型。 如果不限制视频的格式,可以写为:accept="video/*" html代码 <input type="file" id="file" name="file" onchange="videoPreview...
  • input type="date" 提示不显示

    千次阅读 2018-08-30 15:07:41
    input[type=&quot;date&quot;]:before{ color:#A9A9A9;content:attr(placeholder); } input[type=&quot;date&quot;].full:before { color:black;content:&quot;&quot;!important; } ...
  • input type=‘file’设置可以多选文件

    千次阅读 2019-11-05 15:40:23
    很简单,加上multiple属性即可 <input type="file" multiple >
  • 监听input type=file 文件上传取消事件

    万次阅读 2019-05-28 19:36:50
    在做项目的时候,需要根据是否上传图片,进而判断页面变化。通过查阅相关资料,发现chane事件...input type="file" id="batchUpload" name="files" accept="image/jpg, image/gif,image/png, image/jpeg" multi...
  • input type=file 去除输入框效果

    千次阅读 2018-08-23 19:33:03
    input type=“file”&gt;输入框中做到去除输入框效果 在我平时修改页面的时候,由于需要用到上传文件这一功能的时候,需要用到 &lt;input type="file"&gt;,但是效果却不尽人意。 此时...
  • input type="button" 和button区别

    千次阅读 2018-05-16 16:19:20
    来源: ...input type=”button” /&gt; 这就是一个按钮。如果你不写javascript 的话,按下去什么也不会发生。2、 &lt;input type=”submit” /&gt;这样的按钮用户点击之后会自动提交 f...
  • 不显示input type="file" 的默认样式

    千次阅读 2018-06-13 11:41:55
    type=”file”的输入框设置为透明,并且定位位置为指定样式输入框的位置,class=”input”设置的宽度为380px,margin-left: -380px使得刚好覆盖在class=”input”上 &lt;input type="text" ...
  • el-input type="number" oninput="if(value.length>10)value=value.slice(0,10)" @keyup.enter.native="query()" :max="99999999"> </el-input> oninput 是个自定义事件 在事件里面获取输入的数字...
  • 去掉input type=number时默认控件的方法

    千次阅读 2018-03-05 11:43:09
    input type="number" /&gt;&lt;br&gt;&lt;br&gt; 处理:&lt;input type="number" class="deal" /&gt;CSS代码:.deal::-webkit-textfield-decoration-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,591,022
精华内容 636,408
关键字:

inputtype=