如何隐藏jQuery电子邮件附加更多按钮

时间:2015-04-02 11:19:06

标签: javascript jquery html

我实施的电子邮件附件功能正常。 但是当我点击附加更多按钮时,我会继续显示浏览按钮。哪个不好。 最初,我显示浏览按钮,但是当我点击附加更多按钮时,我不想再次显示浏览按钮,而是应该自动弹出要选择的文件。

我该怎么做?请参阅图片附件。

html代码

<div class="col-sm-10">
              <div class="element">
                <label>Attachment</label>
                <span class="upload_file_button"><input type="file" name="upload_file1" id="upload_file1"/></span>
                </div>
                <div id="moreImageUpload"></div>
                <div id="moreImageUploadLink" style="display:none;margin-left: 10px;">
                <a href="javascript:void(0);" id="attachMore" class="fa fa-plus"> Attach More</a>
                </div>
            </div>
          </div>
        </div>

jquery / javascript

<script type="text/javascript">
// onclick browse button attach the file id and show the attachmore link

$(document).ready(function() {
  $("input[id^='upload_file']").each(function() {
  var id = parseInt(this.id.replace("upload_file", ""));
  $("#upload_file" + id).change(function() { 
   if ($("#upload_file" + id).val() != "") {
   $("#moreImageUploadLink").show();
   }
  });
});
var upload_number = 2;
$('#attachMore').click(function() {
//add more file. Everytime clicking on attachmore link show the browse button also attach more as well.
var moreUploadTag = ''
 moreUploadTag += '<div class="element"><label for="upload_file"' + upload_number + '>Upload File ' + upload_number + '</label>';
 moreUploadTag += '<span class="upload_file_button"><input type="file" id="upload_file' + upload_number + '" name="upload_file' + upload_number + '"/></span>';
 moreUploadTag += '&nbsp;<a href="javascript:del_file(' + upload_number + ')" style="cursor:pointer;" onclick="return confirm(\"Are you really want to delete ?\")">Delete ' + upload_number + '</a></div>';
 $('<dl id="delete_file' + upload_number + '">' + moreUploadTag + '</dl>').fadeIn('slow').appendTo('#moreImageUpload');
 upload_number++;
 });
});

function del_file(eleId) {
 var ele = document.getElementById("delete_file" + eleId);
 ele.parentNode.removeChild(ele);
}
</script>

enter image description here

0 个答案:

没有答案