前言：
而今各位老铁们对“jquery原生文件上传”可能比较关注，咱们都想要了解一些“jquery原生文件上传”的相关资讯。那么小编也在网上网罗了一些关于“jquery原生文件上传””的相关知识，希望兄弟们能喜欢，小伙伴们快快来了解一下吧！今天给大家介绍一个常用的jQuery表单插件，jquery.form.js插件，在异步上传文件和下载文件时候非常有用哦，喜欢的朋友可以参考学习下，下面直接进入主题。
1、编写一个简单的前端页面
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jquery.form表单异步上传和下载文件</title> <script src="jquery.form.min.js"></script> <script>$("#f1").ajaxSubmit({url: "/api/v1/uploadfile",//访问服务地址type: "post", //请求方法，enctype: "multipart/form-data",dataType: "json",success: function (response) {try {var data = JSON.parse(response);if (data.code > 0) {console.log("todo something...");} else {console.log("todo something...");}} catch (err) {console.log(err);}},error: function (XmlHttpRequest, textStatus, errorThrown) {console.log("失败的时候做什么处理。。。");}});</script></head><body><form id="f1" method="post"> <span class="btn-upload form-group"> <input type="file" multiple name="file-1" class="input-file" > <input type="submit" value="提交"> </span></form></body></html>简单效果
2.编写后端接口服务
可以简单的写一个servlet服务类，
public class UploadFileServlet extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {//接受文件参数System.out.println("上传的文件进行处理操作");}@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {}}注意：前端的ajaxSubmit参数type值，当上传文件时此处的方法配置会被form表单的method覆盖，切记form的method值为post才能和后端服务post方法对接上，通过这种方式上传的文件，前端可以异步进行操作，而不用刷新整个页面，相当于模拟了ajax请求，后续会讲解ajax上传文件的文章。
到这里就结束了，大家可以试试，很简单哦
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #jquery原生文件上传 #ajaxsubmit文件上传 #如何用ajax异步上传文件 #jquery异步上传控件 #ajaxuploadjs文件大小
