多文件上传

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（）

我认为这将适用于你的情况。