使用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分布式文件系统的更多相关文章

  1. FastDFS分布式文件系统

    FastDFS分布式文件系统 阅读目录 相关文章 1 分布式文件系统介绍 2 系统架构介绍 3 FastDFS性能方案 4 Linux基本命令操作 5 安装VirtualBox虚拟机并配置Ubuntu ...

  2. FastDFS 分布式文件系统的安装与使用（单节点）

    FastDFS 分布式文件系统的安装与使用(单节点) 跟踪服务器:192.168.4.121 (edu-dfs-tracker-01) 存储服务器:192.168.4.125 (edu-dfs-sto ...

  3. FastDFS 分布式文件系统部署实战及基本使用

    FastDFS 分布式文件系统部署实战及基本使用 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. FastDFS是一个开源的高性能分布式文件系统.它的主要功能包括:文件存储,文件同步 ...

  4. CentOS7 安装FastDFS分布式文件系统

    CentOS7 安装FastDFS分布式文件系统 最近要用到fastDFS,所以自己研究了一下,在搭建FastDFS的过程中遇到过很多的问题,为了能帮忙到以后搭建FastDFS的同学,少走弯路,与大家 ...

  5. django中使用FastDFS分布式文件系统接口代码实现文件上传、下载、更新、删除

    运维使用docker部署好之后FastDFS分布式文件系统之后,提供给我接口如下: fastdfs tracker 192.168.1.216 192.168.1.217 storage 192.16 ...

  6. FastDFS分布式⽂文件系统

    FastDFS分布式⽂文件系统  1. 什么是FastDFS FastDFS 是⽤用 c 语⾔言编写的⼀一款开源的分布式⽂文件系统.FastDFS 为互联⽹网量量身定制, 充分考虑了了冗余备份.负载均 ...

  7. 07.Linux系统-Fastdfs分布式文件系统-互为主从配置搭建部署

    Fastdfs分布式文件系统-互为主从配置部署 1.安装基础依赖 yum install -y gcc gcc-c++ pcre pcre-devel zlib zlib-devel openssl ...

  8. Dubbo入门到精通学习笔记（八）：ActiveMQ的安装与使用（单节点）、Redis的安装与使用（单节点）、FastDFS分布式文件系统的安装与使用（单节点）

    文章目录 ActiveMQ的安装与使用(单节点) 安装(单节点) 使用 目录结构 edu-common-parent edu-demo-mqproducer edu-demo-mqconsumer 测 ...

  9. 简单搭建FastDFS分布式文件系统(简单易懂)

    一.什么是FastDFS FastDFS一个开源的轻量级分布式文件系统,它对文件进行管理,充分考虑了冗余备份.负载均衡.线性扩容等机制,并注重高可用.高性能等指标,功能包括:文件存储.文件同步.文件访 ...

随机推荐

  1. HTML5-全局属性

    HTML5-全局属性 HTML 属性赋予元素意义和语境.全局属性可用于任何 HTML 元素. contentEditable - 规定元素内容是否可编辑.- 注释:如果元素未设置 contentedi ...

  2. new和malloc

    1.申请的内存所在位置 自由存储区(free store)是C++基于new操作符的一个抽象概念,凡是new进行内存申请,该内存为自由存储区.堆是操作系统中的术语,是操作系统所维护的一块特殊内存,用于 ...

  3. eclipse中js报错简单快捷的解决方式

    eclipse中对正确的js文件报错十分常见,我的项目中只要是以.js结尾的必会报错,作为一名小小的程序员,看到“满江红”甚是烦躁!今天就给大家分享一个方便又快捷的解决方案. 瞄准被报错的js文件点鼠 ...

  4. HttpClient设置连接超时时间

    https://www.cnblogs.com/winner-0715/p/7087591.html 使用HttpClient,一般都需要设置连接超时时间和获取数据超时时间.这两个参数很重要,目的是为 ...

  5. Google - Largest Sum Submatrix

    Given an NxN matrix of positive and negative integers, write code to find the submatrix with the lar ...

  6. re正则匹配城市名

    匹配城市名称,只要第一次出现之后的数据 import re a='巴州区白云县台公交乡公司对面区海蜃楼6楼' b=re.search(r'(^\w+?区)|(^\w+?县)|(^\w+?镇)',a). ...

  7. Pong 打乒乓

    发售年份 1972 发售平台 多平台 开发商 雅达利(Atari) 类型 体育休闲 https://www.youtube.com/watch?v=fiShX2pTz9A

  8. centos7 升级openssh到openssh-8.0p1版本

    环境介绍 centos7.3和centos7.6升级完毕测试登录ssh以及重启后登录ssh均无问题. 前期请自行配置好yum源(如果不会请百度) 整个过程不需要卸载原先的openssl包和openss ...

  9. 关于jeesite的陷阱需要注意

    jeesite,其框架主要为: 后端 核心框架:Spring Framework 4.0 安全框架:Apache Shiro 1.2 视图框架:Spring MVC 4.0 服务端验证:Hiberna ...

  10. tomcat 闪退问题排查

    由于启动tomcat回出现闪退情况,看不到异常 解决方法: 一. 打开startup.bat文件,在最下面 在文本的最后敲上pause,保存后重新运行startup.bat,这时候窗口会留在桌面上(调 ...