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">?

原始文字

首先创建add + new file按钮和输入文件的目标目标：

 <div id="addFileTarget"></div> <input type="button" id="addFileButton" /> <input type="button" id="clearFilesButton" /> <input type="submit" id="uploadFilesButton" runat="server" />

然后使用jquery将click事件附加到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

两者都是阵列。

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

1 个答案: