上传图片_上传图片预览 - CSDN
  • 图片从本地上传到服务器主要分为三个过程 第一,准备工作 第二,图片显示在前端页面 第三,发送给服务器 详情: 准备工作 定义一个input标签,type=file,然后让他隐藏,用一个lable标签设置它的for属性指向这个...

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

    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过来

    展开全文
  • Ajax实现图片上传并预览

    万次阅读 多人点赞 2017-12-06 17:59:43
    最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能。虽然现在有很多的插件能实现,但是还是觉得自己写比较好。我们知道,图片上传需要一个input:file表单 当我们点击表单的时候提示选择需要...

    效果见尾部。

    最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能。虽然现在有很多的插件能实现,但是还是觉得自己写比较好。我们知道,图片上传需要一个input:file表单

    <input type='file' name='pic'>
    当我们点击表单的时候提示选择需要上传的图片。但是此需求我们分析一下,可以在点击图片的时候使用JS实现预览功能,并且楼主也是这样做的。代码如下:
    	function getFileUrl(sourceId) { 
    		var url;
    		url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); 
    
    		return url; 
    	} 
    	function preImg(sourceId, targetId) { 
    		var url = getFileUrl(sourceId); 
    		var imgPre = document.getElementById(targetId); 
    		imgPre.src = url; 
    	}

    效果如下:

    但是这样的话会涉及很多兼容问题。所以就想到了Ajax,在图片上传时,使用Ajax技术。将图片上传到服务器,再由服务器返回给我们图片的上传地址,然后添加到img标签中去。过程虽然麻烦了点,但是亲测不会有兼容问题。

    需要发送Ajax请求的话,当然input:file表单是不能实现我们的需求的,因此,我们需要给表单关联一个单击事件去帮我们进行Ajax请求并选择图片

    <form id="form1">
         <label for="exampleInputEmail1">头像</label>
          <input type="button" value="上传图片" οnclick="f.click()" class="btn_mouseout"/><br>
           <p><input type="file" id="f" name="f" οnchange="sc(this);" style="display:none"/></p>
     </form>
    <div id="result"></div>

    当我们点击上传图片这个button按钮时触发input:file选择图片实现Ajax上传

    <script>
    function sc(){
        var animateimg = $("#f").val(); //获取上传的图片名 带//
        var imgarr=animateimg.split('\\'); //分割
        var myimg=imgarr[imgarr.length-1]; //去掉 // 获取图片名
        var houzui = myimg.lastIndexOf('.'); //获取 . 出现的位置
        var ext = myimg.substring(houzui, myimg.length).toUpperCase();  //切割 . 获取文件后缀
        
        var file = $('#f').get(0).files[0]; //获取上传的文件
        var fileSize = file.size;           //获取上传的文件大小
        var maxSize = 1048576;              //最大1MB
        if(ext !='.PNG' && ext !='.GIF' && ext !='.JPG' && ext !='.JPEG' && ext !='.BMP'){
            parent.layer.msg('文件类型错误,请上传图片类型');
            return false;
        }else if(parseInt(fileSize) >= parseInt(maxSize)){
            parent.layer.msg('上传的文件不能超过1MB');
            return false;
        }else{  
            var data = new FormData($('#form1')[0]); 
            $.ajax({  
                url: "{:url('User/uppic')}", 
                type: 'POST',  
                data: data,  
                dataType: 'JSON',  
                cache: false,  
                processData: false,  
                contentType: false  
            }).done(function(ret){  
                if(ret['isSuccess']){
                    var result = '';
                    var result1 = '';
                    // $("#show").attr('value',+ ret['f'] +);
                    result += '<img src="' + '__ROAD__' + ret['f']  + '" width="100">';
                    result1 += '<input value="' + ret['f']  + '" name="user_headimg" style="display:none;">';
                    $('#result').html(result);
                    $('#show').html(result1);
                    layer.msg('上传成功');
                }else{  
                    layer.msg('上传失败');
                }  
            });  
            return false;
           }  
        }
    </script>


    这里我们采用FormData对面进行表单提交,然后服务器端接收

    public function uppic()
    	{
            $file = request()->file('f');
            $info = $file->move(ROOT_PATH . 'public/uploads/avatar');
            $a=$info->getSaveName();  
            $imgp= str_replace("\\","/",$a);  
            $imgpath='uploads/avatar/'.$imgp;  
            $banner_img= $imgpath;
            $response = array();  
            if($info){  
                $response['isSuccess'] = true;  
                $response['f'] = $imgpath;  
            }else{  
                $response['isSuccess'] = false;  
            }  
                  
            echo json_encode($response);
    	}
    这里会返回图片上传的url路径:$response['f] = $imgpath;现在我们要做的就是将这个url写进前台HTML部分进行一个显示

    <div class="form-group">
        <!-- 将Ajax上传的图片路径添加到数据库 -->
       <div id="show"></div>
    </div>
    在JS中添加

    $('#show').html(result1);

    即可进行上传并预览啦。最终效果图如下





    展开全文
  • 图片上传---整理总结

    2018-09-12 16:34:48
    值得注意的是:当一个表单里面包含这个上传元素的时候,表单的enctype必须指定为multipart/form-data,method必须指定为...‘营业执照’上传图片: &lt;form autocomplete="off" id="regUse...

    以‘陕钢电商’项目的注册页面做Demo:

    值得注意的是:当一个表单里面包含这个上传元素的时候,表单的enctype必须指定为multipart/form-data,method必须指定为post,浏览器才会认识并正确执行,用<input type="file">来选择本地文件

    ‘营业执照’上传图片:

    <form autocomplete="off" id="regUser" method="post" enctype="multipart/form-data">

         <li><span><i>*</i>营业执照:</span><input class="input" type="file" id="license" value="营业执照" name="license" /></li>

    </form> 

    校验图片上传的格式校验:

               var reg = /\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/;
               if((!reg.test(license)) || (tax && !reg.test(tax)) || (org && !reg.test(org))){
                           asyncbox.alert("请检查上传图片格式","提示");  
                            return false;              
              }          

            var license = $('#license').val();

            if(!license){
                     asyncbox.alert("请上传营业执照图片","提示");
                     return false;
            }

    ********************************第二种上传方式*****************************************************************************

    具体代码:

    显示“上传”按钮代码:

          <tr>
            <td width="30%" align="right">上传凭证:</td>
            <td width="70%">
              <input type="button" value='上传' id='btnUploadFile' name='btnUploadFile' class="sous-con" />
              <input type="hidden" id='fileName' name='fileName' value="" />
            </td>
          </tr>    

    JS代码:

        $(function(){  //页面加载完之后自动执行此操作;
            var btnFile = document.getElementById("btnUploadFile");  //获取id='btnUploadFile'的对象(是一个button对象);
            if(btnFile != undefined){
                AjxUploadFile(btnFile); // 给上传按钮绑定'图片上传'AjxUploadFile事件;
            }
        })

    AjxUploadFile方法相关代码:

    function AjxUploadFile(obj){  // obj代表的是btnFile button上传按钮   【上传到服务器】
            var button = obj;  
            new AjaxUpload(button, {  
                action: 'complain_action.jsp?act=4',  
                data: {},  
                name: 'myfile',  
                onSubmit: function(file, ext) {   //提交之前校验图片格式       file:文件名;   ext:拓展名         
                    if (!(ext && /^(jpg|png)$/.test(ext))) {  
                        alert("您上传的图片格式不对,请重新选择!");  
                        return false;  
                    }  
                },  
                onComplete: function(file, response) {          // file:文件名;  response:返回值 (上传到服务器之后的返回值)
                        var msg = response.toString();   // 把返回值转换成toString类型
                        if(msg != ''){
                            imgList.push(msg);       //把选中的图片推送至服务器(上传至服务器)
                            // 每上传一个图片, 就显示一行'预览'和'删除'记录
                            var str = '<li class="list_li">'+msg+'<a href="#" οnclick="show(this)">预览</a>  <a href="#" οnclick="delFile(this)">删除</a></li>';
                            $('#list_ul').append(str);     //上传多张图片时, 在后面追加添加的记录;          
                        }else if(msg == 0){                     
                            msgBox(msg); 
                        }                            
                }  
            });  
        }

        等等更多代码详见陕钢电商项目---admin/sys/complain

     

    ********************************刘凯教的图片上传*****************************************************************************

    使用form表单携带文件流到后台,后台进行存储,使用post方法;

    表单form enctype=“multipart/form-data”

    流:按方向分为输入流和输出流;按类型分为字节流和字符流;流是一种类型的传输方式。

    上传:就是将文件变成流文件,服务器接收到流文件,把流文件保存(输出到硬盘)

    要用到两个包:一个上传jar包;一个输入输出流的jar

    upload.jsp页面:

    public class upload extends HttpServlet {

        // 上传文件存储目录
        private static final String UPLOAD_DIRECTORY = "D:/upload/";

        @Override
        public void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            System.out.println("我是POST请求");
            doGet(req,resp);
        }
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            System.out.println("我是GET请求");
            // 检测是否为多媒体上传
            if (!ServletFileUpload.isMultipartContent(req)) {
                PrintWriter writer = resp.getWriter();
                writer.println("Error: 表单必须包含 enctype=multipart/form-data");
                writer.flush();
                return;
            }
            // 这是一个高水平的磁盘处理工厂工具API
            DiskFileItemFactory factory = new DiskFileItemFactory();
            // 设置内存临界值 - 超过后将产生临时文件并存储于临时目录中
            factory.setSizeThreshold(1024 * 1024 * 3);
            // 设置临时存储目录
            factory.setRepository(new File(System.getProperty("java.io.tmpdir")));
            //这是IOjar包里提供的文件上传工具
            ServletFileUpload upload = new ServletFileUpload(factory);

            // 设置最大文件上传值  40M
            upload.setFileSizeMax(1024 * 1024 * 40);
            // 设置最大请求值 (包含文件和表单数据)   50M
            upload.setSizeMax(1024 * 1024 * 50);
            // 中文处理
            upload.setHeaderEncoding("UTF-8");


            // 构建文件上传保存的路径  如果不存在则创建文件夹
            File uploadDir = new File(UPLOAD_DIRECTORY);
            if (!uploadDir.exists()) {
                uploadDir.mkdir();
            }

            try {
                // 解析请求的内容提取文件数据
                @SuppressWarnings("unchecked")
                        //获取用户请求体中的流文件列表
                List<FileItem> formItems = upload.parseRequest(req);
                if (formItems != null && formItems.size() > 0) {
                    // 迭代表单数据
                    for (FileItem item : formItems) {
                        // 处理特殊表单类型
                        if (!item.isFormField()) {
                            String fileName = new File(item.getName()).getName();
                            String filePath = UPLOAD_DIRECTORY + File.separator + fileName;
                            File storeFile = new File(filePath);
                            // 在控制台输出文件的上传路径
                            System.out.println(filePath);
                            // 保存文件到硬盘
                            item.write(storeFile);
                        }
                    }
                }
            } catch (Exception ex) {
                ex.printStackTrace();
                PrintWriter writer = resp.getWriter();
                writer.println("error:upload fail");
                writer.flush();
            }
            PrintWriter writer = resp.getWriter();
            writer.println("success upload");
            writer.flush();
            return;

        }
    }

    index.jsp页面:

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>文件上传</title>
    </head>
    <body>
      <form method="post" action="/upload/UploadServlet" enctype="multipart/form-data">
        文件:
        <input type="file" name="uploadFile" />
        <br/><br/>
        <input type="submit" value="上传" />
      </form>
    </body>
    </html>

    web.xml页面:

    <?xml version="1.0" encoding="UTF-8"?>
    <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
             version="3.1">
       
        <servlet>
            <servlet-name>upload</servlet-name>
            <servlet-class>temp.upload</servlet-class>
        </servlet>
        <servlet-mapping>
            <servlet-name>upload</servlet-name>
            <url-pattern>/upload/UploadServlet</url-pattern>
        </servlet-mapping>
    </web-app>

    补充拓展:单继承多实现 。

     

    展开全文
  • 如何实现图片上传-(上传到本地)

    万次阅读 2018-05-09 17:01:54
    图片的上传以及Nginx的使用实现上传图片的回显 1.图片的上传: 图片上传使用的是easyUI的组件,并不是自己实现的. 实现图片上传的前提是配置了文件上传的解析器(applicationContext-mvc.xml): &amp;lt;!-- ...

    图片的上传以及Nginx的使用实现上传图片的回显

    1.图片的上传:

    图片上传使用的是easyUI的组件,并不是自己实现的.
    

    实现图片上传的前提是配置了文件上传的解析器(applicationContext-mvc.xml):

    <!-- 配置文件上传的解析器 -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxUploadSize" value="10485670"></property>
        <property name="defaultEncoding" value="UTF-8"></property>  <!-- 解决文件是中文的问题 -->
    </bean>
    

    1.1 前端的代码:

    kingEditorParams : {
        filePostName  : "uploadFile",
        uploadJson : '/pic/upload',
        dir : "image"
    },
    

    这是前端common.js实现的封装的代码,当一点击开始上传的时候,就是访问的这个路径,会把图片发送给服务端(下面这张图是使用了Nginx反向代理之后实现的图片回显的效果)

    这里写图片描述

    当一点击开始上传之后,会把图片通过post请求发送给服务端,处理请求的路径是/pic/upload,文件上传的名字是uploadFile

    1.2 服务端的实现:

    FileController:具体的业务放在service层

    @Controller
    public class FileController {
    
        @Autowired
        private FileUploadService fileUploadService;
    
    
        @RequestMapping("/pic/upload")
        @ResponseBody
        public PicUploadResult uploadPic(MultipartFile uploadFile) {
            return fileUploadService.uploadPic(uploadFile);
        }
    }
    

    controller层接受请求的参数名字是uploadFile(这个是固定的,前端传过来的),参数的类型是MultipartFile,MultipartFile是一个接口,具体的类型是org.springframework.web.multipart.commons.CommonsMultipartFile,配置的文件上传解析器会将客户端传过来的文件解析成CommonsMultipartFile.

    FileUploadService:

    @Service
    

    public class FileUploadServiceImpl implements FileUploadService {

    /**
     * Spring容器如何动态的获取数据
     * @Value : 实现数据的动态获取
     * 说明:@value 注解可以直接为String或者基本类型赋值
     *     同时,可以利用spring的机制可以为array , list , mapp , set properties 赋值
     * 
     * 注意事项:
     *  1.在SSM框架中,该注解需要依赖@Service注解(Spring容器内部才能使用)  在Controller注解可能不好使
     *      SpringMVC容器  跟 Spring容器  是两个不同的容器
     *  2.如果使用SpringBoot则任何地方都能用
     */
    @Value("${image.localDir}")
    private String localDir;
    @Value("${image.urlPre}")
    private String urlPre;
    
    
    
    @Override
    public PicUploadResult uploadPic(MultipartFile uploadFile) { // 图片上传
        PicUploadResult result = new PicUploadResult();
    
        // 1.判断是否为图片 abc.jpg
        String fileName = uploadFile.getOriginalFilename();
        // 使用正则表达式进行判断
        if (!fileName.matches("^.*(jpg|png|gif)$")) { // . 代表任意的字符 * 代表有任意多个 的
            // 表示不是图片
            result.setError(1);
            return result;
        }
    
        try {
            /**
             * ImageIO是javax下面的一个工具类
             */
            // 2.判断是否为恶意程序 uploadFile.getInputStream() 文件流
            BufferedImage bufferedImage = ImageIO.read(uploadFile.getInputStream());
            // 3.获取图片宽度和高度 (图片宽高为 0 ,则图片是假的图片)
            int height = bufferedImage.getHeight();
            int width = bufferedImage.getWidth();
            if (height == 0 || width == 0) {
                result.setError(1); // 假图片
                return result;
            }
            // 4.准备文件存储的路径()
            // String localDir = "d:/file/"; // 本地文件夹
            // 5.实现分文件存储 yyyy/MM/dd 以 天 为单位 分文件
            String dateDir = new SimpleDateFormat("yyyy/MM/dd").format(new Date());
            // 6.形成保存图片的文件夹 d:/file/yyyy/MM/dd (文件存储的根目录)
            String picDir = localDir + dateDir;
            // 7.生成文件夹
            File picFile = new File(picDir); // 文件夹的文件执行
            if (!picFile.exists()) { // 文件夹不存在 就创建文件夹
                picFile.mkdirs();
            }
            // 8.重命名上传的文件名字 (避免重名)
            String uuid = UUID.randomUUID().toString().replace("-", ""); // asa22exac-adsfafadsf-3fddsfds
            // 生成随机数
            int randomNum = new Random().nextInt(999); // 生成随机数 (0-999)
            // 获取文件的后缀名
            String fileType = fileName.substring(fileName.lastIndexOf(".")); // .jpg
            // 拼文件名
            String realFileName = uuid + randomNum + fileType; // 真实的文件名称
    
            // 9生成文件的本地磁盘的路径 d:/file/yyyy/MM/dd/wqrwadasfiuoew800.jpg
            String localPath = picDir + "/" + realFileName;
    
            // 10实现文件的上传
            uploadFile.transferTo(new File(localPath));
    
            // 11添加文件的宽度,高度 需要返回
            result.setHeight(height + "");
            result.setWidth(width + "");
    
            // 12准备文件的虚拟路径
            // http://image.jt.com/file/2018/05/07/radweedwsaf210.jpg
            // String urlPre = "http://image.jt.com/";
    
            String urlPath = urlPre + dateDir + "/" + realFileName;
            result.setUrl(urlPath);
        } catch (IOException e) { // 不是图片会抛异常
            e.printStackTrace();
            result.setError(1); // 表示为恶意程序
            return result;
        }
        return result;
      }
    }
    

    分析:客户端上传文件,需要先判断上传的文件是不是图片,先使用正则表达式进行第一层过滤,如果正则的验证过了之后,但是可能是伪图片,所以还得使用ImageIO来将上传的文件进行转换成BufferedImage,如果转换失败,那么可能不是图片,转换成功之后,还得获取图片的宽,高,如果宽高任何一个为0,就说明转换之后不是图片,也就说明上传的不是图片.


    如果这些验证都过了,说明上传的文件是图片,那么我们就需要将图片保存起来.由于上传的图片名字是固定的,而且保存的时候如果使用原始的图片名字的话,很可能
    会出现名字冲突的问题,为了尽可能地避免重现保存图片出现冲突的问题,就需要服务端生产随机的名字,这里采用一种更安全的做法,先使用UUID生成一串随机数,
    但是这种方式生成的随机数是根据时间戳来生成的(同一毫秒值生成的uuid随机数可能会一样),所以还得使用Randoom再生成随机的数字,将uuid生成的随机串
    (去掉'-')加上生成的随机数字组成图片的名字,这种情况出现重名的概率比较小
    

    注意拿到了图片文件之后,还需要将图片文件保存,所有的图片都保存在一个大的文件夹下(d:/file),但是这个文件夹路径是不能写死的,得用配置文件进行配置,还有
    一点就是图片的回显需要一个虚拟的路径.图片上传之后,
    

    这里写图片描述

    图片的上传之后的回显是由easyUI来实现的,但是要求是从服务端返回个数据的页面的json数据是有要求的,
    

    {"error":0,"url":"图片的保存路径","width":图片的宽度,"height":图片的高度}

    参数说明: 0代表是一张图片,如果是0,前台才可以解析并显示。1代表不是图片,
    不显示如果不设置宽度和高度,则默认用图片原来的大小,所以不用设置    
    

    返回的就是 PicUploadResult

    public class PicUploadResult {
        private Integer error=0;        //图片上传错误不能抛出,抛出就无法进行jsp页面回调,所以设置这个标识,0表示无异常,1代表异常
        private String url;
        private String width;
        private String height;
    ~~~ 此处省略get,set方法
    

    这个返回的对象里面的url需要在服务端进行封装,封装的就是easyUI实现回显图片的虚拟路径,这个url是虚拟路径:

    理解这个url(虚拟路径) : 图片有专门的图片服务器,图片的存储也是在专门的服务器里面,异常easyUI要进行图片的回显,就需要访问图片服务器.目前我们这个
    项目保存图片是保存在d:file里面,目前的水平只能做到保存在本机(还做不到保存在别的服务器),但是做图片回显的时候,我们就希望模拟实现那种跨服务器的
    图片访问(现在用的是同一台主机),所以返回的url是一个虚拟路径,http://image.jt.com/.这就相当于当图片回显时,访问的是这个域名下的图片.
    

    为了实现程序的可扩展性,可以把两个变量写在配置文件里面,一个是localDir(图片保存的本地根目录),还有一个是urlPre(图片回显时需要访问的网址)

    这里写图片描述

    有了这个properties配置文件之后,好需要加载这个配置文件(在applicationContext里面进行加载)

        <bean id="placeholderConfigurer" class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">
            <!-- 设定参数  Resource[] locations  数组类型 -->
            <property name="locations">
                <!-- 可以加多个 -->
                <list>
                    <value>classpath:/properties/jdbc.properties</value>
                    <value>classpath:/properties/image.properties</value>
                </list>  <!-- 或者array -->
            </property>
        </bean>
    

    这样在service层就可以直接使用@Value()注解进行动态地赋值注入了

    展开全文
  • JavaScript实现图片上传并预览并提交ajax(完整demo)

    万次阅读 多人点赞 2019-04-10 15:21:19
    图片上传并预览HTML<div class="file-box"> 预览"> ,imag
  • 使用Vue实现图片上传的三种方式

    万次阅读 2019-03-06 19:26:48
    项目中需要上传图片可谓是经常遇到的需求,本文将介绍 3 种不同的图片上传方式,在这总结分享一下,有什么建议或者意见,请大家踊跃提出来。 没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务场景...
  • 图片上传并预览

    万次阅读 2018-08-05 09:24:29
    思路:完成这个功能,首先需要美化上传图片的按钮,然后添加一个&lt;img/&gt;标签,在图片上传之后,用新图片的src替换原来&lt;img/&gt;标签中的src。 如下图所示,是原始的按钮样式: 美化步骤...
  • 多文件或多图片同时上传到服务器

    千次阅读 2018-06-28 20:36:10
    项目背景:jeesite 开发环境,目的类型于比如卖二手手机的时候我们在咸鱼上,写一些它的基本情况和上传多个图片。在后台可以显示在列表中,当然是多个图片都要显示,查看详情的时候也需要进行排列展示。由于之前开发...
  • 如何实现上传图片并显示图片?

    千次阅读 2020-07-04 21:55:33
    如何实现上传图片并显示图片? 平时在注册或者填写完整个人信息的时候都会遇见上传个人图片的情况,那么你有没有想过这个该如何实现的呢?在以前还没有学到这个知识之前,就觉得好神奇,在网上居然能做到上传图片的...
  • input上传图片并预览

    万次阅读 多人点赞 2017-10-24 20:12:05
    大家都知道上传文件,图片是通过input 的file进行上传的。 1. 首先是样式 大家都知道input在HTML的代码为 ;在页面的样式是不可以更改的,如下图 但是最为一个投机取巧的前端,一切样式都是可以修改的。 ...
  • 调用微信JS-SDK接口上传图片

    万次阅读 多人点赞 2020-07-04 18:54:13
    最近要在微信上做个问卷调查,有个上传图片功能,折腾找了半天资料,都不好弄,最终打算调用微信提供的上传图片接口,实现上传图片功能!此功能最大的好处是可以在微信服务器上暂存图片,减少本地服务器图片的缓存,...
  • Vue实现上传图片

    万次阅读 2019-04-04 09:30:49
    因公司项目需求,在原有的项目基础页面添加一个上传图片的功能。随时百度一波但是实现的功能却状况百出,上传图片前需对图片进行截取和压缩,转换为二进制等一系列操作 1、未上传图片时显示的内容 2、上传完成现实...
  • 测试用例-上传图片

    千次阅读 2019-04-22 14:12:30
    上传图片 图片功能测试 图片默认打开位置测试-是否是电脑桌面 选择符合要求的图片上传–上传成功 上传成功的图片名称显示–显示正常(根据需求) 查看,下载上传成功的图片–上传的图片可查看或下载 删除上传成功...
  • html上传图片后,在页面显示上传的图片1、html &lt;form class="container" enctype="multipart/form-data" method="post" id='formBox' name="form"&gt; &...
  • jsp+servlet实现上传图片

    万次阅读 多人点赞 2017-12-22 11:37:59
    图片的上传是一个网站非常重要的功能,之前一直用框架做图片上传,却忽略了最基本的servlet方式上传图片,今天好好研究了一番,做个记录。 首先需要明白的一点是:我们在工作空间新建一个web项目,图片上传究竟...
  • Android上传图片的方式

    万次阅读 2017-11-03 16:19:37
    Android上传图片并附带数据使用文件流 关于Android图片上传的两种方式,一种是文件流的方式上传,图片转换成二进制上传;另一种是把图片转成Base64方式上传. 1.文件流上传图片、(图片上传需要一个图片的路径,...
  • Android 上传图片到JavaWeb服务器

    万次阅读 多人点赞 2016-05-19 16:05:50
    前言:在上一篇博客《Android 拍照、选择图片并裁剪》中主要说明了在Android中图片裁剪的一种方式,当然我们裁剪...或者上传图片到服务器的时候即携带用户信息,这样一次网略请求就可以搞定了。要根据不同的需求灵活
  • 一般网站上传图片的大小是多少呢?尚网汇智给您列一下网站图片上传格式大小建议: 首先,上传图片格式: 通常图片以JPG图片居多,JPG格式的图片较小,图片也比较柔和 不过特殊情况就要用特殊格式的图片了 如1:...
  • 关于HTML中上传图片

    千次阅读 2020-08-31 15:56:20
    关于HTML中上传图片 值得注意的是:当一个表单里面包含这个上传元素的时候,表单的enctype必须指定为multipart/form-data,method必须指定为post,浏览器才会认识并正确执行。但是还有一点,浏览器只允许用户点击&...
  • 华为 mate8 拍照上传图片失败

    千次阅读 2018-04-16 16:51:43
    华为 mate8 拍照上传图片失败 问题描述 在上传图片时,华为 mate8 掉起相册可以正常上传,但是掉起相机拍照片时,上传失败(仅限于原生浏览器)。场景:咨询流程上传图片,上传检查检验 解决方案 通过 ...
1 2 3 4 5 ... 20
收藏数 409,541
精华内容 163,816
关键字:

上传图片