Question

我正在开发一个使用bootstrap文件输入更新图片的过程，一切正常但我无法在过程完成后更改输入文件的标题。

对于那些不知道bootstrap文件输入的人，当选择该文件时，该文件的名称将采用输入文件的标题。

我试试：

$("#userPicture").prop('title', 'Select picture...');

和

$("#userPicture").attr('title', 'Select picture...');

但两者都不起作用。

这是容器：

<form method="post" id="fileinfo" name="fileinfo" class="form-horizontal" onsubmit="return submitForm();" role="form">
    <input type="file" id="userPicture" name="userPicture" title="Select picture..." class="btn btn-primary  btn-xs" data-filename-placement="inside"><br><br>
    <div style="display:inline-block;">
        <button type="button" class="btn btn-success btn-block btn-xs" style="width:80px;" id="pictureSave">Save</button>
    </div>
    <div style="display:inline-block;">
        <div id='loadingmessage' style="font-family: 'Open Sans', sans-serif;font-size:12px;display:none" align="center">&nbsp;&nbsp;<img src="img/loader.gif"></div>
    </div>
</form>

这是功能：

$(document).on('click','#pictureSave',function() {
    var studentPicture = $("#userPicture").val();
    var studentId = $("#studentId").val();
    if (studentPicture === "") {
        $("#pictureResponse").html('<p class="text-danger">You must to select a picture.</p>');
    } else {        
        $('#loadingmessage').show();
        var fd = new FormData(document.getElementById("fileinfo"));
        fd.append("action", "changeStudentPicture");
        fd.append("studentId", studentId);
        $.ajax({
          url: "content/studentsAction.php",
          type: "POST",
          data: fd,
          enctype: 'multipart/form-data',
          processData: false,
          contentType: false
        }).done(function(data) {
            if (data != "Successful") {
                $('#loadingmessage').hide();
                $("#pictureResponse").html('<p class="text-danger">'+data+'</p>');
            } else {
                $('#loadingmessage').hide();
                $("#userPicture").prop('title', 'Select picture...'); //Here is the issue
                $("#pictureResponse").html('<p class="text-success">The picture was updated successfully.</p>');
            }
        }); 
    }
});

为了您的信息，我找到了分析 bootstrap.file-input.js

的解决方案

$(".file-input-wrapper input[type=file]").siblings('span').html('Select picture');

Answer 1

这可能看起来像是一个愚蠢的答案，但您尝试过简单JavaScript吗？

document.querySelector("#userPicture").setAttribute( "title" , "Select picture.." );

无论如何，抱歉，如果它不起作用：）

Answer 2

上传文件后检查html代码。很可能它不是你必须替换的title属性，而是使用jQuery的innerHTML（或html（＆＃34;＆＃34;））。

样品：

<div class="file-caption-name" title="DOC_TITLE.docx"><span class="glyphicon glyphicon-file kv-caption-icon"></span>DOC_TITLE.docx</div>

查看哪里有重复的＆＃39; DOC_TITLE.docx＆＃39;在</span>之后？

那是你要替换的部分。在你的js中以下列方式做到这一点：

$('.file-caption-name').html("<span class="glyphicon glyphicon-file kv-caption-icon"></span>Whatever caption you want.docx");

使用带有jquery的引导程序文件输入更改输入文件标题

2 个答案: