淘淘商城图片上传功能的实现

前提:

参考:集群环境下图片上传的功能分析、vmware的安装,linux的安装、nginx和ftp服务在linux的安装,ftp的客户端的使用。

图片上传是图片存储到ftp服务器上面,所以这里不需要操作mapper层。

这里用了几个工具类

ftp图片上传的工具类,图片名字的一种新的生成方式,json与java类的转换工具。

这里图片上传采用的是富文本编辑器的一个图片上传插件,在jsp页面实现的。

http://kindeditor.net/docs/upload.html

根据这几个jsp页面我们可以看到图片上传功能的url和传入的参数。

分析:

(1)图片是上传到ftp服务器,不是在数据库。所以我们搭建好服务的环境。

(2)是否有传入的参数和返回值

在这里我们看到参数即uploadFile,url为/pic/upload

这里注意使用的上传到服务器的一个MultiPartFile对象

springMVC实现图片的上传,需要依赖

导入common-fileupload的依赖


<!-- 文件上传组件 -->

<dependency>

<groupId>commons-fileupload</groupId>

<artifactId>commons-fileupload</artifactId>

</dependency>

这里需要在springMVC中配置这个文件上传的bean

利用富文本编辑器上传图片返回的结果是也是json的格式,详细可以参考kindEditor的上传功能实现文档:

返回格式(JSON):

这里有返回成功时的情况和失败时的情况。我们可以采用两种方式来保存返回的json数据,一种是map集合的键值对形式,一种是pojo对象。下面看下两种方式:

Map的键值对形式如下:

pojo对象格式:

public class PictureResult {

/**

* 上传图片返回值,成功:0 失败:1

*/

private Integer error;

/**

* 回显图片使用的url

*/

private String url;

/**

* 错误时的错误消息

*/

}

(3)代码的编写实现:

controller层:

这是采用map的形式存储返回值,因为图片上传这个插件有些缺陷会在有的浏览器显示不出来,所以需要将java对象转为json的数据形式。

service层:

这里的步骤是:

1、生成图片的名称,这里采用的是上面讲的利用时间的分秒来实现的命名,具体见下一章

2、利用FTPUtil工具实现图片的上传:

在这里需要获取ftp服务器的ip,用户名,密码,存储的路径。

用到了一个spring的新技术

首先将这些ip端口等等写在一个文件中,然后利用spring来读取,因为在项目中不能将这些东西写死。

读取方式:

另外还有一个新技术,就是joda-time的日期类型转换的插件,在依赖的jar包那里添加依赖:

利用这个插件,可以直接生成所需要的格式:

这里是采用时间的形式来生成作为图片的文件夹

时间: 2024-10-14 19:00:49

淘淘商城图片上传功能的实现的相关文章

drupal中安装CKEditor文本编辑器,并配置图片上传功能 之 方法二

drupal中安装CKEditor文本编辑器,并配置图片上传功能 之 方法一 中介绍了ckeditor的安装和配置方法,其实还有另一种新方法,不用IMCE模块. 不过需要ckfinder的JS库,可以到http://ckfinder.com/download下载,下载后放到ites\all\modules\contrib\ckeditor文件夹下如图, 然后到admin/config/content/ckeditor/edit/Full配置一下 就行了

FLASH图片上传功能—从百度编辑器UEditor里面提取出来

为了记录工作中碰到的各种问题,以及学习资料整理,今天开始,将以往的文章进行了一个整理,以后也开始认真的记录学习过程中的各种问题 在HTML里面的文件上传功能一直是个问题,为了实现上传文件大小限制,怎样显示进度条问题,以及上传前图片预览,也试过各种办法,直到有一天看到百度编辑器中的图片上传功能.花了点功夫把他单独提取出来. 最终效果图如下: 这个功能可以提供多个图片文件选择,预览,然后对上传的图片在上传队列中删除,以及旋转和,上传中进度条显示,以及上传相册的选择. 源代码下载路径为: http:/

megapix-image插件 使用Canvas压缩图片上传 解决手机端图片上传功能的问题

最近在弄微信端的公众号.订阅号的相关功能,发现原本网页上用的uploadify图片上传功能到手机端有的手机类型上就不能用了,比如iphone,至于为啥我想应该不用多说了吧(uploadify使用flash实现上传的): 经过研究找到了一个手机端比较相对比较好用的插件实现图片上传,那就是megapix-image插件,比uploadify还是好用多了,下面就来上实例吧: html页面: <html> <body> <input type="file" cap

图片上传功能的几个工具类的介绍

(1)FTP上传文件的工具类: package com.taotao.common.utils; import java.io.File;import java.io.FileInputStream;import java.io.FileNotFoundException;import java.io.FileOutputStream;import java.io.IOException;import java.io.InputStream;import java.io.OutputStream

android之使用GridView+仿微信图片上传功能(附源代码)

由于工作要求最近在使用GridView完成图片的批量上传功能,我的例子当中包含仿微信图片上传.拍照.本地选择.相片裁剪等功能,如果有需要的朋友可以看一下,希望我的实际经验能对您有所帮助. 直接上图,下面的图片就是点击"加号"后弹出的对话框,通过对话框可以根据自己需求进行相片选择. 项目结构: 下面直接上代码. 整体的布局文件activity_main.xml 1 <LinearLayout xmlns:android="http://schemas.android.co

Jquery图片上传功能整理

最近在做一个图片上传到服务器的功能,之前基本没有什么JS的经验,用的也是网上的插件.做了一个星期才把他弄好,现在做一下总结,方便以后查看. 用的插件是WebUploader,上面有很多例子,我找的例子如下图: 在实例化WebUploader的时候需要修改upload.js文件中的server的地址,这样才能将指定的图片上传到服务器代码如下: // 实例化 uploader = WebUploader.create({ pick: { id: '#filePicker', label: '点击选择

图片上传功能&lt;转&gt;http://blog.csdn.net/u011159417/article/details/50126023

以前也实现过上传,只不过每次都是,写完之后没有总结,下次遇到时,还要重新写,重新调式,很是浪费时间,所以,今天实现一个上传图片的功能,包括简单的页面和servlet,下次再要写这个功能时,直接拿过来就可以了,没有理论,直接上代码+少量的注释.在最下面我会把项目上传,大家需要jar包,可以从项目中拿. 该项目用到的jar包如图,在下面的项目demo中有jar包: 一.upload.jsp页面代码: [html] view plain copy print? <%@ page language=&quo

easyui 图片上传功能详解

页面展示: 1.点击图片上传 跳转页面 携带2个参数  ID  NAME=所属模块 jsp 如图: js  可以上传文件和图片代码: $(function() {var falg=0;    $list = $('#thelist');    var uploader = WebUploader.create({        // 选完文件后,是否自动上传.        auto : false,        // swf文件路径        swf : 'plugins/expand/

ckeditor 图片上传功能配置

1. /ckeditor/plugins/image/dialogs/image.js 搜索 upload 把 hidden:!0 改为 hidden:0 2. config.js 新增配置项 config.image_previewText=' '; //预览区域显示内容 config.filebrowserUploadUrl="/ckeditor/upload"; //图片上传地址 3. 图片上传 接口 预览图片功能实现 $fn = isset($_GET['CKEditorFun