使用Webupload上传图片到FastDFS分布式文件系统
使用Webupload插件上传图片到FastDFS分布式文件系统。
前提条件：1.已安装FastDFS分布式文件系统
2.使用webuploader插件上传文件
3.maven工程已引入FastDFS依赖
图片上传及图片回显部分代码如下：
<!-- 添加商品页面 --> <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<base th:href="|${#request.getContextPath()}/|"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="resources/css/reset.css" type="text/css"
media="screen" />
<link rel="stylesheet" href="resources/css/style.css" type="text/css"
media="screen" />
<link rel="stylesheet" href="resources/css/invalid.css" type="text/css"
media="screen" />
<script type="text/javascript"
src="resources/scripts/jquery-1.8.3.min.js"></script> <!-- 引入上传控件 webuploader -->
<link rel="stylesheet" href="resources/widget/webuploader/webuploader.css" type="text/css"
media="screen" />
<script type="text/javascript" src="resources/widget/webuploader/webuploader.min.js"></script> <script>
var uploader;
$(function(){
//初始化webuploader插件
uploader = WebUploader.create({
// 选完文件后，是否自动上传。
auto: false,
// swf文件路径
swf: 'resources/widget/webuploader/Uploader.swf',
// 文件接收服务端。
server: '/imgs/uploader',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#filePicker',
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
}
}); //给webuploader绑定事件
//fileQueued 当文件被加入队列以后触发
uploader.on("fileQueued",function (file) {
//生成图片缩略图
uploader.makeThumb( file, function (error ,ret) {
if(error){
alert(file.name+"缩略图生成失败")
}else{
//将缩略图展示到预览图div中
var img = "<img src=\""+ret+"\" style=\"height: 100px; width: 100px; margin-right: 5px;\"/>"
$("#imgs_div").append(img);
} }, 100, 100 )
}); //给webupload绑定成功事件
uploader.on("uploadSuccess",function (file,response) {
var val = $("#image_paths").val();//获取images_path标签值
if(val.length > 0){
val += "|";
}
val += response.imgUrl;
$("#image_paths").val(val);//设置images_path标签值
})
}); /**
* 上传图片
*/
function upload_imgs(){
if(uploader){
uploader.upload();
}
}
</script> </head>
<body>
<div id="main-content">
<div class="content-box">
<div class="content-box-content">
<div class="tab-content default-tab" id="tab2">
<form action="/goods/insert" method="post">
<fieldset>
<!-- Set class to "column-left" or "column-right" on fieldsets to divide the form into columns -->
<p>
<label>商品名称</label> <input
class="text-input small-input" type="text"
name="gname" />
</p>
<p>
<label>商品图片</label>
<!--dom结构部分-->
<div id="uploader-demo">
<!-- 存放上传图片的预览图 -->
<div id="imgs_div" style="border: solid 1px #D0D0D0; width: 500px; height: 120px; margin-bottom: 10px; padding: 20px;">
<!-- <img src="xxx" style="height: 100px; width: 100px; margin-right: 5px;"/>
<img src="xxx" style="height: 100px; width: 100px; margin-right: 5px;"/>
<img src="xxx" style="height: 100px; width: 100px; margin-right: 5px;"/>
<img src="xxx" style="height: 100px; width: 100px; margin-right: 5px;"/>-->
</div>
<button type="button" class="mybutton" style="margin-bottom: 10px;" onclick="upload_imgs();">上传图片</button>
<div id="filePicker">选择图片</div>
<input id="image_paths" type="hidden" name="gimage" value=""/>
</div>
</p>
<p>
<label>商品价格</label> <input
class="text-input small-input" type="text"
name="gprice" />
</p>
<p>
<label>商品库存</label> <input
class="text-input small-input" type="text"
name="gsave" />
</p>
<p>
<label>商品的描述</label>
<textarea class="text-input textarea wysiwyg"
name="ginfo" cols="79" rows="15"></textarea>
</p>
<p>
<input class="mybutton" type="submit" value="提交" />
</p>
</fieldset>
<div class="clear"></div>
<!-- End .clear -->
</form>
</div>
<!-- End #tab2 -->
</div>
<!-- End .content-box-content -->
</div>
</div>
<!-- End #main-content -->
</body>
</html>
<!-- 商品列表页面 --> <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<base th:href="|${#request.getContextPath()}/|"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- Reset Stylesheet -->
<link rel="stylesheet" href="resources/css/reset.css" type="text/css"
media="screen" />
<!-- Main Stylesheet -->
<link rel="stylesheet" href="resources/css/style.css" type="text/css"
media="screen" />
<link rel="stylesheet" href="resources/css/invalid.css" type="text/css"
media="screen" />
<script type="text/javascript"
src="resources/scripts/jquery-1.3.2.min.js"></script>
<!-- jQuery Configuration -->
<script type="text/javascript"
src="resources/scripts/simpla.jquery.configuration.js"></script>
</head>
<body>
<div id="main-content">
<div class="content-box">
<!-- End .content-box-header -->
<div class="content-box-content">
<div class="tab-content default-tab" id="tab1">
<table>
<thead>
<tr>
<th><input class="check-all" type="checkbox" /></th>
<th>商品名称</th>
<th>商品图片</th>
<th>商品描述</th>
<th>商品价格</th>
<th>操作</th>
</tr>
</thead> <tbody>
<tr th:each="good : ${goods}">
<td><input type="checkbox" /></td>
<td th:text="${good.gname}">Lorem ipsum dolor</td>
<!--默认展示商品的第一张图片-->
<td><img style="width: 120px;height: 100px;" th:src="|http://192.168.59.131/${#strings.setSplit(good.gimage,'|')[0]}|"/></td>
<td th:text="${good.ginfo}">Consectetur adipiscing</td>
<td th:text="${#numbers.formatCurrency(good.gprice)}">Donec tortor diam</td>
<td>
<!-- Icons --> <a href="#" title="Edit"><img
src="resources/images/icons/pencil.png" alt="Edit" /></a> <a
href="#" title="Delete"><img
src="resources/images/icons/cross.png" alt="Delete" /></a> <a
href="#" title="Edit Meta"><img
src="resources/images/icons/hammer_screwdriver.png"
alt="Edit Meta" /></a>
</td>
</tr>
</tbody> <tfoot>
<tr>
<td colspan="6">
<div class="bulk-actions align-left">
<a class="mybutton" href="/topage/goodsadd">添加商品</a>
</div>
<div class="clear"></div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<!-- End .content-box-content -->
</div>
</div>
<!-- End #main-content -->
</body>
</html>
//ImgController import com.alibaba.fastjson.JSON;
import com.github.tobato.fastdfs.domain.StorePath;
import com.github.tobato.fastdfs.service.FastFileStorageClient;
import org.apache.commons.io.IOUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile; import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID; @Controller
@RequestMapping("/imgs")
public class ImgController { @Autowired
private FastFileStorageClient fastFileStorageClient;
//private static final String UPLOAD_PATH = "e:\\imgs"; @RequestMapping("/uploader")
@ResponseBody
public String uploadImg(MultipartFile file) { //获得上传文件后辍的下标 xxx.png
int index = file.getOriginalFilename().lastIndexOf(".");//返回指定字符在此字符串中最后一次出现处的索引
String suffix =file.getOriginalFilename().substring(index+1);
System.out.println("截取到的文件名后辍： "+suffix);
//文件上到FastDFS
try {
StorePath storePath = fastFileStorageClient.uploadImageAndCrtThumbImage(file.getInputStream(), file.getSize(), suffix, null);
//获取上传到FastDFS中图片的路径
String imgUrl = storePath.getFullPath();
System.out.println("FastDFS中图片的路径: "+imgUrl); //将存FastDFS中图片的路径以JSON方式返回到前端页面
Map<String,Object> map = new HashMap<>();
map.put("imgUrl",imgUrl);
String param = JSON.toJSONString(map);
return param;
//return "{\"uploadPath\":\"" + imgUrl + "\"}"; } catch (IOException e) {
e.printStackTrace();
} /* //文件上传到本地磁盘
try (
InputStream inputStream = file.getInputStream();
OutputStream outputStream = new FileOutputStream(UPLOAD_PATH + UUID.randomUUID().toString());
) {
IOUtils.copy(inputStream, outputStream);
} catch (IOException e) {
e.printStackTrace();
}*/ return null;
}
}
//GoodsController import com.alibaba.dubbo.config.annotation.Reference;
import com.qf.entity.Goods;
import com.qf.service.IGoodsService;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping; import java.util.List; @Controller
@RequestMapping("/goods")
public class GoodsController { @Reference
private IGoodsService goodsService;
/**
* 查询商品列表
*/
@RequestMapping("/list")
public String goodslist(ModelMap map){
List<Goods> goods = goodsService.queryAll();
map.put("goods",goods);
return "goodslist";
} /**
* 新增商品
*/
@RequestMapping("/insert")
public String goodsinsert(Goods goods){
int count = goodsService.insert(goods);
return "redirect:/goods/list";
}
}
//spring boot的入口启动类 import com.github.tobato.fastdfs.FdfsClientConfig;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Import; @SpringBootApplication(scanBasePackages = "com.qf")
@Import(FdfsClientConfig.class)
public class ShopBackApplication { public static void main(String[] args) {
SpringApplication.run(ShopBackApplication.class, args);
} }
使用Webupload上传图片到FastDFS分布式文件系统的更多相关文章
- FastDFS分布式文件系统
FastDFS分布式文件系统 阅读目录 相关文章 1 分布式文件系统介绍 2 系统架构介绍 3 FastDFS性能方案 4 Linux基本命令操作 5 安装VirtualBox虚拟机并配置Ubuntu ...
- FastDFS 分布式文件系统的安装与使用（单节点）
FastDFS 分布式文件系统的安装与使用(单节点) 跟踪服务器:192.168.4.121 (edu-dfs-tracker-01) 存储服务器:192.168.4.125 (edu-dfs-sto ...
- FastDFS 分布式文件系统部署实战及基本使用
FastDFS 分布式文件系统部署实战及基本使用 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. FastDFS是一个开源的高性能分布式文件系统.它的主要功能包括:文件存储,文件同步 ...
- CentOS7 安装FastDFS分布式文件系统
CentOS7 安装FastDFS分布式文件系统 最近要用到fastDFS,所以自己研究了一下,在搭建FastDFS的过程中遇到过很多的问题,为了能帮忙到以后搭建FastDFS的同学,少走弯路,与大家 ...
- django中使用FastDFS分布式文件系统接口代码实现文件上传、下载、更新、删除
运维使用docker部署好之后FastDFS分布式文件系统之后,提供给我接口如下: fastdfs tracker 192.168.1.216 192.168.1.217 storage 192.16 ...
- FastDFS分布式⽂文件系统
FastDFS分布式⽂文件系统 1. 什么是FastDFS FastDFS 是⽤用 c 语⾔言编写的⼀一款开源的分布式⽂文件系统.FastDFS 为互联⽹网量量身定制, 充分考虑了了冗余备份.负载均 ...
- 07.Linux系统-Fastdfs分布式文件系统-互为主从配置搭建部署
Fastdfs分布式文件系统-互为主从配置部署 1.安装基础依赖 yum install -y gcc gcc-c++ pcre pcre-devel zlib zlib-devel openssl ...
- Dubbo入门到精通学习笔记（八）：ActiveMQ的安装与使用（单节点）、Redis的安装与使用（单节点）、FastDFS分布式文件系统的安装与使用（单节点）
文章目录 ActiveMQ的安装与使用(单节点) 安装(单节点) 使用 目录结构 edu-common-parent edu-demo-mqproducer edu-demo-mqconsumer 测 ...
- 简单搭建FastDFS分布式文件系统(简单易懂)
一.什么是FastDFS FastDFS一个开源的轻量级分布式文件系统,它对文件进行管理,充分考虑了冗余备份.负载均衡.线性扩容等机制,并注重高可用.高性能等指标,功能包括:文件存储.文件同步.文件访 ...
随机推荐
- 走过的easyui的坑--datagrid的reload在IE下未刷新
至于为什么要进easyui这个坑,就不多说了. 我现在使用的是1.5这个版本,在用它做一个后台管理系统,项目做到一半,才想起记录这些坑. 1.对于datagrid在reload.load在IE下未刷新 ...
- hibernate的lazy初始化结果
package com.ehcache; import java.io.Serializable; public class User implements Serializable{ private ...
- canvas绘图——根据鼠标位置进行缩放的实现原理
以任一点 A 缩放的基本原理: A 点为鼠标位置,正常放大是以原点放大,那么放大后 A 点就会变到 A1 点的位置 x1, y1.然后再将画布进行位移,将 A1 的位置移动到 A,则完成以 A 点缩放 ...
- C# 关于变量使用范围容易犯错的问题（TreeView数据绑定为例）
asp.net做一个treeview数据绑定 绑定子节点时查询出来的数据正确,但在进行数据绑定时一直索引溢出 然后调试 ... 调试 ... 再调试... 依然很崩溃 想到了是变量定义后面共用后的问 ...
- 自己用的Xshell配色方案
[comfort]text=dce2e2cyan(bold)=2ad1b8text(bold)=dce2e2magenta=dd3682green=55bb55green(bold)=55bb55ba ...
- ENSP模拟华为USG6000
- Ubuntu 终端使用ss代理
用polipo软件,这个软件可以吧socket5转换成http代理 $ sudo apt-get install polipo $ sudo vim /etc/polipo/config 在文件中加入 ...
- HanLP 自然语言处理 for nodejs
HanLP 自然语言处理 for nodejs ·支持中文分词(N-最短路分词.CRF分词.索引分词.用户自定义词典.词性标注),命名实体识别(中国人名.音译人名.日本人名.地名.实体机构名识别),关 ...
- Android环境下hanlp汉字转拼音功能的使用介绍
由于项目需要在Android手机设备上实现汉字转拼音功能(支持多音字),于是首先想到了Pinyin4j+多音字映射对照表的实现方案,并在项目中试用了一段时间,发现数据量大时,其耗时非常严重.后来寻找其 ...
- 解决腾讯云封锁SS(shadow--socks)访问google问题
腾讯云windows主机,若使用SS(shadow--socks)采用加密算法aes-256-cfb,访问google的时候会被dropped connection. 解决办法更改ss server加 ...