-
Java实现图片上传到服务器,并把上传的图片读取出来
2017-02-28 14:20:34在很多的网站都可以实现上传头像,可以选择自己喜欢的图片做头像,从本地上传,下次登录时可以直接显示出已经上传的头像,那么这个是如何实现的呢? 下面说一下我的实现过程(只是个人实现思路,实际网站怎...题外话:推荐一个专注于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学习】5、SpringBoot 实现文件上传,图片上传并显示功能
2019-09-03 23:04:20毕竟只是一个新手,解决这种复杂点的问题(相对而言),还是需要花费大量时间的,这篇文章花了两天的时间才实现的功能,现在就记录一下使用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,都是我在学习过程中遇到的一些问题做的记录。、
交流
-
JavaScript实现图片上传并预览并提交ajax(完整demo)
2017-08-04 17:36:28图片上传并预览HTML<div class="file-box"> 预览"> ,imag图片上传并预览
HTML
<div class="file-box"> <img id="preview" /> <input type="text" id="imgfield" class="txt" placeholder="预览"> <input type="file" name="file" id = "input_file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" οnchange="imgPreview(this)" > </div>
css
.file-box { position: relative; display: inline-block; } .file-box img { width: 50px; height: 50px; border-radius: 50%; position: absolute; top: -30px; left: 0; display: inline-block; border: none; } .file-box .txt,.file-box .file { width: 70px; height: 36px; position: absolute; top: -20px; left: 100px; text-align: center; }
JS
function imgPreview(fileDom) { //判断是否支持FileReader if(window.FileReader) { var reader = new FileReader(); } else { alert("您的设备不支持图片预览功能,如需该功能请升级您的设备!"); } //获取文件 var file = fileDom.files[0]; var imageType = /^image\//; //是否是图片 if(!imageType.test(file.type)) { alert("请选择图片!"); return; } //读取完成 reader.onload = function(e) { //获取图片dom var img = document.getElementById("preview"); //图片路径设置为读取的图片 img.src = e.target.result; }; reader.readAsDataURL(file); }
上传图片提交ajax
如果想把图片信息通过ajax传给后端,则需要通过
new FormData()
上传图片信息,然后使用 append() 方法向该对象里添加字段,具体代码如下:(注:以下代码在图片预览成功后执行,也就是在
reader.readAsDataURL(file);
后)var formData = new FormData(); formData.append('file', $('#input_file')[0].files[0]); //添加图片信息的参数 formData.append('sizeid',123); //添加其他参数 $.ajax({ url: '/material/uploadFile', type: 'POST', cache: false, //上传文件不需要缓存 data: formData, processData: false, // 告诉jQuery不要去处理发送的数据 contentType: false, // 告诉jQuery不要去设置Content-Type请求头 success: function (data) { var rs = eval("("+data+")"); if(rs.state==1){ tipTopShow('上传成功!'); }else{ tipTopShow(rs.msg); } }, error: function (data) { tipTopShow("上传失败"); } })
-
Vue +Element UI 图片上传控件使用
2018-07-11 16:34:12上一篇 Vue +Element UI +vue-quill-editor 富文本编辑器及插入图片自定义主要是写了富文本编辑器的自定义及编辑器中图片的上传并插入到编辑内容,这篇文章单独介绍一下element UI 图片上传控件的使用。首先要安装...上一篇 Vue +Element UI +vue-quill-editor 富文本编辑器及插入图片自定义 主要是写了富文本编辑器的自定义及编辑器中图片的上传并插入到编辑内容,这篇文章单独介绍一下element UI 图片上传控件的使用。首先要安装element并中引入,安装引入过程这里不再赘述。
1.引用element 上传控件。
<el-upload action="/mgr/common/imgUpload"//这里需要配置一下文件上传地址(跨域) list-type="picture-card" accept="image/*" :limit="imgLimit" :file-list="productImgs" :multiple="isMultiple" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :on-exceed="handleExceed" :on-error="imgUploadError"> <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog>
2.js
export default { data() { return { dialogImageUrl: '', dialogVisible: false, productImgs: [], isMultiple: true, imgLimit: 6 } }, methods: { handleRemove(file, fileList) {//移除图片 console.log(file, fileList); }, handlePictureCardPreview(file) {//预览图片时调用 console.log(file); this.dialogImageUrl = file.url; this.dialogVisible = true; }, beforeAvatarUpload(file) {//文件上传之前调用做一些拦截限制 console.log(file); const isJPG = true; // const isJPG = file.type === 'image/jpeg'; const isLt2M = file.size / 1024 / 1024 < 2; // if (!isJPG) { // this.$message.error('上传头像图片只能是 JPG 格式!'); // } if (!isLt2M) { this.$message.error('上传图片大小不能超过 2MB!'); } return isJPG && isLt2M; }, handleAvatarSuccess(res, file) {//图片上传成功 console.log(res); console.log(file); this.imageUrl = URL.createObjectURL(file.raw); }, handleExceed(files, fileList) {//图片上传超过数量限制 this.$message.error('上传图片不能超过6张!'); console.log(file, fileList); }, imgUploadError(err, file, fileList){//图片上传失败调用 console.log(err) this.$message.error('上传图片失败!'); } } }
3.controller
@RequestMapping(value = "/imgUpload") public Wrapper imgUpload(HttpServletRequest req, MultipartHttpServletRequest multiReq) throws IOException { System.out.println("---" + fileUploadPath);//我这里用的springboot 在application.properties中配置,使用@Value 获取的文件上传目录 MultipartFile file = multiReq.getFile("file"); String originalFilename = file.getOriginalFilename(); String suffix = originalFilename.substring(originalFilename.indexOf(".")); String localFileName = MD5Util.md5(file.getInputStream()) + suffix; File localFile = new File(fileUploadPath + localFileName); if (!localFile.exists()) { localFile.createNewFile(); FileOutputStream fos = new FileOutputStream( localFile); FileInputStream fs = (FileInputStream) multiReq.getFile("img").getInputStream(); byte[] buffer = new byte[1024]; int len = 0; while ((len = fs.read(buffer)) != -1) { fos.write(buffer, 0, len); } fos.close(); fs.close(); } else { log.info("文件已存在!!"); } return WrapMapper.wrap( Wrapper.SUCCESS_CODE, Wrapper.SUCCESS_MESSAGE, "http://localhost:8080/img/" + localFileName);//这里是我执行封装的返回结果,也可以使用map, }
4.MD5工具类
import java.io.*; import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; public class MD5Util { private static char[] Digit = {'0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'}; public static String getMd5Sum(String inputStr) throws NoSuchAlgorithmException { MessageDigest digest = MessageDigest.getInstance("MD5"); byte[] inputStrByte = inputStr.getBytes(); digest.update(inputStrByte, 0, inputStrByte.length); byte[] md5sum = digest.digest(); StringBuffer sb = new StringBuffer(); for (int i = 0; i < 16; i++) { char[] ob = new char[2]; ob[0] = Digit[md5sum[i] >> 4 & 0x0F]; ob[1] = Digit[md5sum[i] & 0x0F]; String s = new String(ob); sb.append(s); } return sb.toString(); } /** * 对字符串进行 MD5 加密 * * @param str * 待加密字符串 * * @return 加密后字符串 */ public static String md5(String str) { MessageDigest md5 = null; try { md5 = MessageDigest.getInstance("MD5"); md5.update(str.getBytes("UTF-8")); } catch (NoSuchAlgorithmException e) { throw new RuntimeException(e.getMessage()); } catch (UnsupportedEncodingException e) { throw new RuntimeException(e.getMessage()); } byte[] encodedValue = md5.digest(); int j = encodedValue.length; char finalValue[] = new char[j * 2]; int k = 0; for (int i = 0; i < j; i++) { byte encoded = encodedValue[i]; finalValue[k++] = Digit[encoded >> 4 & 0xf]; finalValue[k++] = Digit[encoded & 0xf]; } return new String(finalValue); } /** * 签名字符串 * * @param text * 需要签名的字符串 * @param sign * 签名结果 * @return 签名结果 */ public static boolean verify(String text, String sign) { String mysign = md5(text); if (mysign.equals(sign)) { return true; } else { return false; } } /** * 对文件进行 MD5 加密 * * @param file * 待加密的文件 * * @return 文件加密后的 MD5 值 * @throws IOException */ public static String md5(File file) throws IOException { FileInputStream is = new FileInputStream(file); return md5(is); } public static String md5(InputStream inputStream) throws IOException { MessageDigest md5 = null; try { md5 = MessageDigest.getInstance("MD5"); int n = 0; byte[] buffer = new byte[1024]; do { n = inputStream.read(buffer); if (n > 0) { md5.update(buffer, 0, n); } } while (n != -1); inputStream.skip(0); } catch (NoSuchAlgorithmException e) { throw new RuntimeException(e.getMessage()); } finally { inputStream.close(); } byte[] encodedValue = md5.digest(); int j = encodedValue.length; char finalValue[] = new char[j * 2]; int k = 0; for (int i = 0; i < j; i++) { byte encoded = encodedValue[i]; finalValue[k++] = Digit[encoded >> 4 & 0xf]; finalValue[k++] = Digit[encoded & 0xf]; } return new String(finalValue); } }
5.效果
6.主要参考文档 element 官方中文文档,文档中好多属性介绍很笼统不够详细,个人感觉比较坑。
-
jsp/html页面图片上传并展示上传的图片
2017-08-21 00:27:58之前做过一个项目,有一个功能是图片上传并且展示图片,尝试过其他的方法,但会有一个问题,那就是在IE8上图片并不能正常展示,所以便用以下方法来上传图片,很好的解决了此问题,步骤如下: 1.上传图片页面index.... -
Layui框架实现图片上传
2019-08-02 17:05:47Layui框架实现图片上传 前言: 一直以来,图片上传总是件很麻烦的事。最近在学layui,发现layui真是极大简化了各种复杂的操作,避免了繁琐的开发。 layui图片上传和传统的图片上传不同,它并不予表单元素并存,而是... -
App图片上传Base64图片上传
2018-05-04 18:36:42* @Method base64图片上传 * @author Angus * return array * date 2018-05-04 */ function saveBase64Image($base64_image_content){ if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_imag... -
springmvc上传图片并显示图片--支持多图片上传
2015-07-13 21:44:23springmvc上传图片并显示图片(也能上传文件),多图片上传并显示图片,采用commons-fileupload,commons-io -
Vue2.0图片上传及图片压缩自定义H5图片上传组件
2018-05-20 19:26:27最近公司要求图片上传需要压缩,以前直接使用组件不能满足使用了,于是决定自定义个图片上传组件。可以实现动态传入url,设置压缩率,接收回传参数。 压缩也质量还不错。先上效果图效果如下压缩质量还不错,4.37M到... -
一个图片上传插件,含图片上传后生成预览图片
2018-07-21 18:07:35发布一个图片上传插件,带图片上传后生成预览图片 插件代码: /** * zx-upload.js v1.0.0 * 上传插件 * http://www.*.com/ * * Copyright 2018-2028 zxhj963 * * Released on: 2018/7/21 */ ; ... -
VUE2.0 图片上传功能(移动端)
2018-05-25 14:03:44本文主要介绍VUE2.0图片上传功能的实现。原理是通过js控制和input标签的方式完成这一效果,无需加载其他组件。 效果图如下: 1.DOM代码 1.1input标签 由于我们是通过input标签的方式进行图片上传的,但是... -
mpvue图片上传
2018-10-17 14:25:34mpvue小程序项目中的图片上传 效果图 通过mpvue文档得知他使用的是小程序原生api中的图片选择(wx.chooseImage)和文件上传(wx.uploadFile),因此我们直接根据小程序的文档来使用就可以了。 chooseImage文档 ... -
HTML5 Plus 拍照或者相册选择图片上传
2016-07-13 14:34:57HBuilder+HTML5 Plus+MUI实现拍照或者相册选择图片上传,利用HTML5 Plus的Camera、Gallery、IO、Storage和Uploader来实现手机APP拍照或者从相册选择图片上传。Camera模块管理设备的摄像头,可用于拍照、摄像操作,... -
vue图片上传
2018-08-14 17:21:38图片上传是以表单的形式提交,vue上传图片步骤如下: 1、绑定input框上传事件change <input type="file" @change="uploadFile($event)" multiple="multiple" /> 2... -
h5页面图片上传
2018-01-22 15:01:48图片上传采用的是 input框的 type=file 的方式进行图片的上传。下面三种样式都是 input方式进行图片上传的。 我们点击上传图片的时候,图片上传到后台。首先给大家一个单张图片上传的示例 html: div ... -
laravel 图片上传
2019-07-15 20:31:34根据个人场景更改配置config\file... //我这个是做文章图片上传,就命名 article ,学习的话可以使用默认的配置 'disks' => [ 'local' => [ 'driver' => 'local', 'root' => storage_path('app'), ... -
Java图片上传/文件上传
2016-11-18 11:23:33Spring+SpringMVC 图片上传/文件上传 -
CKEditor实现图片上传
2018-11-05 19:47:34CKEditor实现图片上传 -
Springboot图片上传(单图片上传+预览)
2019-03-22 15:52:00单图片上传 pom.xml <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId&g... -
wangEditor图片上传
2019-02-17 20:38:571.图片上传 var E = window.wangEditor var editor = new E('#editorMenu','#editor') //开启debug模式 editor.customConfig.debug = true; // 关闭粘贴内容中的样式 editor.customConfig.pasteFilterStyle ... -
图片上传并预览
2018-08-05 09:23:00标签,在图片上传之后,用新图片的src替换原来<img/>标签中的src。 如下图所示,是原始的按钮样式: 美化步骤: (1)将上传图片标签采用绝对定位,使之位于一个图片,按钮,div等标签上。或者给... -
SpringBoot图片上传(ajax单图片上传+预览)
2019-03-22 16:00:37ajax单图片上传 pom.xml <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifact... -
微信小程序 -- 图片上传
2020-07-06 15:31:34微信小程序图片上传 老方法,复制粘贴就好使 WXML代码: <text class="name_font name">图片<text>:</text></text> <view class="img name"> <view class="list_tupian weui-... -
MUI 实现手机图片上传
2019-03-02 11:06:58我做了其中头像图片上传的功能,在此分享下demo; 如有不规范处,请多多指教,互相学习。 第一次接触这个框架,踩了许多的坑 >_< 步骤:点击选择图片 → 图片转BASE64发送到服务器 → 服务器解码写入流中... -
移动端多图片上传
2020-05-16 14:24:51原版只能上传单张,经过调整修改可以满足于批量多张图片上传并附带与php后端交互,记录于下 CSS #fileBox{ padding-left:15px; min-height:0px;overflow:hidden; padding-bottom:20px; padding-top:5px; } #... -
bootstrap图片上传预览
2018-01-15 16:07:00昨天用bootstrap写了个图片上传预览页面。实现点击上传图片在页面中进行预览,并且实现图片的删除。(前端实现) 效果是这样滴: 实现过程中比较重要的部分有: 1.隐藏上传按钮,点击最后一个带加号的框上传图片... -
ElementUI图片上传 回显
2019-03-18 17:31:59html内容 <!-- 图片上传 --> <el-row> <el-col :span="24"> <el-form-item label="LOGO" prop="logoImg"> <el-upload class="up... -
vue+vant图片上传压缩图片大小
2019-10-13 17:36:08vue+vant图片上传压缩图片大小 可能在项目中大家都会遇到文件上传的需求,比如头像,图片等,但是太大的文件上传会给服务器造成很大大压力,那么我们就需要压缩上传的文件 其实这儿所说的压缩,就是图片重绘,改变图片大小...
-
2021-02-25
-
RFC-3550-中文版.zip
-
Odoo 视图XML常用属性汇总笔记
-
用微服务spring cloud架构打造物联网云平台
-
基于衍射叠栅信号的超精密定位系统
-
33-docker学习笔记.docx
-
Odoo search 搜索视图详解与搜索视图工作原理
-
迭代器原理图
-
性能测试基础--(CPU)
-
JMETER 性能测试基础课程
-
37岁老码农现身说法:投了500份简历,却只收到了3个面试邀请
-
2021 PHP租车系统 毕业设计 毕设源码 源代码使用教程
-
Mysql数据库面试直通车
-
2021-02-25
-
linux网络驱动.zip
-
计算机学报Latex模版.zip
-
基于电商业务的全链路数据中台落地方案(全渠道、全环节、全流程)
-
歌声合成从入门到精通
-
SILEX-I超短脉冲激光装置放大前级输出能量稳定性提升
-
js中this指向