当前位置: 首页 > 工具软件 > Filestyle > 使用案例 >

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

周玺
2023-12-01

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‘ });


解决上传失败后内容不清空的问题:

.bootstrap-filestyle为插件解析后的样式类

$(".bootstrap-filestyle").remove();

重新初始化
 $('#testCase').filestyle({
 size: "sm",
 buttonText: '选择文件'
 });



 类似资料: