我已经自定义了设计上传文件输入,使其在所有浏览器中看起来都一样。现在我想通过单击添加另一个文件链接来一个一个地添加 10 个上传文件输入。这 10 个上传文件在设计上应该与自定义的上传文件输入相同。
我还希望有一个清晰的链接,这样如果用户点击清除,如果上传文件输入中有任何文本,文本应该会变得清晰。
并且我们也可以清除这10个上传文件。
就像我可以同时添加和清除上传文件。
我能在这方面得到任何帮助吗?
这是我的代码:
<script language="JavaScript">
function validate_fileext() {
var check = true;
var error_msg = "Only PDF, JPG, JPEG, HTML, HTM and TIF accepted, please try again.";
for (var j = 0; j <=upload_number; j++) {
if (document.getElementById("attachment"+j) != null) {
var file = document.getElementById("attachment" + j).value.toLowerCase();
if (file != "" && !(file.lastIndexOf(".pdf") > 0 || file.lastIndexOf(".jpg") > 0 || file.lastIndexOf(".jpeg") > 0 ||
file.lastIndexOf(".htm") > 0 || file.lastIndexOf(".html") > 0 || file.lastIndexOf(".tif") > 0)) {
check = false;
document.getElementById("static_error_message").innerHTML = 'Error : Only PDF, JPG, JPEG, HTML, HTM and TIF accepted as attachment(s).';
document.getElementById("attachment" + j).focus();
break;
}
}
}
return check;
}
function togglePOAttachment(){
if (document.forms["frm_payment"].opt_payment[0].checked){
document.getElementById("attachment0").disabled = false;
document.getElementById("link_clear").setAttribute("href","javascript:resetFileContent();")
document.getElementById("link_clear").disabled = false;
document.getElementById('moreUploadsLink').style.visibility = 'visible';
}else if (document.forms["frm_payment"].opt_payment[1].checked) {
for (var j = 1; j < upload_number; j++) {
reSetPOAttachments("f"+j);
}
upload_number = 1;
resetFileContent();
document.getElementById('moreUploadsLink').style.visibility = 'hidden';
document.getElementById("attachment0").disabled = true;
document.getElementById("link_clear").disabled = true;
document.getElementById("link_clear").removeAttribute("href");
}
}
function resetFileContent(){
document.getElementById("static_attachment").innerHTML = '<input type="file" name="attachment0" id="attachment0" onchange="document.getElementById(\'moreUploadsLink\').style.display = \'block\';" /><a id="link_clear" href="javascript:resetFileContent();">Clear</a> ';
}
function reSetPOAttachments(i){
var elm = document.getElementById(i);
document.getElementById("moreUploads").removeChild(elm);
}
</script>
当我单击清除链接以清除上传文件输入中的默认文本时,它将输入替换为显示默认值的自定义输入。
这是您将在上述脚本中找到的函数:
function resetFileContent(){
document.getElementById("static_attachment").innerHTML = '<input type="file" name="attachment0" id="attachment0" onchange="document.getElementById(\'moreUploadsLink\').style.display = \'block\';" /><a id="link_clear" href="javascript:resetFileContent();">Clear</a> ';
}
我想为此上传文件输入自定义设计。对于那些重复的人。
我可以修改从 JavaScript 生成的输入类型文件的样式吗?像下面这样一个:-
<script language="JavaScript">
var upload_number = 1;
function addFileInput()
{
var d = document.createElement("div");
var l = document.createElement("a");
var file = document.createElement("input");
file.setAttribute("type", "file");
file.setAttribute("name", "attachment"+upload_number);
file.setAttribute("id", "attachment"+upload_number);
l.setAttribute("href", "javascript:removeFileInput('f"+upload_number+"');");
l.appendChild(document.createTextNode("Clear"));
d.setAttribute("id", "f"+upload_number);
d.appendChild(file);
d.appendChild(l);
document.getElementById("moreUploads").appendChild(d);
document.getElementById("attachments").value = upload_number;
upload_number++;
}
function removeFileInput(i)
{
var elm = document.getElementById(i);
document.getElementById("moreUploads").removeChild(elm);
}
</script>
谢谢,