如果文件名跨度已填充，如何向外部div添加類

如何向'span class =「btn」'添加類，以便在文件成功上傳時改變顏色用戶。到目前爲止，我有以下代碼;如果文件名跨度已填充，如何向外部div添加類

<div class="fileinput fileinput-new" data-provides="fileinput"> 
    <span class="btn btn-default btn-file"><span>Browse</span> 
    <input type="file" class="file1" /> 
    </span> 
    <span class="fileinput-filename1"></span><span class="fileinput-new">No file chosen</span> 
</div>

然後我的腳本來更新文件名跨度爲如下

  $(".file1").on('change', function() { 
       var fileName = $(this).val(); 
       $(".fileinput-filename1").html(fileName); 
      });

來源

2016-09-22 Al-76

當文件名被更新，你可以使用jQuery一個新類添加到該按鈕

$('.btn').addClass('success');

來源

2016-09-22 09:16:48

您可以使用btn類作爲跨度，但也可以使用文本或標籤來達到此目的。 <span id="upload" class="label label-success">

所以，你可以<span id="upload" class="label"> ，只需加載標籤成功與jquery，如果加載是好的。（您必須使用Ajax獲得服務器OK或KO響應，並且如果確定更改爲標籤成功，否則將其更改爲標籤的危險。

//check if upload is ok 
$('#upload').addClass('label-success'); 
$('#upload').empty(); 
$('#upload').text('Success'); 
//else 
$('#upload').addClass('label-danger'); 
$('#upload').empty(); 
$('#upload').text('Failed');

這是你想要的嗎？

來源

2016-09-22 09:17:03 JoelBonetR

我還需要將文本「瀏覽」更改爲「成功」以及按鈕。 –

$（'＃upload'）。empty（）; $（'＃upload'）。text（'Success'）; – JoelBonetR

由於避免可能的錯誤而首先設置爲空 – JoelBonetR

目前，直到表單被提交後纔會上傳文件，所以其他答案將不起作用。一種可能的解決方案是在用戶瀏覽文件時通過ajax上傳文件，然後在成功時更改span類。

$(".file1").on('change', function() { 
    var fileName = $(this).val(); 
    $(".fileinput-filename1").html(fileName); 

    $.ajax({ 
     type: "POST", 
     url: "<form url goes here>", 
     enctype: 'multipart/form-data', 
     data: { 
      file: filename 
     }, 
     success: function() { 
      $('.fileinput-filename1').addClass('label-success'); 
     } 
    }); 
});

來源

2016-09-22 09:23:25

先給你的範圍標識以刪除其他問題，然後之後在文件上傳成功只需添加具有屬性更改顏色的類，在您的範圍內由jquery代碼

$（'＃div-to-add-class'）。addClaas（'your-class-名稱'）;

來源

2016-09-22 09:27:42

如果文件名跨度已填充，如何向外部div添加類

回答

相關問題