精华内容
参与话题
问答
  • 如何实现上传图片并显示图片

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

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

    平时在注册或者填写完整个人信息的时候都会遇见上传个人图片的情况,那么你有没有想过这个该如何实现的呢?在以前还没有学到这个知识之前,就觉得好神奇,在网上居然能做到上传图片的效果,而现在自己学到了就觉得就几个步骤而已,所以学到了就觉得蛮简单,并没有我们想象中的那么困难。
    如何实现的呢?
    以上传员工图片为例:首先要设置一个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>
    
    
    展开全文
  • 在很多的网站都可以实现上传头像,可以选择自己喜欢的图片做头像,从本地上传,下次登录时可以直接显示出已经上传的头像,那么这个是如何实现的呢?   下面说一下我的实现过程(只是个人实现思路,实际网站怎...

    题外话:推荐一个专注于Java开发的网站,做提升学习,价值阅读:Java知音

    同时,扫码关注后端技术精选,回复“学习资料”,领取100套小程序源码+小程序开发视频和基本Java经典书籍电子版


    在很多的网站都可以实现上传头像,可以选择自己喜欢的图片做头像,从本地上传,下次登录时可以直接显示出已经上传的头像,那么这个是如何实现的呢?

     

    下面说一下我的实现过程(只是个人实现思路,实际网站怎么实现的不太清楚)

    实现的思路:

    工具:MySQL,eclipse

    首先,在MySQL中创建了两个表,一个t_user表,用来存放用户名,密码等个人信息,

    一个t_touxiang表,用来存放上传的图片在服务器中的存放路径,以及图片名字和用户ID,

    T_touxiang表中的用户ID对应了t_user中的id。

     

    t_user表SQL:

    DROP TABLE IF EXISTS `t_user`;
    CREATE TABLE `t_user` (
      `id` int(10) NOT NULL AUTO_INCREMENT,
      `username` varchar(20) NOT NULL,
      `password` varchar(255) NOT NULL,
      PRIMARY KEY (`id`),
      UNIQUE KEY `username` (`username`)
    ) ENGINE=InnoDB AUTO_INCREMENT=22 DEFAULT CHARSET=utf8;
    

     

    T_touxiang表SQL:

     

    DROP TABLE IF EXISTS `t_touxiang`;
    CREATE TABLE `t_touxiang` (
      `id` int(10) NOT NULL AUTO_INCREMENT,
      `image_path` varchar(255) DEFAULT NULL,
      `user_id` int(11) DEFAULT NULL,
      `old_name` varchar(255) DEFAULT NULL,
      PRIMARY KEY (`id`),
      KEY `img_user` (`user_id`),
      CONSTRAINT `img_user` FOREIGN KEY (`user_id`) REFERENCES `t_user` (`id`)
    ) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;
    

     

    首先,写一个UploadServlet.java,用来处理图片文件的上传,并将图片路径,图片名称等信息存放到t_touxiang数据表中,代码如下:

     

    @WebServlet("/UploadServlet.do")
    public class UploadServlet extends HttpServlet {
        private static final long serialVersionUID = 1L;
    
        protected void service(HttpServletRequest request, HttpServletResponse response)
    	    throws ServletException, IOException {
    	// 判断上传表单是否为multipart/form-data类型
    	HttpSession session = request.getSession();
    	User user = (User) session.getAttribute("user"); // 在登录时将 User 对象放入了 会话
    							 // 中
    
    	if (ServletFileUpload.isMultipartContent(request)) {
    
    	    try {
    		// 1. 创建DiskFileItemFactory对象,设置缓冲区大小和临时文件目录
    		DiskFileItemFactory factory = new DiskFileItemFactory();
    		// System.out.println(System.getProperty("java.io.tmpdir"));//默认临时文件夹
    
    		// 2. 创建ServletFileUpload对象,并设置上传文件的大小限制。
    		ServletFileUpload sfu = new ServletFileUpload(factory);
    		sfu.setSizeMax(10 * 1024 * 1024);// 以byte为单位 不能超过10M 1024byte =
    						 // 1kb 1024kb=1M 1024M = 1G
    		sfu.setHeaderEncoding("utf-8");
    
    		// 3.
    		// 调用ServletFileUpload.parseRequest方法解析request对象,得到一个保存了所有上传内容的List对象。
    		@SuppressWarnings("unchecked")
    		List<FileItem> fileItemList = sfu.parseRequest(request);
    		Iterator<FileItem> fileItems = fileItemList.iterator();
    
    		// 4. 遍历list,每迭代一个FileItem对象,调用其isFormField方法判断是否是上传文件
    		while (fileItems.hasNext()) {
    		    FileItem fileItem = fileItems.next();
    		    // 普通表单元素
    		    if (fileItem.isFormField()) {
    			String name = fileItem.getFieldName();// name属性值
    			String value = fileItem.getString("utf-8");// name对应的value值
    
    			System.out.println(name + " = " + value);
    		    }
    		    // <input type="file">的上传文件的元素
    		    else {
    			String fileName = fileItem.getName();// 文件名称
    			System.out.println("原文件名:" + fileName);// Koala.jpg
    
    			String suffix = fileName.substring(fileName.lastIndexOf('.'));
    			System.out.println("扩展名:" + suffix);// .jpg
    
    			// 新文件名(唯一)
    			String newFileName = new Date().getTime() + suffix;
    			System.out.println("新文件名:" + newFileName);// image\1478509873038.jpg
    
    			// 5. 调用FileItem的write()方法,写入文件
    			File file = new File("D:/lindaProjects/mySpace/wendao/WebContent/touxiang/" + newFileName);
    			System.out.println(file.getAbsolutePath());
    			fileItem.write(file);
    
    			// 6. 调用FileItem的delete()方法,删除临时文件
    			fileItem.delete();
    
    			/*
    			 * 存储到数据库时注意 1.保存源文件名称 Koala.jpg 2.保存相对路径
    			 * image/1478509873038.jpg
    			 * 
    			 */
    			if (user != null) {
    			    int myid = user.getId();
    			    String SQL = "INSERT INTO t_touxiang(image_path,user_id,old_name)VALUES(?,?,?)";
    			    int rows = JdbcHelper.insert(SQL, false, "touxiang/" + newFileName, myid, fileName);
    			    if (rows > 0) {
    				session.setAttribute("image_name", fileName);
    				session.setAttribute("image_path", "touxiang/" + newFileName);
    				response.sendRedirect(request.getContextPath() + "/upImage.html");
    			    } else {
    
    			    }
    
    			} else {
    			    session.setAttribute("loginFail", "请登录");
    			    response.sendRedirect(request.getContextPath() + "/login.html");
    			}
    
    		    }
    		}
    
    	    } catch (FileUploadException e) {
    		e.printStackTrace();
    	    } catch (Exception e) {
    		e.printStackTrace();
    	    }
    
    	}
        }
    }
    

     

    在完成图片上传并写入数据库的同时,将图片路径通过session的方式发送到HTML界面

     

     

    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <meta charset="UTF-8">
    
    <title>更换头像</title>
    
    </head>
    
    <body>
    
             <formaction="UploadServlet.do" method="post"enctype="multipart/form-data">
    
                         本地目录:<inputtype="file" name="uploadFile">
    
               <img src="${image_path}" width="200" height="200">
    
                    <inputtype="submit" value="上传头像"/>
    
       </form>
    
    </body>
    
    </html>

     

    至此,图片上传数据库和本地服务器已经实现,那么如何在HTML界面显示出个人信息以及上传的头像呢?

     

     

    首先定义一个PersonServlet类,用来读取数据库的内容,并发送到HTML界面。

    代码如下:

    @WebServlet("/persons.do")
    public class PersonServlet extends HttpServlet {
    
        private static final long serialVersionUID = -800352785988546254L;
    
        protected void service(HttpServletRequest request, HttpServletResponse response)
    	    throws ServletException, IOException {
    	// 判断上传表单是否为multipart/form-data类型
    	Touxiang tx=null;
    	
    	HttpSession session = request.getSession();
    	User user = (User) session.getAttribute("user"); // 在登录时将 User 对象放入了 会话
    	if(user!=null){
    	    int myid=user.getId();
    	    String SQL="SELECT id,image_path,old_name FROM t_touxiang WHERE user_id=?";
    	    ResultSet rs=JdbcHelper.query(SQL,myid);
    	    String uSQL="SELECT username,password FROM t_user WHERE id=?";
    	    ResultSet urs=JdbcHelper.query(uSQL,myid);
    	    System.out.println( "我的个人id是: " + myid);
    	    final List<Touxiang> touxiang=new ArrayList<>();
    	    try {
    		if(rs.next())
    		{
    		    tx=new Touxiang();
    		    tx.setId(rs.getInt(1));
    		    tx.setImage_path(rs.getString(2));
    		    tx.setOld_name(rs.getString(3));
    		    touxiang.add(tx);
    		}
    		if(urs.next()){
    		    user.setUsername(urs.getString(1));
    		    user.setPassword(urs.getString(2));
    		    user.setTouxiang(touxiang);
    		}
    		
    	    } catch (SQLException e) {
    		// TODO Auto-generated catch block
    		e.printStackTrace();
    	    }
    	   
    		session.setAttribute("user", user);
    		System.out.println( "我的id: " + myid);
    		response.sendRedirect( request.getContextPath() + "/person.html");
    	}
        }
    }
    

     

    在HTML界面接收信息,并显示出来,代码如下:

     

    <div>
    	<form action="UploadServlet.do" method="post" enctype="multipart/form-data">
          		 <div><a href="$path/upImage.html">更换头像</a></div>
            	
            	#foreach( $ut in  $user.getTouxiang() )
            	 <img src=" $ut.getImage_path()"  width="200" height="200">
            	 #end
            	 <div>我的头像:</div>
            	 <div>我的姓名:$user.getUsername()</div>
            	 <div><a href="$path/myAnswer.do">我的解答</a></div>
    		<div><a href="$path/myQuestion.do">我的提问</a></div>
       	 </form>
    	</div>
    <div>
    	<form action="UploadServlet.do" method="post" enctype="multipart/form-data">
          		 <div><a href="$path/upImage.html">更换头像</a></div>
            	
            	#foreach( $ut in  $user.getTouxiang() )
            	 <img src=" $ut.getImage_path()"  width="200" height="200">
            	 #end
            	 <div>我的头像:</div>
            	 <div>我的姓名:$user.getUsername()</div>
            	 <div><a href="$path/myAnswer.do">我的解答</a></div>
    		<div><a href="$path/myQuestion.do">我的提问</a></div>
       	 </form>
    	</div>

     

    至此,一个基于Java的头像上传服务器,路径存储在MySQL,并在HTML界面读取出来的功能就基本实现了。头像上传之前进行处理等操作,可以选择一些插件来完成。这里只是简单的实现了基本功能。

     

     

    补充

    对于图片上传,这里只是简单的用Servlet实现了一下最基本的功能,仅提供思路。如果使用spring等框架,他都对图片上传做了很好的封装,应该更加容易。

    后台实现图片上传应该来说比较容易,但是比较头疼的是图片上传原生的按钮丑出天际,这里推荐俩实用的上传控件,应该算比较好看。

     

    1,H5实现的图片上传,可多张上传,可点击可拖拽上传,大概是这个样子:

    基本的使用介绍和下载地址:http://blog.csdn.net/weixin_36380516/article/details/70352689

     

    2,jQuery图像裁剪插件,大概长这样

     

    不仅提供上传,还有裁剪等功能,UI做的也美,

    地址:http://www.jq22.com/jquery-info318

     

    展开全文
  • 毕竟只是一个新手,解决这种复杂点的问题(相对而言),还是需要花费大量时间的,这篇文章花了两天的时间才实现的功能,现在就记录一下使用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,都是我在学习过程中遇到的一些问题做的记录。、

    交流

    在这里插入图片描述

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

    万次阅读 2018-08-05 09:23:00
    标签,在图片上传之后,用新图片的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实习生一枚,不断学习,不断进步,欢迎各位前辈批评指教。

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

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

    千次阅读 2018-10-23 22:28:42
    图片回显和选择图片预览: 点击图片展示: 功能实现 以下功能亲测,部分样式和js根据情况自行调整 &lt;%-- Created by IntelliJ IDEA. User: yutyi Date: 2018/9/3 Time: 22:44 To change this template ...
  • 【ASP.NET 基础】图片上传和显示

    千次阅读 2018-09-24 09:54:41
    由于需要图片上传的功能,所以花了一些时间网上找相关资料终于搞定,效果图如下: 下面的是解决方案截图和上传的图片截图: 下面是代码: 1.界面代码 UploadPic.aspx
  • 上传图片文件(一)

    2019-05-16 17:29:45
    开发工具与关键技术:VS+图片上传 作者: 李伙 撰写时间: 2019年5月14日 在学习MVC过程中,我们学到手动录入题目信息,录入题目信息时,要判断题目到底是单选题、多选题还是判断题,单选题跟多选题差不多,也是有...
  • 图片上传及图片处理

    2019-03-22 07:46:51
    复制代码如果想使用浏览器原生特性实现文件上传(如图片)效果,父级的form元素有个东西不能丢 enctype="multipart/form-data" 复制代码enctype属性规定在发送到服务器之前应该如何对表单数据进行编码,默认的编码是:...
  • 如何实现图片上传-(上传到本地)

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

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

    万次阅读 热门讨论 2017-05-30 02:32:48
    本文将花大量笔墨来教大家如何实现图片上传这个功能。 我们来看下item-add.jsp页面,可以看到上传图片触发的方法是通过叫做picFileUpload的class来处理的,在标签的下方是一个隐藏域,是用来接收图片上传到图片...
  • flash图片上传插件

    千次下载 热门讨论 2013-04-11 15:31:37
    包含整理好的swfuploadv250.Net开发包,SWFUpload_v250_beta_3_samples,和一个asp.net+flash插件
  • 1、文件上传插件File Input介绍 这个插件主页地址是:http://plugins.krajee.com/file-input,可以从这里看到很多Demo的代码展示:http://plugins.krajee.com/file-basic-usage-demo。 这是一个增强的 HTML5 文件...
  • 多张图片上传插件

    千次阅读 2017-06-02 21:30:41
    多张图片上传最近开发一个项目之前一直没有接触过这块的内容,百度谷歌的很多比较适合项目的选了一种大致效果如下图所示: 类似与微信qq说说的上传图片 前端代码 1.上传页面 add.ftl ...
  • 发布一个图片上传插件,带图片上传后生成预览图片 插件代码: /** * zx-upload.js v1.0.0 * 上传插件 * http://www.*.com/ * * Copyright 2018-2028 zxhj963 * * Released on: 2018/7/21 */ ; ...
  • H5图片上传插件

    千次阅读 2016-10-08 16:48:33
    转载自:... 基于zepto,支持多文件上传,进度和图片预览,用于手机端。 (function ($) { $.extend($, { fileUpload: function (options) { var para = {
  • php多图片上传插件

    千次阅读 2017-09-17 08:38:31
    一般项目都用一款多图片上传插件:plupload,主要是兼容性很好,API教程也详细。php多图片预览插件 参数 描述 默认值 Browse_button 触发浏览文件按钮 - Container 展现上传文件列表的容器 body chunk_...
  • 自定义ckeditor图片上传插件

    千次阅读 2016-11-27 16:03:07
    头儿觉得ckeditor自带的插入图片插件的界面太复杂不好用,而且还得整合ckfinder才能实现本地上传,于是我想整个自定义的插件。闲来整了个demo。 环境:myeclipse 步骤如下: 1. 在ckeditor目录下的plugins里新建一个...
  • uni-app 图片上传插件使用说明

    千次阅读 2019-11-06 10:42:31
    效果: 1.下载插件到项目components目录下 ...参数说明 1.num 上传图片数量限制 2.dataList 上传图片路径集合 <template> <view> <view class="feedback-title" style="background-color: #e...

空空如也

1 2 3 4 5 ... 20
收藏数 429,538
精华内容 171,815
关键字:

图片上传