>  기사  >  웹 프론트엔드  >  로컬 이미지를 브라우저에 표시하고 js로 서버에 업로드하는 방법

로컬 이미지를 브라우저에 표시하고 js로 서버에 업로드하는 방법

零到壹度
零到壹度원래의
2018-04-21 14:53:1711010검색

이 기사의 내용은 로컬 이미지의 미리보기를 표시하는 브라우저, 이미지를 서버에 업로드하기 위해 백엔드 인터페이스를 호출하는 것에 관한 것입니다. 여기에는 특정 참조 값이 있습니다. 이제 이를 여러분과 공유합니다. 도움이 필요한 친구들은 참고하세요

면 I. JSP 페이지 j R

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <META HTTP-EQUIV="pragma" CONTENT="no-cache"> 
        <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> 
        <META HTTP-EQUIV="expires" CONTENT="0">
        <!-- 引入js -->
        <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.js"></script>
        <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.min.js"></script>
    <body>

        <p id="enteringInfor">

            <form id="uploadForm" >

               <p class="formItem" style="float:left">
                   <p class="itemBlock">
                        <p style="display:inline-block;float:left" class="selectContainer">
                            <span class="txtBox">姓名</span>
                            <input type="text" class="select"  name="realName" id="realName"  placeholder="请输入姓名" style="width:200px;">
                        </p>
                    </p>
                    <p class="itemBlock">
                         <p style="display:inline-block;float:left" class="selectContainer">
                            <span class="txtBox">性别</span>
                            <select class="select" name="gender" id="gender" >
                                <option value="1">男</option>
                                <option value="2">女</option>
                            </select>
                        </p>
                    </p>
                </p>

                <p class="formItem" style="float:right;margin-top:50px;">
                    <p class="picture">
                        <p class="layui-upload">
                            <p class="layui-upload-list" id="localImag">
                                <img  class="layui-upload-img" id="userPic"   style="max-width:90%" alt="로컬 이미지를 브라우저에 표시하고 js로 서버에 업로드하는 방법" >
                                <p id="demoText"></p>
                            </p>
                            <p class="btn btn-primary fileinput-button"  style="width:332px;position:absolute;bottom:0px">
                                <span class="uploadTxt">上传图片</span>
                                <input class="form-control layui-btn" id="entrustPicUpload" type="file" name="entImg" onchange="getPhoto(this)"  />
                            </p>
                        </p> 
                     </p>
                </p>

            </form>

            <p class="modelEditorBottom" style="padding-left:24px;text-align:center;height:70px;line-height:70px;border:none;width:100%;overflow:hidden;zoom:1">
                <button class="buttons adminButton" onclick="saveUser()">保存</button>
            </p>

            <input type="hidden" name="userId" id="userId"/>
        </p><script>
    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;
        $(&#39;#userPic&#39;).viewer({
            url: &#39;src&#39;,
        });
    } 

    //保存
    function saveUser(){
        //数据判断
        var realName=$("#realName").val();        if(realName==null||realName==&#39;&#39;){
            layer.msg(&#39;用户名不能为空!&#39;,{icon : 7,time:1000});            return ;
        }        var imgSrc = $("#userPic").attr("src");        if(imgSrc == "" || imgSrc==null){
            layer.msg(&#39;请上传图片!&#39;,{icon : 7,time:1000});            return ;
        }        var formData = new FormData($("#uploadForm")[0]);
        $.ajax({  
            url : "../addUser",  
            type: &#39;POST&#39;,  
            data: formData,  
            async: false,  
            cache: false,  
            contentType: false,  
            processData: false, 
            success : function(data) {
                var obj =  JSON.parse(data);
                layer.msg(&#39;保存成功!&#39;, {icon : 6,time : 2000});
            },  
            error : function(data) {  
                layer.msg(&#39;保存失败!&#39;, {icon : 5,time : 2000});
            }
        }); 
    }    </script>
    </body></html>
E 2, 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);
        }

    }
E III, Tool Class

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;

    }


}
E 4, Effects

3. 다음


4. 로컬 이미지를 브라우저에 표시하고 js로 서버에 업로드하는 방법

로컬 이미지를 브라우저에 표시하고 js로 서버에 업로드하는 방법


로컬 이미지를 브라우저에 표시하고 js로 서버에 업로드하는 방법

관련 권장 사항:
로컬 이미지를 브라우저에 표시하고 js로 서버에 업로드하는 방법

HTML5 로컬 이미지 자르기 및 서버에 업로드

로컬 사진을 압축하여 서버에 업로드

JAVA는 파일과 사진을 업로드합니다. 서버에 저장하고

WeChat 편집기 기사 스타일의 사진을 WeChat 서버에 업로드하세요

위 내용은 로컬 이미지를 브라우저에 표시하고 js로 서버에 업로드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.