Question

我有一个表格，其中包含一行浏览按钮和文本框。

如果单击“浏览”按钮并选择一个文件，它将显示除浏览按钮之外的文件路径，但我想用所选文件路径替换浏览按钮。

任何人都可以解决这个问题吗？

 <html>
 <head>

   <script type="text/javascript" 
   src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4 /jquery.min.js"></script>
   <script type="text/javascript">
   $(document).ready(function () {
   $('#btnAdd').click(function () {
    $clone_row = $('#FirstRow').clone(true);
    $clone_row.appendTo('#listfiles');
    var row_len = $('#listfiles tr').length;
    var file_name = 'File ' + row_len + ':';
    $clone_row.find('span.file_name').text(file_name);

   });
   });

   function deleteRow(btn) {
    $(btn).parent().parent().remove();
  $('#listfiles tr').each(function (i) {
    var index = i + 1;
    $('td:first .file_name', this).text('File ' + index + ':');
   })
 }
   </script>
  </head>

  <body>
 <table id="listfiles">
 <tr id="FirstRow">
    <td>    <span class="file_name">File 1:</span>

        <input type="file" name="filename" id="filename" value="xyz" />Description:
        <input type="text" name="description" id="filename" value="" />
        <a href="#" onclick="deleteRow(this);">DeleteFile</a>

    </td>

 </tr>
 </table> <a href="#" id="btnAdd">Add additional file</a> 
</body>
 </html>

Answer 1

喜欢这个？注意我必须更改为更高版本的jQuery - 您也可能想要删除伪路径，并且必须更改ID以使它们是唯一的

Live Demo

$(function () {
  var $firstRow = $(".Row").first().clone(true);
  $('#btnAdd').click(function () {
    $clone_row = $firstRow.clone(true);
    $clone_row.find("input").val("");
    $clone_row.appendTo('#listfiles');
    var row_len = $('#listfiles tr').length;
    var file_name = 'File ' + row_len + ':';
    $clone_row.find('span.file_name').text(file_name);

});
$(".fileUpload").on("change",function() {
    $(this).hide();
    $(this).after($(this).val())
});

如何用jsp中的选定文件路径替换浏览按钮？

1 个答案: