图片上传_图片上传预览 - CSDN
精华内容
参与话题
  • 如何实现上传图片并显示图片

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

    如何实现上传图片并显示图片?

    平时在注册或者填写完整个人信息的时候都会遇见上传个人图片的情况,那么你有没有想过这个该如何实现的呢?在以前还没有学到这个知识之前,就觉得好神奇,在网上居然能做到上传图片的效果,而现在自己学到了就觉得就几个步骤而已,所以学到了就觉得蛮简单,并没有我们想象中的那么困难。
    如何实现的呢?
    以上传员工图片为例:首先要设置一个img标签和一个input标签,而这两个标签是有相连的地方的,img标签是用来设置图片的大小,而input标签隐藏起来,当双击img标签的时候,input标签也执行起来,弹出文件框,选择要上传的图片。

    @* ondblclick 为双击事件,onchange是当元素发生改变时触发 *@
    <img width="250" height="280" src="" alt="" id="IsImgEmployeePicture" style= "border:1px solid #999;" ondblclick="chooseImageFile('EmployeePicture')"/>
    <input type="file" name="fileEmployeeImage" id="EmployeePicture" hidden accept="image/*" onchange="showImgToView('EmployeePicture')"/>
    

    上面的两句代码之间是通过EmployeePicture进行相连的,这样之间就可以关联起来,实现上传图片的方法不只是靠这两句代码就可以了,还有要写点击的方法。
    步骤: 1、先打开file文件表单选择图片;2、创建FileReader对象 ,用正则表达式过滤图片文件;3、利用改变事件将图片显示出来;4、读取文件,将url绑定到img标签的src属性上。
    详细: 1、chooseImageFile方法:
    在这里插入图片描述
    2、创建FileReader对象:
    在这里插入图片描述
    正则表达式 过滤图片文件:

    regexImageFile=/^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
    

    补:FileReader对象允许Web应用程序来异步读取存储在用户计算机上的文件里面的内容,使用File或者Blob对象指定要读取的文件或数据,其中结合input:file可以很方便的读取本地文件里面的内容。

    3、利用改变事件将图片显示出来:
    在这里插入图片描述
    readAsDataURL()方法是FileReader对象里面的方法,其作用为可以获取API异步读取的文件数据,将图片另存为数据Url,还可以实现图片上传预览的效果,让用户确认是否就是上传这张图片,提升用户体验。
    4、读取文件
    在这里插入图片描述
    实现上传图片就这四个步骤,其实就是在FileReader这里是关键的节点,因为FileReader有读取文件的作用,你也可以尝试去上传一下自己的图片。
    源码
    注意:在这里需要引用一个jQuery插件才能使用

    
    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>上传图片</title>
    </head>
    <body>
        <div> 
            @* ondblclick 为双击事件,onchange是当元素发生改变时触发 *@
            <img src="" alt="" id="IsImgEmployeePicture" style="border:1px solid #999;display: block;width: 300px;height: 300px;" onclick="chooseImageFile('EmployeePicture')" />
            <input type="file" name="fileEmployeeImage" id="EmployeePicture" hidden accept="image/*" onchange="showImgToView('EmployeePicture')" />
        </div>
        <script src="~/Scripts/jquery-3.4.1.min.js"></script>
        <script>
    
            //1、单击调用chooseImageFile方法
            function chooseImageFile(inputFileID) {
                $("#" + inputFileID).click();   //模拟点击EmployeePicture(input),出发showImgToView()方法
            }
    
            //2、创建FileReader对象
            var fileReader = new FileReader();
            //正在判断是否符合图片类型
            regexImageFile = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
    
            //3、利用改变事件将图片显示出来
            function showImgToView(inputFileId) {
                //选择图片文件
                var imgFile = $("#" + inputFileId).get(0).files[0];
                //判断上传文件是否为图片格式
                if (!regexImageFile.test(imgFile.type)) {
                    return;
                } else {
                    //将文件读取为DataURL
                    fileReader.readAsDataURL(imgFile);
                }
            }
    
            //4、读取文件
            fileReader.onload = function (evt) {
                //将该URL绑定到img标签的src属性上,就可以实现图片的上传预览效果
                $("#IsImgEmployeePicture").attr("src", evt.target.result);
            }
    
        </script>
    </body>
    </html>
    
    
    展开全文
  • 毕竟只是一个新手,解决这种复杂点的问题(相对而言),还是需要花费大量时间的,这篇文章花了两天的时间才实现的功能,现在就记录一下使用springboot怎么实现文件上传下载的。 我这里使用的是 springboot 2.0.3,...

    我先看一下《颈椎病康复指南》再给大家说怎么实现的这两个功能,毕竟只是一个新手,解决这种复杂点的问题(相对而言),还是需要花费大量时间的,这篇文章花了两天的时间才实现的功能,现在就记录一下使用springboot怎么实现文件上传下载的。

    我这里使用的是 springboot 2.0.3,不需要导入相关jar包,2.x 的版本已经整合进去了,直接使用即可。

    spring官网提供了 springboot 的文件上传下载案例,这是网址:https://spring.io/guides/gs/uploading-files/,使用的是流的输出,对于我这个新手来说,直接不理解,所以略过,通过网上查阅大量资料,终于把问题解决了。下面的案例是 springboot2.x 图片上传与回显。我使用的工具是idea。

    1、创建idea默认的springboot项目,我的版本是2.0.3

    2、创建一个控制层FileController

    package com.rainy.controller;
    
    import org.apache.catalina.servlet4preview.http.HttpServletRequest;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.PostMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.multipart.MultipartFile;
    
    import java.io.*;
    import java.util.UUID;
    
    /**
     * 文件上传
     */
    @Controller
    public class FileController {
    
        @GetMapping(value = "/file")
        public String file() {
            return "file";
        }
    
        @PostMapping(value = "/fileUpload")
        public String fileUpload(@RequestParam(value = "file") MultipartFile file, Model model, HttpServletRequest request) {
            if (file.isEmpty()) {
                System.out.println("文件为空空");
            }
            String fileName = file.getOriginalFilename();  // 文件名
            String suffixName = fileName.substring(fileName.lastIndexOf("."));  // 后缀名
            String filePath = "D://temp-rainy//"; // 上传后的路径
            fileName = UUID.randomUUID() + suffixName; // 新文件名
            File dest = new File(filePath + fileName);
            if (!dest.getParentFile().exists()) {
                dest.getParentFile().mkdirs();
            }
            try {
                file.transferTo(dest);
            } catch (IOException e) {
                e.printStackTrace();
            }
            String filename = "/temp-rainy/" + fileName;
            model.addAttribute("filename", filename);
            return "file";
        }
    }
    

    3、创建MyWebMvcConfigurer,这里是配置资源映射路径,详细点的介绍看这篇文章:https://blog.csdn.net/qq_38762237/article/details/81283241

    /**
     * 资源映射路径
     */
    @Configuration
    public class MyWebAppConfigurer implements WebMvcConfigurer {
        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) {
            registry.addResourceHandler("/temp-rainy/**").addResourceLocations("file:D:/temp-rainy/");
        }
    }
    

    4、jsp页面

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Title</title>
    </head>
    <body>
        <form action="/fileUpload" method="post" enctype="multipart/form-data">
            <label>上传图片</label>
            <input type="file" name="file"/>
            <input type="submit" value="上传"/>
        </form>
        <p>图片:</p>
        <img src="${filename }"/>
    </body>
    </html>
    
    

    注意一点:我是使用jsp引擎来渲染,因为我不会用 Thymeleaf,添加jsp页面,springboot使用jsp页面是需要进行配置jsp整合的,默认的是 Thymeleaf 的页面,简单的就是HTML页面

    springboot配置jsp页面的方法:https://blog.csdn.net/qq_38762237/article/details/81283352

    这里写图片描述

    如果有什么问题的话,可以告诉我,QQ:3210054449,或者评论留言,这是我的首页:https://blog.csdn.net/qq_38762237,都是我在学习过程中遇到的一些问题做的记录。、

    交流

    在这里插入图片描述

    展开全文
  • 图片上传的两种方式

    千次阅读 2017-10-20 14:46:40
    总的说图片上传有两种方式,一种是把图片文件写到数据库中,另一种是存到服务器文件目录中。写到数据库中的图片文件需要转换成二进制流的格式,占用数据库空间比较多,适合少量图片的存储,比如说,系统中某些小图标...

    总的说图片上传有两种方式,一种是把图片文件写到数据库中另一种是存到服务器文件目录中。写到数据库中的图片文件需要转换成二进制流的格式,占用数据库空间比较多,适合少量图片的存储,比如说,系统中某些小图标,写到数据库中的优点是比较安全,不容易被用户不小心删除。

      如果是大量的图片的存储通常的做法是保存到服务器的某个文件夹中。而完成上传有很多方式,可以采用流的方式,可以采用ftp的方式,这里采用fileupload方式。

      随着系统规模的不同,对图片文件的处理方式也不尽相同。如果系统中图片的数量不是很大,直接把所有的图片存储到同一个目录下即可。如果图片的积累比较多,可以根据物资分类对图片进行相应的分类储存,这样会节省一些在磁盘中查找文件的时间。

     图片上传到文件中,可以直接上传图片到目录中,也还可以将图片文件名、文件路径写入到数据库中,也可以在程序中动态的创建文件路径。如果公司中要求图片要用专门的服务器存放,这时候把文件路径写活还是比较合适的。一般的如果一种物资(物料)对应一张图片是比较容易处理的。如果对应多张图片,处理起来就需要配合循环使用。一方面,需要处理图片的动态显示,另一方面要检查图片文件命名是否重复。另外再图片处理(上传、删除、修改)的时候需要配合事务。

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

    万次阅读 2018-08-05 09:24:29
    标签,在图片上传之后,用新图片的src替换原来&lt;img/&gt;标签中的src。 如下图所示,是原始的按钮样式: 美化步骤: (1)将上传图片标签采用绝对定位,使之位于一个图片,按钮,div等标签上。或者给...

    思路:完成这个功能,首先需要美化上传图片的按钮,然后添加一个<img/>标签,在图片上传之后,用新图片的src替换原来<img/>标签中的src。

    如下图所示,是原始的按钮样式:

    美化步骤:

    (1)将上传图片标签采用绝对定位,使之位于一个图片,按钮,div等标签上。或者给图片,按钮或div设置绝对定位,总之,是要让上传文件按钮和用户指定的按钮重合。

    (2)给上传图片标签设置大大小,使之和与它重叠的图片,按钮,div等标签大小一致。

    (3)我将此标签设置为透明:opacity:0;

    如下图所示,是两种美化后的上传图片按钮:

                           

    接下来是完成图片预览的功能,步骤:

    (1)首先需要定义好一个<img>,src为空或者是默认图片,

    (2)如果src为空,就给定义好的img设置为透明:opacity:0;如果不是透明的话,会显示一个图片的标志,不美观。

    (3)点击上传图片后,获取上传的图片的src,将它赋值给事先定义好的<img>,再给<img>设置opacity:1;

    接下来为具体的代码示例。


     示例一:将图片上传到点击的位置。(此示例中使用了AUI框架,但不影响此功能。)

    HTML代码:

    <div id="imgPreview">
        <div id="prompt3">
    	<span id="imgSpan">
    	   点击上传
               <br />
    	   <i class="aui-iconfont aui-icon-plus"></i>
               <!--AUI框架中的图标-->
    	</span>
    	<input type="file" id="file" class="filepath" onchange="changepic(this)" accept="image/jpg,image/jpeg,image/png,image/PNG">
           <!--当vaule值改变时执行changepic函数,规定上传的文件只能是图片-->
        </div>
        <img src="#" id="img3" />
    </div>
    

     CSS代码:

    #imgPreview {
    	width: 40%;
    	height: 180px;
    	margin: 10px auto 0px auto;
    	border: 1px solid black;
    	text-align: center;
    }
    #prompt3 {
    	width: 100%;
    	height: 180px;
    	text-align: center;
    	position: relative;
    }
    #imgSpan {
    	position: absolute;
    	top: 60px;
    	left: 40px;
    }
    .filepath {
    	width: 100%;
    	height: 100%;
    	opacity: 0;
    }
    #img3 {
    	height: 100%;
    	width: 100%;
    	display: none;
    }
    

     JS代码:

    function changepic() {
    	$("#prompt3").css("display", "none");
    	var reads = new FileReader();
    	f = document.getElementById('file').files[0];
    	reads.readAsDataURL(f);
    	reads.onload = function(e) {
    	   document.getElementById('img3').src = this.result;
    	   $("#img3").css("display", "block");
    	};
    }
    

     效果如下图所示:

          


    示例二:将图片上传到点击按钮旁边的位置。(此示例中使用了阿里巴巴矢量图标库,但不影响此功能。)

    HTML代码:

    <div class="aui-col-xs-3" id="img">
        <svg class="icon bigIcon" aria-hidden="true">
    	<use xlink:href="#icon-msnui-add"></use>
        </svg>
       <!--阿里巴巴矢量图标,就是最后效果图中的“+”图标-->
       <div class="aui-grid-label">添加图片</div>
       <div id="upImg">
           <input type="file" name="file" id="chooseImage" />
       </div>
       <div id="imgPreview">
           <img src="#" id="cropedBigImg" />
       </div>
    </div>
    

     CSS代码:

    #img {
    	float: left;
    	margin-left: 20px;
    	width: 150px;
    	height: 60px;
    	}
    #upImg {
    	position: absolute;
    	top: 0px;
    	left: 0px;
    }
    #upImg input {
    	width: 70px;
    	height: 60px;
    	opacity: 0;
    }
    #imgPreview {
    	width: 80px;
    	height: 60px;
    	position: absolute;
    	left: 70px;
    	top: 0px;
    }
    #cropedBigImg{
    	width: 100%;
    	height: 100%;
    	display: none;
    }
    

     JS代码:

    $('#chooseImage').on('change', function() {//当chooseImage的值改变时,执行此函数
    	var filePath = $(this).val(), //获取到input的value,里面是文件的路径
    	fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
    	src = window.URL.createObjectURL(this.files[0]); //转成可以在本地预览的格式
    
    	// 检查是否是图片
    	if(!fileFormat.match(/.png|.jpg|.jpeg/)) {
    	        error_prompt_alert('上传错误,文件格式必须为:png/jpg/jpeg');
    		return;
    	}else{
    		$('#cropedBigImg').css('display','block');
    		$('#cropedBigImg').attr('src', src);		 
    	}		
    });
    

    效果如下图所示:

        

     本人为JS实习生一枚,不断学习,不断进步,欢迎各位前辈批评指教。

    展开全文
  • 在很多的网站都可以实现上传头像,可以选择自己喜欢的图片做头像,从本地上传,下次登录时可以直接显示出已经上传的头像,那么这个是如何实现的呢?   下面说一下我的实现过程(只是个人实现思路,实际网站怎...
  • input上传图片并预览

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

    万次阅读 多人点赞 2017-12-06 17:59:43
    最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能。虽然现在有很多的插件能实现,但是还是觉得自己写比较好。我们知道,图片上传需要一个input:file表单 当我们点击表单的时候提示选择需要...
  • html上传图片后,在页面显示上传图片1、html &lt;form class="container" enctype="multipart/form-data" method="post" id='formBox' name="form"&gt; &...
  • h5页面图片上传

    万次阅读 2018-01-22 15:01:47
    图片上传采用的是 input框的 type=file 的方式进行图片的上传。下面三种样式都是 input方式进行图片上传的。 我们点击上传图片的时候,图片上传到后台。首先给大家一个单张图片上传的示例 html: div ...
  • 如何实现图片上传-(上传到本地)

    万次阅读 2018-05-09 17:01:54
    图片上传使用的是easyUI的组件,并不是自己实现的. 实现图片上传的前提是配置了文件上传的解析器(applicationContext-mvc.xml): &amp;lt;!-- 配置文件上传的解析器 --&amp;gt; &amp;lt;bean id=&...
  • JavaScript实现图片上传并预览并提交ajax(完整demo)

    万次阅读 多人点赞 2019-04-10 15:21:19
    图片上传并预览HTML<div class="file-box"> 预览"> ,imag
  • 淘淘商城第27讲——实现图片上传功能

    万次阅读 热门讨论 2020-07-12 10:21:10
    本文将花大量笔墨来教大家如何实现图片上传这个功能。 我们来看下item-add.jsp页面,可以看到上传图片触发的方法是通过叫做picFileUpload的class来处理的,在标签的下方是一个隐藏域,是用来接收图片上传到图片...
  • 微信小程序开发(二)图片上传+服务端接收

    万次阅读 多人点赞 2019-04-13 16:06:22
    文/YXJ ... 上次介绍了小程序开发中的微信登录。...这次介绍下小程序当中常用的图片上传。 前几天做了图片上传功能,被坑了一下。接下来我们来看一下微信的上传api。这里的filePath就是图片的存储路径,类型居然是个St
  • java的图片上传详解

    万次阅读 2020-10-15 21:54:08
    近期,由于项目需求需要上传图片logo,笔者在探索的过程中遇到过很多坑,今晚就把个人经验分享出来尽量少让博友们脑壳疼 2.准备工作 ①选择一个专门存储图片的服务器,这里笔者选择了第三方七牛云存储,真心感觉...
  • java实现图片上传功能,并返回图片保存路径

    万次阅读 多人点赞 2019-07-02 16:44:24
    1、前端html <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">身份证正面照片:</label>...div class="col-sm-10">...input type="hidden" name...
  • UEditor之实现配置简单的图片上传示例

    万次阅读 多人点赞 2018-02-01 23:19:19
    开心一笑 下班后,阿华到楼下小超市买毛巾,刚买完出来,就遇到同一办公楼里另一家公司的阿菲,之前与她远远的有过几次眼神交流,但从没说过话,“买毛巾啊”,看着阿华手里的毛巾,阿菲先开口了。...
  • Vue +Element UI 图片上传控件使用

    万次阅读 多人点赞 2020-08-25 16:40:09
    上一篇 Vue +Element UI +vue-quill-editor 富文本编辑器及插入图片自定义主要是写了富文本编辑器的自定义及编辑器中图片的上传并插入到编辑内容,这篇文章单独介绍一下element UI 图片上传控件的使用。首先要安装...
  • 之前做过一个项目,有一个功能是图片上传并且展示图片,尝试过其他的方法,但会有一个问题,那就是在IE8上图片并不能正常展示,所以便用以下方法来上传图片,很好的解决了此问题,步骤如下: 1.上传图片页面index....
  • HTML5 Plus 拍照或者相册选择图片上传

    万次阅读 多人点赞 2018-12-12 09:29:18
    HBuilder+HTML5 Plus+MUI实现拍照或者相册选择图片上传,利用HTML5 Plus的Camera、Gallery、IO、Storage和Uploader来实现手机APP拍照或者从相册选择图片上传。Camera模块管理设备的摄像头,可用于拍照、摄像操作,...
  • CKEditor图片上传实现详细步骤(使用Struts 2)

    万次阅读 多人点赞 2014-09-18 15:13:21
    CKEditor的编辑器工具栏中有一项“图片域”,该工具可以贴上图片地址来在文本编辑器中加入图片,但是没有图片上传。 “预览”中有一大堆鸟语,看得很不爽。可以打开ckeditor/plugins/image/dialogs/image.js文件...
1 2 3 4 5 ... 20
收藏数 419,743
精华内容 167,897
关键字:

图片上传