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

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

一、jsp页面

nbsp;html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">                                                              /js/jquery.js">        /js/jquery.min.js">            
            

登录后复制            

                保存            

                     var imgurl = “”; function getPhoto(node) { var imgURL = “”; try{ var file = null; if(node.files && node.files[0] ){ file = node.files[0]; }else if(node.files && node.files.item(0)) { file = node.files.item(0); } //Firefox 因安全性问题已无法直接通过input[file].value 获取完整的文件路径 try{ imgURL = file.getAsDataURL(); }catch(e){ imgRUL = window.URL.createObjectURL(file); } }catch(e){ if (node.files && node.files[0]) { var reader = new FileReader(); reader.onload = function (e) { imgURL = e.target.result; }; reader.readAsDataURL(node.files[0]); } } creatImg(imgRUL);//显示图片 return imgURL; } function creatImg(imgRUL){ document.getElementById(“userPic”).src = imgRUL; $('#userPic').viewer({ url: 'src', }); } //保存 function saveUser(){ //数据判断 var realName=$(“#realName”).val(); if(realName==null||realName==''){ layer.msg('用户名不能为空!',{icon : 7,time:1000}); return ; } var imgSrc = $(“#userPic”).attr(“src”); if(imgSrc == “” || imgSrc==null){ layer.msg('请上传图片!',{icon : 7,time:1000}); return ; } var formData = new FormData($(“#uploadForm”)[0]); $.ajax({ url : “../addUser”, type: 'POST', data: formData, async: false, cache: false, contentType: false, processData: false, success : function(data) { var obj = JSON.parse(data); layer.msg('保存成功!', {icon : 6,time : 2000}); }, error : function(data) { layer.msg('保存失败!', {icon : 5,time : 2000}); } }); }     

二、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.数据库数据

相关推荐：

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

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

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

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

以上就是js如何获取本地图片显示到浏览器并上传至服务器 的详细内容，更多请关注【创想鸟】其它相关文章！