jsp通过ajax上传文件,基于jquery

#前言

推荐讲解:使用ajax提交form表单,包括ajax文件上传

推荐讲解:HTML5+Ajax上传文件

建议:看这篇之前,请先了解直接form表单提交servlet方式上传文件  jsp上传文件到服务器,因为我下面servlet用的文件上传方式在里面有讲解,所以此篇不赘述。

#案例

前端jsp代码:

                <div style="width: 60%;text-align: center;margin: 2% auto;">
                    <input id="myphoto" type="file" name="pic">
                    <button type="button" onclick="uploadFiles('myphoto','photo')">提交</button>
                </div>

js代码实现uploadFiles函数,函数内执行ajax

/*** 上传文件 *****/
function uploadFiles(inputid,type) {
    var formData=new FormData();
    formData.append("file",$('#'+inputid).prop('files')[0]);
    formData.append('type',type);
    $.ajax({
        type:'POST',
        url:'/ServletUpload',
        data:formData,
        contentType: false,// 注意:让jQuery不要处理数据
        processData: false,// 注意:让jQuery不要设置contentType
        success:function (msg) {
            console.log("上传成功");
            window.location.reload();
        },
        error:function (mag) {
            console.log("上传失败,请重试");
            alert("上传失败,请重试");
            // window.location.reload();
        }
    });

}

最后是servlet代码:

package Servlet;

import Beans.User;
import Mysql.SQL;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

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 javax.servlet.http.Part;
import java.io.*;
import java.text.SimpleDateFormat;
import java.util.*;

@WebServlet(name = "ServletUpload",urlPatterns = {"/ServletUpload"})
public class ServletUpload extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        uploadFiles(request,response);

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        return;
    }

    private void uploadFiles(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("UTF-8");
        PrintWriter out=response.getWriter();

        String ret="No";
        try {
            // 配置上传参数
            DiskFileItemFactory factory = new DiskFileItemFactory();
            ServletFileUpload upload = new ServletFileUpload(factory);
            // 解析请求的内容提取文件数据
            @SuppressWarnings("unchecked")
            List<FileItem> formItems = upload.parseRequest(request);

            //获取普通参数
            Map<String ,String> field=new HashMap<>();
            for (FileItem item : formItems){
                if(item.isFormField()){
                    field.put(item.getFieldName(),item.getString());
                }
            }
            String type=field.get("type");//我自己规定的类型,区分文件是干嘛的

            int succ=0;
            // 迭代表单数据
            for (FileItem item : formItems) {
                // 处理不在表单中的字段,即文件
                if (!item.isFormField()) {
                    String fileName = item.getName(); //获取上传的文件名
                    String fileType=fileName.substring(fileName.lastIndexOf(".")+1);
                    //定义上传文件的存放路径
                    String path = request.getServletContext().getRealPath("/upload/"+type);
                    path=path.replace("\\","/");//一定要加上,不然路径在插入数据库时会出错
                    //定义上传文件的完整路径
                    String fileSaveName= new SimpleDateFormat("yyyyMMddhhmmss").format(new Date()).toString();
                    fileSaveName+="."+fileType;
                    String filePath = String.format("%s/%s",path,fileSaveName);
                    File storeFile = new File(filePath);
                    //如果父目录不存在,就创建他
                    if(!storeFile.getParentFile().exists()){
                        storeFile.getParentFile().mkdirs();
                    }
                    // 在控制台输出文件的上传路径
                    System.out.println(filePath);
                    // 保存文件到硬盘
                    item.write(storeFile);




                    //以下是将路径信息插入数据库,不必关注
                    /******............******/
                    succ++; //多上传了一个文件

                }
            }
        } catch (FileUploadException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }


        if(succ>0){
            ret="Yes";
        }
        out.print(ret);
        out.flush();
        out.close();
    }

}

如有错误,请帮我指正,谢谢

 

  • 1
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
好的,以下是一个基于 SSM(Spring+SpringMVC+MyBatis)框架,使用 JSPAJAX 实现文件上传的案例。 1. 在 SpringMVC 配置文件中添加文件上传解析器: ```xml <!-- 配置文件上传解析器 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="maxUploadSize" value="10485760"/> <!-- 限制上传文件的大小为10MB --> </bean> ``` 2. 在 JSP 页面中添加表单和 AJAX 代码: ```html <form id="uploadForm" enctype="multipart/form-data"> <input type="file" name="file"/> <input type="text" name="name"/> <button id="uploadBtn" type="button">上传</button> </form> <script> $(function() { $('#uploadBtn').click(function() { var formData = new FormData($('#uploadForm')[0]); $.ajax({ url: 'upload', type: 'POST', data: formData, processData: false, contentType: false, xhr: function() { // 监听上传进度 var xhr = $.ajaxSettings.xhr(); if (xhr.upload) { xhr.upload.addEventListener('progress', function(event) { if (event.lengthComputable) { var percent = Math.round((event.loaded / event.total) * 100); console.log('上传进度:' + percent + '%'); } }, false); } return xhr; }, success: function(result) { console.log('上传成功'); }, error: function() { console.log('上传失败'); } }); }); }); </script> ``` 3. 在 SpringMVC 控制器中添加文件上传处理方法: ```java @RequestMapping(value = "/upload", method = RequestMethod.POST) @ResponseBody public String upload(@RequestParam("file") MultipartFile file, @RequestParam("name") String name) { try { if (!file.isEmpty()) { String fileName = file.getOriginalFilename(); String filePath = "/data/" + fileName; // 上传文件保存路径 File dest = new File(filePath); if (!dest.getParentFile().exists()) { dest.getParentFile().mkdirs(); } file.transferTo(dest); // TODO: 处理上传文件和其他参数 return "success"; } } catch (Exception e) { e.printStackTrace(); } return "error"; } ``` 其中,`@RequestParam("file")` 注解表示接收名为 `file` 的文件参数,`@RequestParam("name")` 注解表示接收名为 `name` 的其他表单参数。 以上就是一个简单的基于 SSM、JSPAJAX文件上传案例。注意,为了方便起见,这里使用了 jQuery 库来简化 AJAX 代码的编写。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

雪的期许

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值