使用Jersey构建图片服务器 有回显图片功能

1.前台界面代码

<form id="jvForm" action="add.do" method="post" enctype="multipart/form-data">
	<table>
		<tr>
			<td width="20%" class="pn-flabel pn-flabel-h"></td>
			<td width="80%" class="pn-fcontent">
				<img width="100" height="100" id="allImgUrl" />
				<input type="hidden" name="imgUrl" id="path" />
				<input type="file" onchange="uploadPic()" name="pic" id="logoPic"/>
			</td>
		</tr>
	</table>
</form>

2.前台JS代码

<script type="text/javascript">
	//上传图片
	function uploadPic() {
		//定义参数
		var options = {
			url : "/upload/uploadPic.do",
			dataType : "json",
			type : "post",
			beforeSubmit : function(formData,jqForm,options){
				// 判断是否为图片
				// 将jqForm转成DOM对象
				var f = jqForm[0];
				// 获取DOM对象中name为logoPic的值
				var v = f.logoPic.value;
				// 获取扩展名,并转成小写
				var ext = v.substring(v.length-3).toLowerCase();
				// 比对扩展名 jpg gif bmp png 
				if(ext != "jpg" && ext != "gif" && ext != "bmp" && ext != "png"){
					alert("只允许上传图片!");
					return false;
				}
				//校验提交的表单
				return true;
			},
			success : function(data) {
				// 回显图片内容
				$("#allImgUrl").attr("src", data.url);
				$("#path").val(data.path);
			}
		};

		// jquery.form使用方式
		$("#jvForm").ajaxSubmit(options);
	}
</script>

3.在Spring中配置图片转换器

<!-- 上传图片转换器 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  
	<!-- 设置上传文件的最大尺寸为1MB -->  
	<property name="maxUploadSize" value="1048576"/>
</bean>

4.创建UploadController以及工具类

package cn.itcast.core.controller.admin;

import java.io.IOException;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Random;

import javax.servlet.http.HttpServletResponse;

import org.apache.commons.io.FilenameUtils;
import org.json.JSONObject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;

import com.sun.jersey.api.client.Client;
import com.sun.jersey.api.client.WebResource;

import cn.itcast.common.web.ResponseUtils;
import cn.itcast.core.web.Constants;

@Controller
public class UploadController {
	// 上传图片
	@RequestMapping(value = "/upload/uploadPic.do")
	public void uploadPic(@RequestParam(required = false) MultipartFile pic, HttpServletResponse response) {
		// 扩展名
		String ext = FilenameUtils.getExtension(pic.getOriginalFilename());
		// 图片名称生成策略
		DateFormat df = new SimpleDateFormat("yyyyMMddHHmmssSSS");
		// 图片名称一部分
		String format = df.format(new Date());
		// 随机三位数
		Random r = new Random();
		// n 1000 0-999 99
		for (int i = 0; i < 3; i++) {
			format += r.nextInt(10);
		}
		// 实例化一个Jersey
		Client client = new Client();
		// 保存数据库
		String path = "upload/" + format + "." + ext;
		// 另一台服务器的请求路径是?
		String url = Constants.IMAGE_URL + path;
		// 设置请求路径
		WebResource resource = client.resource(url);

		// 发送开始 POST GET PUT
		try {
			resource.put(String.class, pic.getBytes()); 
		} catch (IOException e) {
			e.printStackTrace();
		}

		// 返回二个路径
		JSONObject jsonObject = new JSONObject();
		jsonObject.put("url", url);
		jsonObject.put("path", path);

		ResponseUtils.renderJson(response, jsonObject.toString());
	}
}
package cn.itcast.core.web;

public interface Constants {
	/**
	 * 图片服务器
	 */
	public static final String IMAGE_URL = "http://localhost:8088/BabasportProject_ImageService/";
}
package cn.itcast.common.web;

import java.io.IOException;

import javax.servlet.http.HttpServletResponse;

