JS多文件上传的实例代码
废话不多说了,具体实现代码如下所示:
<!DOCTYPEhtml>
<html>
<headlang="en">
<metacharset="UTF-8">
<title></title>
<scriptsrc="./jquery-1.9.1.min.js"></script>
</head>
<body>
<formid="uploadForm"action=""method="post"enctype="multipart/form-data">
<h1>多文件上传</h1>
<table>
<tr>
<td>上传文件:<inputtype="file"name="file[]"id="file"multiple="multiple"/><ahref="javascript:;"id="add">[+]</a></td>
</tr>
<tr>
<td>
<inputtype="button"value="上传"id="but"/>
</td>
</tr>
</table>
</form>
</body>
</html>
<script>
//添加
$(document).on("click","#add",function(){
varstr_tr="<tr>"+$(this).parents("tr").html()+"</tr>";
//js替换字符串样式
str_tr=str_tr.replace(/\+/,'-');
varnew_str_tr=str_tr.replace(/add/,'del');
$(this).parents("tr").after(new_str_tr);
})
//删除
$(document).on("click","#del",function(){
$(this).parents("tr").remove();
})
//文件上传
$("#but").click(function(){
varformData=newFormData($("#uploadForm")[0]);
$.ajax({
url:'http://localhost/demo/selfWork_MVC/easymvc/app/Views/Index/upload.php',
type:'POST',
data:formData,
async:false,
cache:false,
contentType:false,
processData:false,
success:function(returndata){
alert(returndata);
},
error:function(returndata){
alert(returndata);
}
});
})
</script>
相关参考:
原生JavaScript实现异步多文件上传
js实现inputtype="file"文件上传示例代码
以上所述是小编给大家介绍的JS多文件上传的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!