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

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: '选择文件'
 });