异步多文件上传

这个是我在实际项目中所使用的一个异步上传表单的方法，同时可以上传文本文件还有上传附件。下面就将实现过程跟大家分享一下

//文中引入的插件，读者请自行引入

<link rel="stylesheet" href="bootstrap.css">

<link rel="stylesheet" href="ie10-viewport-bug-workaround.css">

<link rel="stylesheet" href="non-responsive.css">

<link rel="stylesheet" href="font-awesome.css">

<link rel="stylesheet" href="bootstrap-datetimepicker.css">

<scripttype='text/javascript'src='jquery1.11.1.js'></script>

<scripttype='text/javascript'src='jquery.form.js'></script>

<scripttype='text/javascript'src='bootstrap.js'></script>

<scripttype='text/javascript'src='ie10-viewport-bug-workaround.js'></script>

<scripttype='text/javascript'src='stp.js'></script>

//表单部分

<form id="myform" class="fileupload" method="post" enctype="multipart/form-data">

<input type="text" name="projectname" id="projectname" value=""/>

<div class="row fileupload-buttonbar">

<div class="col-lg-7">

<span>上传附件</span>

<span id="addfiles" class="btn btn-success fileinput-button">

<i class="glyphicon glyphicon-plus"></i>

<span>添加</span>

</span>

</div>

</div>

<table role="presentation" class="table table-striped">

<tbody id="files" class="files"></tbody>

</table>

</form>

//方法一

<script type="text/javascript">

var rowNum = 0;

$("addfiles").on("click",function(){

var item = '<tr class="template-download fade in" id="row_'+rowNum+'">';

item += '<td><input class="btn btn-default" style="float:left;width:400px;" tyle="file"name="files[]" value="请选择文件" /></td>';

item += '<td><input type="button" οnclick="delrow('+rowNum+')" value="清除"/></td></tr>';

var item1 = $(item);

$("#files").append(item1);

rowNum++;

})

function delrow(n){

$("#row_"+n).remove();

}

</script>

//方法二,在IE8环境下，如果方法一不管用的话，请选择方法二，方法二我已经验证过的，方法一大多数浏览器都兼容

<script type="text/javascript">

$("addfiles").on("click",function(){

var item = '<tr class="template-download fade in" id="row_'+rowNum+'">';

item += '<td><input class="btn btn-default" style="float:left;width:400px;" tyle="file" name="files[]" value="请选择文件" /></td>';

item += '<td><input type="button" class="btn btn-danger" value="清除"/></td></tr>';

var item1 = $(item);

$("#files").append(item1);

rowNum++;

})

$(document).on("click",".btn-danger",function(e){

$(this).parent().parent().remove();

})

</script>

//前端首页处理表单部分

function submitdata(){

var formdata = $("#myform");

formdata.ajaxSubmit({

type:'post',

url:'',

success:function(data){

alert("表单内容已提交成功！");

}

})

}

//后台获取到两个数组，$_POST、$_FILES，后台做相应的处理。