多文件上傳

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

我能夠創建三個文件上傳字段，但我想添加一個新的輸入文件只有當我選擇一個文件時，它應該繼續增加....類似的東西在您選擇的第一個字段，那麼文件的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（）

我認爲這將適用於你的情況。