マルチファイルアップロード

Question

<?php $uploadNeed=3 ; for($i=0;$i<$uploadNeed;$i++) { ?> 
    <div class="smWidth"> 
     <input type="file" name="upload_file" value="" id=" " OnClick="alert(" 
     2 ");" /> 
     <br /> 
     <div class="clear"> 
     </div> 
    </div> 
    <?php } ?> 

私は3つのファイルアップロードフィールドを作成することができますが、ファイルを選択したときにのみ新しい入力ファイルを追加します。 Facebookのあなたが最初のフィールドのためのファイルを選択し、スタイルファイルのアップロード、その後、次のポップアップの...

私は実際にブラウズのクリックイベントをチェックしていますが、それは動作しません...

Answer 1

非常に基本的な純粋なJSの実装です - うまくいけば、それはあなたの右方向にナッジを与えるだろう...

<script type="text/javascript"> 

    // This keeps track of how many inputs there are, because each one MUST have a unique name! 
    var inputCounter = 1; 

    function inputChange() { 

    // This function will add a new input element, in a div, as it is in your 
    // original code, every time it is called. We attach it to the onchange 
    // event of all the inputs 

    // Declare local variables and increment input counter (for input names) 
    var newContainerDiv, newClearDiv, newInput, newBr; 
    inputCounter++; 

    // Create the new elements and set their properties 
    newContainerDiv = document.createElement('div'); 
    newContainerDiv.className = 'smWidth'; 
    newInput = document.createElement('input'); 
    newInput.type = 'file'; 
    newInput.name = 'upload_file_'+inputCounter; 
    newInput.onchange = inputChange; 
    newBr = document.createElement('br'); 
    newClearDiv = document.createElement('div'); 
    newClearDiv.className = 'clear'; 

    // Add the new elements to the DOM 
    newContainerDiv.appendChild(newInput); 
    newContainerDiv.appendChild(newBr); 
    newContainerDiv.appendChild(newClearDiv); 
    document.getElementById('uploads_container').appendChild(newContainerDiv); 

    } 

</script> 

<!-- just create one input at first, so we don't need the PHP loop any more --> 

<div id="uploads_container"> 
    <!-- we wrap it all in an outer container div with an id, to ease the task of adding more elements --> 
    <div class="smWidth"> 
    <input type="file" name="upload_file_1" onchange="inputChange();" /> 
    <br /> 
    <div class="clear"> 
    </div> 
    </div> 
</div> 

Answer 2

は、いくつかをフックしてください他のイベントをファイルフィールドに追加します。私が知る限り、jQueryは.change（）と呼ばれる非常に便利なイベントを持っています。

あなたのケースではうまくいくと思います。ここで