AJAX文件上传实战指南-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43842188/article/details/107916678

本文详细介绍了使用AJAX进行文件上传的步骤，包括Action层的处理、JS页面的实现、在JSP页面引入必要的库文件，以及在添加和修改页面中如何展示已上传文件。通过这个指南，读者可以了解到一个完整的AJAX文件上传流程。

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

1----Action层
//文件上传

private File img;
    private String imgFileName;
    public void fileUpload(){
        String url=FileUtil.uploadFile(img, imgFileName, servletContext.getRealPath("upload"));            
        printOut("{\"url\":\""+url+"\"}");
    }
----get，set方法
    public File getImg() {
        return img;
    }
    public void setImg(File img) {
        this.img = img;
    }
    public String getImgFileName() {
        return imgFileName;
    }
    public void setImgFileName(String imgFileName) {
        this.imgFileName = imgFileName;
    }

2------js页面：
/**
* 文件上传，增加时与修改可同用一个js页面的文件上传
*/

function  uploadFile(type){
                 var fileId = 'imgFile';
                 var showId = 'imgShow';
                 if(type=='update'){
                     fileId = 'uimgFile';
                     showId = 'uimgShow';
                 }
                 $.ajaxFileUpload
                    ({
                     url: '/ajax-branchStaff/staff!fileUpload.action', //用于文件上传的服务器端请求地址
                        secureuri: false, //是否需要安全协议，一般设置为false
                        fileElementId: fileId, //文件上传域的ID
                        dataType: 'json', //返回值类型 一般设置为json
                        success: function (data, status)  //服务器成功响应处理函数
                        {
                            //alert(88+"  "+data.url)
                        $("#"+showId).attr("src","http://localhost:8080/ajax-branchStaff/upload/"+data.url);
                        $("input[name='staff.bimg']").val(data.url);
                         //图片的路径
                        },
                        error: function (data, status, e)//服务器响应失败处理函数
                        {
                        alert(e);
                        }
                    }
                    )
             }

3------在jsp页面引入ajaxfileupload.js和jquery.js两种文件

4 —ajax查询 —list页面：

       <td><img width="50" height="50" src="<%=request.getContextPath()%>/upload/${staff.bimg}"/></td>

5----form-----add页面：

文件

6----form—修改页面：
文件 <img width="50" height="50" id="uimgShow" src="<%=request.getContextPath()%>/upload/${staff.bimg}"/>--------此处的src所指路径回显图片路径，与展示页面的路径相同
文件

ajax文件上传干货