public class ResponseUtils {
	// 发送内容
	public static void render(HttpServletResponse response, String contentType, String text) {
		response.setContentType(contentType);
		try {
			response.getWriter().write(text);
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

	// 发送的是JSON
	public static void renderJson(HttpServletResponse response, String text) {
		render(response, "application/json;charset=UTF-8", text);
	}

	// 发送xml
	public static void renderXml(HttpServletResponse response, String text) {
		render(response, "text/xml;charset=UTF-8", text);
	}

	// 发送text
	public static void renderText(HttpServletResponse response, String text) {
		render(response, "text/plain;charset=UTF-8", text);
	}
}

5.搭建另一个Tomcat,作为图片服务器

图片服务器Tomcat的设置  tomcat/conf/web.xml中内容更改

<servlet>
	<servlet-name>default</servlet-name>
	<servlet-class>org.apache.catalina.servlets.DefaultServlet</servlet-class>
	<init-param>
		<param-name>debug</param-name>
		<param-value>0</param-value>
	</init-param>
	<init-param>
		<param-name>readonly</param-name>
		<param-value>false</param-value>
	</init-param>
	<init-param>
		<param-name>listings</param-name>
		<param-value>false</param-value>
	</init-param>
	<load-on-startup>1</load-on-startup>
</servlet>

6.Eclipse上创建JavaWeb项目,取名BabasprotProject_ImageService


7.修改图片服务器的Tomcat的端口号


8.在BabasprotProject_ImageService项目的webapp目录下创建upload文件夹


======================

启动服务器 测试是否成功

======================

时间: 2024-11-17 02:39:21

使用Jersey构建图片服务器 有回显图片功能的相关文章

springboot项目图片上传,回显;使用外部静态资源路径回显图片

//前端图片是Base64字符串形式传递图片参数:需要用Base解密,写入到本地磁盘中 public String upload(String string){ 解析图片(Base64): response.setHeader("Access-Control-Allow-Origin","*"); // 第二个参数填写允许跨域的域名称,不建议直接写 "*" response.setHeader("Access-Control-Allow

选择图片后,页面回显图片

<div class="form-group form-group-lg"> <label class="col-xs-1 control-label">封面:</label> <div class="col-xs-11 clearfix"> <div class="pull-left js-upload-img-wrapper"> <img class=&qu

Ansible + shell 实现部署fastdfs+nginx 实现图片服务器并提供动态缩放功能;

因为公司阿里服务器变动几次,手动部署了好几次fastdfs+nginx,于是就想到了自动化部署,以下为脚本内容,由于只是想把着功能实现,并未有完完整的判断逻辑: 以下为ansible-playbook及shell及模板nginx-fastdfs及动态缩略图配置; 如有错误,请不吝赐教: --- - hosts: apollo # vars: # filedest: /usr/local/ tasks: - name: prepare fastdfs-nginx-module copy: src=

图片上传并回显后端篇

图片上传并回显后端篇 我们先看一下效果 继上一篇的图片上传和回显,我们来实战一下图片上传的整个过程,今天我们将打通前后端,我们来真实的了解一下,我们上传的文件,是以什么样的形式上传到服务器,难道也是一张图片?等下我们来揭晓 我们在实战开始前呢,我们先做一下准备工作,比如新建一个java web工程,如果你不懂这个的话,那我建议你先学一下Javaweb,可以去我的公众号找一下这方面的教程.我们就给我们的工程起名为UpImg,我们再给他建一个web包和util包,再把我们以前前端做的图片回显的代码拷

图片上传并回显Ajax异步篇

图片上传并回显Ajax异步篇 图片如何无刷新的上传到服务器呢?继前两篇文章后,我们来实战一下如何无刷新的异步上传图片,我们还是先看一下效果 在实战前呢,我们需要做些准备工作.比如说,了解一下FormData对象 "FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据.其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用.如果表单enctype属性设为multipart/form-data ,则会使用表单的submit()用来

上传图片至fastdfs分布式文件系统并回显

事件,当我们浏览完图片选中一张时,触发onchange事件将图片上传到服务器并回显. 1 <img width="100" height="100" id="allUrl" src="${brand.imgUrl }"/> 2 <input type="hidden" name="imgUrl" id="imgUrl" value="${b

大型网站图片服务器架构的演进(转)

在主流的Web站点中,图片往往是不可或缺的页面元素,尤其在大型网站中,几乎都将面临“海量图片资源”的存储.访问等相关技术问题.在针对图片服务器的架构扩展中,也会历经很多曲折甚至是血泪教训(尤其是早期规划不足,造成后期架构上很难兼容和扩展). 本文将以一个真实垂直门户网站的发展历程,向大家娓娓道来. 构建在Windows平台之上的网站,往往会被业内众多技术认为很“保守”,甚至会有点.很大部分原因,是由于微软技术体系的封闭和部分技术人员的短视造成的(当然,主要还是人的问题).由于长期缺乏开源支持,所

大型网站图片服务器架构的演进

在主流的Web站点中,图片往往是不可或缺的页面元素,尤其在大型网站中,几乎都将面临“海量图片资源”的存储.访问等相关技术问题.在针对图片服务器的架构扩展中,也会历经很多曲折甚至是血泪教训(尤其是早期规划不足,造成后期架构上很难兼容和扩展). 本文将以一个真实垂直门户网站的发展历程,向大家娓娓道来. 构建在Windows平台之上的网站,往往会被业内众多技术认为很“保守”,甚至会有点.很大部分原因,是由于微软技术体系的封闭和部分技术人员的短视造成的(当然,主要还是人的问题).由于长期缺乏开源支持,所

使用Dropzone上传图片及回显演示样例

一.图片上传所涉及到的问题 1.HTML页面中引入这么一段代码 <div class="row"> <div class="col-md-12"> <form dropzone2 class="dropzone" enctype="multipart/form-data" method="post"></form> </div> </div&