檔案上傳前端頁面事件
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>