我实施的电子邮件附件功能正常。 但是当我点击附加更多按钮时,我会继续显示浏览按钮。哪个不好。 最初,我显示浏览按钮,但是当我点击附加更多按钮时,我不想再次显示浏览按钮,而是应该自动弹出要选择的文件。
我该怎么做?请参阅图片附件。
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 += ' <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>