ajax异步上传文件

太过爱你忘了你带给我的痛 2022-02-19 07:09 307阅读 0赞

这里主要使用前端的方法，主要用到了h5的api。使用的时候，一定要在界面上加入：

<%--使用formdata来上传文件一定要注明该注释为html5--%>
    <!DOCTYPE HTML>

使用：

function uploadFiles(){
                var uploadFile = new FormData($("#file")[0]);
                //console.log(uploadFile);
                if("undefined" != typeof(uploadFile) && uploadFile != null && uploadFile != ""){
                    $.ajax({
                        url:'<%=basePath%>saveTitle.do?id='+title_id+'&&type=2',
                        type:'POST',
                        data:uploadFile,
                        async: false,
                        cache: false,
                        contentType: false, //不设置内容类型
                        processData: false, //不处理数据
                        success:function(data){
                            //console.log(data);
                            alert("上传文件成功！");
                        }
                    })
                }else {
                    alert("选择的文件无效！请重新选择");
                }
            }

后端的代码：（这里只是做一个介绍，里面有我的其他功能代码）。如果想要了解后端关于文件上传的方法，详见我之前的一篇文章：[https://blog.csdn.net/weixin\_41060905/article/details/82717717][https_blog.csdn.net_weixin_41060905_article_details_82717717]

package com.dfrz.servlet;
    
    import com.dfrz.pojo.title;
    import com.dfrz.service.titleServiceImpl;
    import org.apache.commons.fileupload.DiskFileUpload;
    import org.apache.commons.fileupload.FileItem;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.File;
    import java.io.IOException;
    import java.io.PrintWriter;
    import java.util.Iterator;
    import java.util.List;
    
    /**
     * 用来上传文件
     */
    @WebServlet(name = "saveFileServlet",urlPatterns = "/saveTitle.do")
    public class saveFileServlet extends HttpServlet {
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            titleServiceImpl titleService = new titleServiceImpl();
            response.setContentType("text/html;charset=utf-8");
            request.setCharacterEncoding("utf-8");
            PrintWriter out = response.getWriter();
            String titleNumber = request.getParameter("id");
            String contextPath = request.getContextPath();
            String realPath=null;
            //获得上传的类型
            String type = request.getParameter("type");
            System.out.println(type);
            if(type.equals("1")){
            //上传的是封面图片
             realPath = request.getRealPath("coverimg");
            }
            else {
                //上传的是文件
                realPath=request.getRealPath("download");
            }
            DiskFileUpload fu = new DiskFileUpload();
            fu.setSizeMax(1024*1024);
            fu.setRepositoryPath(realPath);
            try {
                List<FileItem> fileItems = fu.parseRequest(request);
                Iterator<FileItem> iterator = fileItems.iterator();
                while (iterator.hasNext()){
                    FileItem item = iterator.next();
                    if(!item.isFormField()){
                        String pathSrc = item.getName();
                        int start = pathSrc.lastIndexOf("\\");//确定最后\的位置以此来获取不含路劲的文件名
                        String fileName = pathSrc.substring(start + 1);
                        System.out.println(fileName);
                        //这里一定要对.号转义！
                        String[] split = fileName.split("\\.");
    //                    System.out.println("文件名"+split[0]);
    //                     System.out.println("文件后缀"+split[1]);
                        File file = new File(realPath, titleNumber + "."+split[split.length-1]);//进行重新命名，以isbn号命名
                        //设置图片存储路径在数据库中
                        if(type.equals("1")){
                            //上传的是封面图片
                            titleService.updateCoverImg(titleNumber,titleNumber + "."+split[split.length-1]);
                        }
                        else {
                            //上传的是文件
                            titleService.updateInfoAddress(titleNumber,titleNumber + "."+split[split.length-1]);
                        }
                        item.write(file);
                    }
                    item.delete();
    
                }
            } catch (Exception e) {
                //response.sendRedirect("bookstory/uploadfile_show.jsp?isbn="+isbn);
                e.printStackTrace(out);
            }finally {
               out.print("ok");//这个用来前端异步上传文件的时候，回传上传成功！
                String successMessage = "<meta http-equiv='refresh' content='5;url=http://localhost:8080/exam/OnlineCourse/titleList.jsp'>5秒后会自动跳转到首页，如果没有，\n" +
                        "                \"请点击<a href='http://localhost:8080/exam/OnlineCourse/titleList.jsp'>跳转链接</a>\"";
                request.setAttribute("successMessage", successMessage);
                //response的重定向要写完整的uri，请求转发用相对路径
                request.getRequestDispatcher("/OnlineCourse/uploadSuccess.jsp").forward(request,response);
            }
    
        }
    
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            doPost(request,response);
    
        }
    }

[https_blog.csdn.net_weixin_41060905_article_details_82717717]: https://blog.csdn.net/weixin_41060905/article/details/82717717