0

すべてのブラウザーで同じように見えるように、デザインのアップロード ファイルの入力をカスタマイズしました。次に、[別のファイルを追加] リンクをクリックして、10 個のアップロード ファイル入力を 1 つずつ追加します。これらの 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>

ありがとう、

4

1 に答える 1

0

編集

わかりました私は今理解したと思います。残念ながら、入力タイプのファイルのスタイルを変更することはできません。これは、ブラウザー ベンダーがある種のセキュリティ リスクを考えているためです (ユーザーが気付かないうちにファイルをアップロードしている可能性はありますか?)。

とにかくこのスレ見てみろよ

<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

どちらも配列です。

于 2013-03-13T15:15:56.317 に答える