多个文件同时上传

最近做项目，发现实现多个文件上传比较烦，看同事用的都是webuploader等附件，还要去查看源码，来修改样式。想到了一种简单的方法，用原始的<input type="file"/>也能实现。实现方法就是浏览一个文件之后，监听他的change方法，然后将这个file的样式设置成为隐藏，接着追加了一个file控件

  <form id="addFeedbackForm" method="post">  
        <div id="task-m-upload" class="task-m-upload-wrap">
             <textarea class="task-m-textarea" id="content"></textarea>
             <div class="task-upload-files oh"></div>
             <div class="task-upload-btns pr oh">
                 <a class="task-attachments-btn">添加附件</a>
                 <input type="file" class="task-input-file" name="file_upload"/>
             </div>
        </div>
    </form>

   <script type="text/javascript">

    //上传方法
    $('#task-m-upload').on('change','.task-input-file',function(){
        //时间戳
        var timestamp = Date.parse(new Date());

        var class_name = Common.getFileType($(this).val());
        var file_name = Common.getFileName($(this).val());
        var fileHtml =  '<div class="task-upload-file '+class_name+'">'
                            +'<span class="task-file-name">'+file_name+'</span>'
                            +'<a data-tag="'+timestamp+'" class="task-file-del"></a>'
                        +'</div>'

        $('.task-upload-files').append(fileHtml);
        $(this).attr('data-tag',timestamp).hide();
        $('.task-upload-btns').append('<input type="file" class="task-input-file" name="file_upload"/>');
    });
   
    //绑定删除事件
    $('.task-upload-files').on('click','.task-file-del',function(){
        var data_tag = $(this).attr('data-tag');
        $(this).parent().remove();
        $('#hidden-files').find('[data-tag='+data_tag+']').remove();
    });

 

 

$("#addFeedbackForm").ajaxSubmit({
             url:ctxpath+"/web//saveFeedback",
            cache:false,
            dataType:'json',
            data:{
                 'content' : $('#fcontent').val()
            },
            success: function(res) {
                       $('.task-upload-files').empty();
                      
                       $('.task-input-file').each(function(i,val){
                           $(this).remove();
                       });
                       alert(result.msg); 
                }else{
                       alert(result.msg); 
                }  
            } ,
            error:function(){  
               alert("系统错误，请联系系统管理员！"）; 
             }
            });

            //用这种方式就能提交文件了到后端了

   </script>

 

这里面省略了样式的代码，这里面要导入jquery-xxx-min.js和jquery.form.js