bootstrap-filestyle使用与上传失败内容清除

最新推荐文章于 2026-09-17 14:03:06 发布

转载最新推荐文章于 2026-09-17 14:03:06 发布 · 3.7k 阅读

收录于

编码

bootstrap-filestyle使用与上传失败内容清除：

bootstrap文件上传插件：

 http://markusslima.github.io/bootstrap-filestyle/

使用方法：

简要教程

jquery-filestyle是一款可以简单实用的表单文件上传域美化jQuery插件。该插件可以将表单的文件上传域转换为类似Bootstrap按钮组的样式。它提供了大量的data属性来控制文件上传域的样式，可以自定义按钮文本和图标等。

使用方法

使用该表单文件上传域美化插件需要引入jquery，jquery-filestyle.min.css和jquery-filestyle.min.js文件。

 
   
         <
         link 
         href
         =
         "css/jquery-filestyle.min.css"
         >
        

         <
         script 
         src
         =
         "js/jquery.js"
         ></
         script
         >
        

         <
         script 
         src
         =
         "js/jquery-filestyle.min.js"
         ></
         script
         >               
        
 
  

HTML结构

最简单的使用方法是在<input>元素中使用data属性来直接转换文件上传域。

 
   
         <
         input 
         type
         =
         "file" 
         class
         =
         "jfilestyle" 
         data-theme
         =
         "blue" 
         data-input
         =
         "false"
         >       
        
 
  

应用举例

将input元素进行转换

将一个普通的<input>元素进行美化。

javascript方法：

 
         $(
         ":file"
         ).jfilestyle({input: 
         false
         });

通过data属性：

 
   
         <
         input 
         type
         =
         "file" 
         class
         =
         "jfilestyle" 
         data-input
         =
         "false"
         >              
        
 
  

按钮文本

改变按钮上的文本。默认值为："Choose file"。

javascript方法：

 
         $(
         ":file"
         ).jfilestyle({buttonText: 
         "查找文件"
         });

通过data属性：

 
   
         <
         input 
         type
         =
         "file" 
         class
         =
         "jfilestyle" 
         data-buttonText
         =
         "查找文件"
         >              
        
 
  

禁用状态

设置文件选择为禁用状态。

javascript方法：

 
         $(
         ":file"
         ).jfilestyle({disabled: 
         true
         });

通过data属性：

 
   
         <
         input 
         type
         =
         "file" 
         class
         =
         "jfilestyle" 
         data-disabled
         =
         "true"
         >              
        
 
  

禁用状态

选择文件按钮在输入框的前面。

javascript方法：

 
         $(
         ":file"
         ).jfilestyle({buttonBefore: 
         true
         });

通过data属性：

 
   
         <
         input 
         type
         =
         "file" 
         class
         =
         "jfilestyle" 
         data-buttonBefore
         =
         "true"
         >              
        
 
  

输入框的尺寸

设置文件选择域的尺寸。使用CSS测量单位，默认值为200px。

javascript方法：

 
         $(
         ":file"
         ).jfilestyle({inputSize: 
         "350px"
         });

通过data属性：

 
   
         <
         input 
         type
         =
         "file" 
         class
         =
         "jfilestyle" 
         data-inputSize
         =
         "400px"
         >              
        
 
  

文本占位

设置输入框的文本占位。

javascript方法：

 
         $(
         ":file"
         ).jfilestyle({placeholder: 
         "My place holder"
         });

通过data属性：

 
   
         <
         input 
         type
         =
         "file" 
         class
         =
         "jfilestyle" 
         data-placeholder
         =
         "文本占位字符"
         >              
        
 
  

使用图标

javascript方法：

 
         $(
         ":file"
         ).jfilestyle({buttonText: 
         "<span class=‘glyphicon glyphicon-folder-open‘></span>"
         });

通过data属性：

 
   
         <
         input 
         type
         =
         "file" 
         class
         =
         "jfilestyle" 
         data-buttonText="<span 
         class
         =
         ‘glyphicon glyphicon-folder-open‘
         ></
         span
         >">             
        
 
  

方法

clear：清空选择的文件。

$( ":file" ).jfilestyle( ‘clear‘ );
destroy：销毁对象实例。

$( ":file" ).jfilestyle( ‘destroy‘ );

input：设置或获取输入域的内容。

 
           // 获取
          
           $(
           ":file"
           ).jfilestyle(
           ‘input‘
           );
          
           // 设置
          
           $(
           ":file"
           ).jfilestyle({
           ‘input‘
           : 
           false
           });

buttonText：设置或获取按钮上的文本。

 
           // 获取
          
           $(
           ":file"
           ).jfilestyle(
           ‘buttonText‘
           );
          
           // 设置
          
           $(
           ":file"
           ).jfilestyle({
           ‘buttonText‘
           : 
           ‘My text‘
           });

disabled：设置按钮为不可用或获取按钮状态是否为不可用。

 
           // 获取
          
           $(
           ":file"
           ).jfilestyle(
           ‘disabled‘
           );
          
           // 设置
          
           $(
           ":file"
           ).jfilestyle({
           ‘disabled‘
           : 
           true
           });

buttonBefore：设置按钮在输入框前面或获取按钮的位置。

 
           // 获取
          
           $(
           ":file"
           ).jfilestyle(
           ‘buttonBefore‘
           );
          
           // 设置
          
           $(
           ":file"
           ).jfilestyle({
           ‘buttonBefore‘
           : 
           true
           });

inputSize：设置或获取输入框的尺寸。

 
           // 获取
          
           $(
           ":file"
           ).jfilestyle(
           ‘inputSize‘
           );
          
           // 设置
          
           $(
           ":file"
           ).jfilestyle({
           ‘inputSize‘
           : 
           ‘400px‘
           });

placeholder：设置或获取占位文本。

 
           // 获取
          
           $(
           ":file"
           ).jfilestyle(
           ‘placeholder‘
           );
          
           // 设置
          
           $(
           ":file"
           ).jfilestyle({
           ‘placeholder‘
           : 
           ‘My text placeholder‘
           });