欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ajax实现图片上传及回显

程序员文章站 2022-03-27 20:41:34
...

       ajax可以使网页实现异步更新。这意味这可以在不重新加载整个网页的情况下,对网页的某个部分进行更新。今天使用ajax上传图片,并且将图片的路径以json格式返回到界面,达到回选的效果。

1.需要的工具包

图片上传

commons-io

commons-fileupload

Alibaba提供的fastjson,转换成json格式转换

fastjosn

使用ajax表单提交的jquery插件

jquery.form.js

2.编写前端代码

一.导入jQuery以及ajax表单提交插件

ajax实现图片上传及回显

二.静态页面

ajax实现图片上传及回显

三.js代码

ajax实现图片上传及回显

PS:在上面的第三处中的判断也可也不加,之所以加上的原因是之前在ajax中把dataType写成了dateType(修改后没有去掉),导致返回的是字符串。所以要加上判断,将返回的字符串格式化成json对象,然后使用。

四.后台代码,springmvc实现

@Controller                  //实现ServletContextAware接口
public class BookController implements ServletContextAware {
    private ServletContext servletContext;

    @Override
    public void setServletContext(ServletContext arg) {
        this.servletContext = arg;//得到ServletContext对象
    }
                  
    @RequestMapping(value = "/imgupload.do", method = RequestMethod.POST)
    @ResponseBody//加上该注解返回json数据     imgs页面的参数
    public String imgLoad(@RequestParam("imgs") CommonsMultipartFile commonsMultipartFile) {
//        定义上传图片的路径
        String realPath = servletContext.getRealPath("/resources/upload/");
        System.out.println("上传路径:" + realPath);
//        得到文件名  通过CommonsMultipartFilename得到图片的名称
        String originalFilename = commonsMultipartFile.getOriginalFilename();
        System.out.println("文件名:" + originalFilename);
        File file = new File(realPath, originalFilename);
        //往服务器写入数据 上传文件
        try {
            commonsMultipartFile.getFileItem().write(file);
            System.out.println("上传成功!");
        } catch (Exception e) {
            e.printStackTrace();
        }//将文件名与路径拼接在一起
        String path = "/resources/upload/" + originalFilename;
        JSONObject jsonObject = new JSONObject();
        jsonObject.put("paths", path);//将路径放入json对象中
        String json = JSON.toJSONString(jsonObject);
        System.out.println("JSON:" + json);
        return json;//返回json对象
    }
}

五.效果

ajax实现图片上传及回显

ajax实现图片上传及回显

上传图片后,图片会回显。根据后台打印的路径可以找到上传图片的位置。  

       在controller层的类中要实现ServletContextAware接口,并实现对应的方法得到ServletContext对象,根据该对象自定义上传文件的位置。然后根据提交的路径,获得页面的参数(imgs),得到一个CommonsMultipartFile对象,用这个对象得到选中的文件名。将得到的文件名和指定的位置放入File对象,通过CommonsMultipartFile对象的getFileItem().write(file)上传文件。将文件的位置和文件名拼接在一起,得到文件的路径。使用json对象将路径传到页面,将该路径赋给img标签的src属性,就得到了图片的上传与回显。

       PS:在对应方法的上面要加上@ResponseBody注解,作用是将controller的方法返回的对象通过适当的转换器转换为指定的格式之后,写入到response对象的body区,通常用来返回JSON数据或者是XML。

       

       每日鸡汤:人,要么庸俗,要么孤独!

Over!