添加多个上传文件并清除浏览输入中的文本

Question

我已经自定义了设计上传文件输入，使其在所有浏览器中看起来都一样。 现在我想通过单击添加另一个文件链接来一个一个地添加 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>

谢谢，

Answer 1

编辑

好的，我想我现在明白了。不幸的是，您无法修改输入类型文件的样式，因为浏览器供应商认为它存在某种安全风险（您可能在人们没有意识到的情况下上传文件？）

不管怎样，看看这个帖子

How to customize <input type="file">?

原文

首先制作添加+新文件按钮和输入文件的目标位置：

<!-- runat="server" is only if you are using ASP.Net -->
<div id="addFileTarget"></div>
<input type="button" id="addFileButton" />
<input type="button" id="clearFilesButton" />
<input type="submit" id="uploadFilesButton" runat="server" />

然后使用jquery将点击事件附加到addFileButton

var i = 0;

$("#addFileButton").click(function () {
    // define id for upcoming element and increment for next time
    var id = 'file_' + (i++);

    //add new file input element as last child to our div
    $("#addFileTarget").append("<input type='file' id='" + id + "' runat='server' />");
});

$("#clearFilesButton").click(function () {
    // remove all child elements
    $("#addFileTarget").empty();

    // reset IDs
    i = 0;
});

不确定您使用的是什么服务器端技术，但如果是的话

• PHP：($_FILES)（我认为）

• ASP.Net：Request.Files

都是数组。