添加表单输入字段动态

Question

HTML表单

<div class="module"> 
      <div class="moduleTitle">Upload Photos</div>    
        <form id="upload" method="post" action="actions/upload.php" enctype="multipart/form-data"> 
      <div id="drop"> 
       Drop Here 

       <a>Browse</a> 
       <input type="file" name="upl" multiple /> 
      </div> 

      <form onSubmit="addTags();return false;" id="tagAddForm"> 
      <ul> 
       <!-- The file uploads will be shown here --> 
      </ul> 
        <input type="submit" name="login" value="Add Tags" class="submit" id="login"/> 
        </form> 
        </div> 
        </form> 

JavaScript文件

$(function(){ 

    var ul = $('#upload ul'); 

    $('#drop a').click(function(){ 
     // Simulate a click on the file input button 
     // to show the file browser dialog 
     $(this).parent().find('input').click(); 
    }); 

    // Initialize the jQuery File Upload plugin 
    $('#upload').fileupload({ 

     // This element will accept file drag/drop uploading 
     dropZone: $('#drop'), 

     // This function is called when a file is added to the queue; 
     // either via the browse button, or via drag/drop: 
     add: function (e, data) { 

      var tpl = $('<li class="working uploaded"><input type="text" value="0" data-width="48" data-height="48"'+ 
       ' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span></span></li>'); 



     // Append the file name and file size  
      tpl.find('p').text(data.files[0].name); 



      // Add the HTML to the UL element 
      data.context = tpl.appendTo(ul); 

      // Initialize the knob plugin 
      tpl.find('input').knob(); 

      // Listen for clicks on the cancel icon 
      tpl.find('span').click(function(){ 

       if(tpl.hasClass('working')){ 
        jqXHR.abort(); 
       } 

       tpl.fadeOut(function(){ 
        tpl.remove(); 
       }); 

      }); 

      // Automatically upload the file once it is added to the queue 
      var jqXHR = data.submit(); 
     }, 

     progress: function(e, data){ 

      // Calculate the completion percentage of the upload 
      var progress = parseInt(data.loaded/data.total * 100, 10); 

      // Update the hidden input field and trigger a change 
      // so that the jQuery knob plugin knows to update the dial 
      data.context.find('input').val(progress).change(); 

      if(progress == 100){ 
       data.context.removeClass('working'); 
      } 
     }, 

     fail:function(e, data){ 
      // Something has gone wrong! 
      data.context.addClass('error'); 
     } 

    }); 


    // Prevent the default action when a file is dropped on the window 
    $(document).on('drop dragover', function (e) { 
     e.preventDefault(); 
    }); 

    // Helper function that formats the file sizes 
    function formatFileSize(bytes) { 
     if (typeof bytes !== 'number') { 
      return ''; 
     } 

     if (bytes >= 1000000000) { 
      return (bytes/1000000000).toFixed(2) + ' GB'; 
     } 

     if (bytes >= 1000000) { 
      return (bytes/1000000).toFixed(2) + ' MB'; 
     } 

     return (bytes/1000).toFixed(2) + ' KB'; 
    } 

}); 

Answer 1

这里是一个演示如何基于文件的阵列上可以动态生成(input/li)秒。

//Create an empty container 
var $elems = $(); 
//Cycle thru the files 
$.each(data.files, function(idx, file) { 
    //Create an input with attrs 
    var $input = $("<input/>", { 
     'type': 'text', 
     'placeholder': 'separate tags with commas', 
     'name': file["name"] 
    }); 
    //Create list element & append input 
    var $li = $("<li/>").append($input); 
    //Populate the container with the list item 
    $elems = $elems.add($li); 
}); 
//Append all list items 
$("#tagAddForm > UL").append($elems); 

和working demo带有我为演示定义的示例文件。

Another one可以根据文件名显示图像缩略图。