文件上传前端页面事件

1.引用js  ：jquery-2.1.0.js ，jquery.form.js

html:

<form id="bankrollFilesForm" class="oas-form clearfix" method="post" enctype="multipart/form-data">

 <a href="javascript:;" class="oas-btn oas-recommend bankrollBills-file" >选择文件</a>

<div id="filediv"></div>
 <input id="bankrollBills"  name="bankrollBills" style="display: none;"  type="file" multiple multiple="multiple">

</form>

js：

<script type="text/javascript">
          $(".bankrollBills-file").live("click",function(){
            $("#bankrollBills").click();
         });
     
         $("#bankrollBills").live('change',function(){
             var fileList=this.files;
             var filename=$("#filediv");
             $("#filediv").empty();
            $.each(fileList,function(index){
                var html=$("<span>"+fileList[index].name+"</span><br>");
                html.appendTo(filename);
            });
         });

$('#bankrollFilesForm').ajaxSubmit({
            type: 'post',
            url: ”",
            data: $("#bankrollFilesForm").serialize(),
            beforeSubmit:function(){
                var divContent=$("#filediv").html();
                if(divContent==null ||divContent.length == 0){
                    OasMsg.open({ type : 'warning', message : '请选择文件！'});
                    return false;
                }
            },
            success:function(resData){
                oasDialog.oasDialog('close');
                if(resData=="OK"){
                     OasMsg.open({ type : 'success', message : '文件上传成功!'});
                }else{
                     OasMsg.open({ type : 'error', message : '文件上传失败!'});
                }
            }
         });
    </script>