将图片从本地上传到服务器的过程详解

时间:2024-04-07 15:50:18

将图片从本地上传到服务器主要分为三个过程
第一,准备工作
第二,图片显示在前端页面
第三,发送给服务器
详情:
准备工作

  1. 定义一个input标签,type=file,然后让他隐藏,用一个lable标签设置它的for属性指向这个input,这样就可以通过设置lable的格式,达到文件上传的功能
<label for="fileupload" class="updata_file">点击这里上传图片</label>
<input type="file" id="fileupload" style="display: none" name="upload">
  1. 还需要定义一个img标签,用来接收上传的图片
<img src="" id="imageview" style="display: none">

让图片显示在前端界面

  1. 在Js中设置该input的change事件,原理就是将图片的盘符形式的地址换成http形式的地址,再将该地址赋值给img的src属性,并让其显示。
// 原理是把本地图片路径:"D(盘符):/image/..."转为"http://..."格式路径来进行显示图片
$("#fileupload").change(function() {
    var $file = $(this);
    var objUrl = $file[0].files[0];
    //获得一个http格式的url路径:mozilla(firefox)||webkit or chrome
    var windowURL = window.URL || window.webkitURL;
    //createObjectURL创建一个指向该参数对象(图片)的URL
    var dataURL;
    dataURL = windowURL.createObjectURL(objUrl);
    //把url给图片的src,让其显示
    $("#imageview").attr("src",dataURL);
    $('#imageview').attr("style","display:inline");
});

发送给服务器

  1. 通过form表单提交给服务器,第一需要设置formenctype="multipart/form-data",第二需要设置input的name属性,传一个参数
    <input type="file" id="fileupload" style="display: none" name="upload">
  2. 利用Struts2框架提供了接收图片的方法,需要接收三个参数。
    第一个,文件名称,就是获取发送来的文件名称。private String uploadFileName;
    第二个,是一个临时文件。private File upload;
    第三个,文件类型。private String uploadContentType;
    将图片从本地传到服务器,经历的过程就是先将图片生成一个临时文件存在C盘,然后再将这个临时文件拷贝到服务器。

调试:上传图片,打印这三个参数
将图片从本地上传到服务器的过程详解

  1. 在服务器端写代码将临时文件从C盘copy过来
    注:这里使用UUID生成的随机字符串给文件命名,避免文件名重复的情况发生
@Setter
private String uploadFileName; // 文件名称
@Setter
private File upload; // 上传文件,与form表单input发送的name名一样
@Setter
private String uploadContentType; // 文件类型

    public String AddImg() throws IOException {
       //处理上传的文件
        if(upload!=null){
            //获取文件扩展名
            int index = uploadFileName.lastIndexOf(".");
            String exName = uploadFileName.substring(index);
            //随机生成文件名
            String uuid = UUID.randomUUID().toString();
            //将生成的uuid中的"-"去掉,并拼接扩展名
            String fileName = uuid.replace("-", "") + exName;
            
            //新建服务器接受文件的目录
            String realPath = ServletActionContext.getServletContext().getRealPath("/upload");
            //路径转文件
            File file = new File(realPath);
            //如果文件不存在,新建文件夹
            if(!file.exists()){
                file.mkdirs();
            }
            //拼接新文件路径
            File newFile = new File(realPath + "/" + fileName);
            //把临时文件copy过来
            FileUtil.copyFile(upload,newFile);
        }
        return null;
    }

思路很简单:就是先获取文件的扩展名,然后生成随机的UUid,将UUid中的“-”去掉之后,拼接上扩展名就是服务器存储该图片的名称。然后在服务器下面新建一个目录upload,再利用FileUtil.copyFile()方法将临时文件copy过来