这篇文章主要介绍JS如何实现多文件上传,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
具体实现代码如下所示:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="./jquery-1.9.1.min.js"></script> </head> <body> <form id= "uploadForm" action= "" method= "post" enctype ="multipart/form-data"> <h2 >多文件上传 </h2> <table> <tr> <td >上传文件: <input type ="file" name="file[]" id="file" multiple="multiple"/><a href="javascript:;" id="add">[+]</a></td> </tr> <tr> <td> <input type ="button" value="上传" id="but"/> </td> </tr> </table> </form> </body> </html> <script> //添加 $(document).on("click","#add",function(){ var str_tr = "<tr>"+$(this).parents("tr").html()+"</tr>"; //js 替换字符串样式 str_tr = str_tr.replace(/\+/,'-'); var new_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(){ var formData = new FormData($( "#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>
以上是“JS如何实现多文件上传”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。