Вот очень базовая реализация в чистом 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>