ajax异步上传图片

本文介绍了一个使用Java Servlet实现的文件上传处理程序AddInsectServlet,该程序利用Apache Commons FileUpload库解析HTTP请求中的文件,并将文件保存到指定路径。同时,通过AjaxUpload插件实现了前端的异步文件上传功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Servlet

import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

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;


/**
 * Servlet implementation class AddInsectServlet
 */
public class AddInsectServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    // private ServletContext sc;
    // private String savePath;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public AddInsectServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
     *      response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // TODO Auto-generated method stub

        // 文件磁盘工厂、
        DiskFileItemFactory df = new DiskFileItemFactory();
        // 得到上传文件对象
        ServletFileUpload upload = new ServletFileUpload(df);
        // 1ge long 表示一个字节 1024*1024=1M;
//        upload.setFileSizeMax(1024 * 1024 * 5);

        Map<String, String> map = new HashMap<String, String>();
        String saveName = "";
        try {
        
            List<FileItem> list = upload.parseRequest(request);

            for (FileItem file : list) {
                // 判断是否为普通的表单、
                if (file.isFormField()) {
                    String name = file.getFieldName();
                    String value = file.getString("utf-8");
                    map.put(name, value);

                } else {

                    String filename = file.getName();
                    filename = new String(filename.getBytes("iso-8859-1"), "utf-8");
                    System.out.println(filename);
                    String savePath = this.getServletContext().getRealPath("/img");
                    System.out.println(savePath);
                    saveName = System.currentTimeMillis() + filename.substring(filename.lastIndexOf("."));
                    System.out.println(saveName);
                    
                    try {
                        System.out.println(">>>>"+savePath + File.separator + saveName);
                         file.write(new File(savePath + File.separator + saveName));
//                         file.write(arg0);
                    } catch (Exception e) {
                        // TODO Auto-generated catch block
                        e.printStackTrace();
                    }

                }

            }

        } catch (FileUploadException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        

        response.getWriter().print("{'newfileName':'"+saveName+"'}");
        // request.getRequestDispatcher("/fileUploadResult.jsp").forward(request,
        // response);// 转向,输出结果
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
     *      response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

    

}

js

$(".addshu").click(function() {
        var ajax2 = new AjaxUpload($("#uploadBtn"), {
            action : "../../../AddInsectServlet",
            type : "POST",
            autoSubmit : true,
            responseType : "json",
            /*  name:'myfile', */
            onChange : function(file, ext) {
                if (!(ext && /^(jpg|gif|bmp)$/.test(ext))) {
                    alert("只支持jpg | bmp| gif");
                    return false;
                }
                else {
                    ajax2.submit();
                }
            },
            onComplete : function(file, data) {

                Img2 = data.newfileName;
                $(".showImg2").html("<img  src='/forestSystem/img/" + data.newfileName + "' style='width:80px;height:80px;'/>");
            }
        });
    })


html

<script type="text/javascript" src="../js/ajaxupload.3.6.js"></script>   //图片上传需用到的js插件

 <button id="uploadBtn" style="margin-left: 0px">上传图片</button>
                                    <div class="showImg2" style="height: 80px"></div>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值