js如何获取本地图片显示到浏览器并上传至服务器

这篇文章介绍的内容是关于浏览器显示本地图片的预览图，调用后端接口将图片上传至服务器，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

一、jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    
        
        
         
         
        
        
        
        
    

        


            


               

                   

                        

                            姓名
                            
                        
                    

                    

                         

                            性别
                            
                                男
                                女
                            
                        
                    

                


                

                    

                        

                            

                                @@##@@
                                

                            

                            

                                上传图片
                                
                            
                        
 
                     

                


            

            

                保存
            

            
        

    

二、controller接口

/** 
     * 添加用户
     * @param session
     * @param request
     * @param response
     * @throws IOException
     */
    @RequestMapping(value = "/addUser", method = RequestMethod.POST)    
    public void addUser(MultipartFile entImg,HttpSession session, HttpServletRequest request, HttpServletResponse response)       
                throws IOException {
        String realName = request.getParameter("realName");//姓名
        String gender = request.getParameter("gender");// 性别

        //调用工具类上传图片
        String userPic = FileUtils.uploadUser(entImg, request);

        TestUser testUser = new TestUser();
        testUser.setRealName(realName);
        testUser.setGender(Integer.parseInt(gender));
        testUser.setUserPic(userPic);        // 添加人员信息及图片url到数据库
        int res= userService.insertUser(testUser);        if (res > 0) {
            writeJSON(response, res);
        } else {
            writeJSON(response,null);
        }

    }

三、工具类

public class FileUtils {

    FILES_PATH("files_path"); // 此路径存放于jdbc.properties配置文件中，例如：files_path=D:/uploadImgs
    private static final String path = PropertiesUtil.get(FILES_PATH)+"/user";    /**
     * 上传图片URL
     * @param fileName
     * @param request
     * @return
     */
    public static String getPath(String fileName,HttpServletRequest request) {
        String ip=IpUtil.getIP();        int port=request.getLocalPort();
        StringBuilder sb=new StringBuilder();
        sb.append("http://");
        sb.append(ip);
        sb.append(":");
        sb.append(port);
        sb.append("/uploadImgs/user/");
        sb.append(fileName);        return sb.toString();
    }    /**
     * 以时间戳对上传文件进行重新命名
     * @param file
     * @return
     */
    public static String renameFile(MultipartFile file) {        if(file!=null) {
            Long date=new Date().getTime();
            String fileRealName=file.getOriginalFilename();
            String prefix=fileRealName.substring(fileRealName.lastIndexOf(".")+1);
            String fileName = date.toString()+"."+prefix;  
            return fileName;
        }        return null;
    }    /**
     * 图片上传
     * @param file
     * @param fileName
     */
    public static String uploadUser(MultipartFile file, HttpServletRequest request) {        // 重命名
        String renameFile = FileUtils.renameFile(file);        // 图片名
        String picPath = FileUtils.getPath(renameFile, request);        // 上传
        File targetFile = new File(borpath, renameFile);        if (!targetFile.exists() && !targetFile.isDirectory()) {
            targetFile.mkdirs();
        }        try {
            file.transferTo(targetFile);
        } catch (Exception e) {
            e.printStackTrace();
        }        return picPath;

    }


}

四、效果

3.图片上传成功后保存至指定文件夹下

4.数据库数据

JenMusic

一个新兴的AI音乐生成平台，专注于多乐器音乐创作。

下载

相关推荐：

HTML5 本地裁剪图片并上传至服务器

压缩本地图片并上传至服务器

JAVA上传文件图片到服务器保存

把微信编辑器文章样式中的图片上传到微信服务器