java分布式实现图片上传到图片服务器

java分布式实现图片上传到图片服务器

  • 操作步骤
    • 第一步
    • 第二步
    • 第三步
    • 第四步
    • 第五步
    • 第六步 代码实现
    • 第七步 JS代码
    • 大功告成!!

操作步骤

第一步

在页面中的form表单里面增加一个input标签,请求方式是POST,文件上传需要依赖表单进行提交,但是表单页面不能
跳转,所以需要在界面上引入jquery.form.js插件,这个插件可以以ajax的方式提交表单,页面不用跳转


第二步

需要在springmvc.xml中配置复杂类型的视图解析器


		

第三步

需要在tomcat图片服务器的web.xml中DefaultServlet下方配置,要不然就不能上传了

		readonly
		false


第四步

在配置文件aa.properties里需要配置 图片服务器的地址,以便后期容易修改

upload_file_path=http://localhost:8080/。。。	//这是图片服务器的地址

第五步

创建一个类读取properties内容

Public class EeUtils{
	Public static String redPro(String key){		//通过配置文件中地址名(upload_file_path)来查找对应的值
		String values = null;
		//读取配置文件
		InputStream in= EeUtils.class.getClassLoader().getResourceAsSteam(“aa.properties”);
		Properties pr = new Properties();
		Pr.load(in);
		Value = Pr.getProperty(key);

	Return value;
}
}

第六步 代码实现

@RequestMapping(“/upload”)
@Controller
public class Upload{
@RequestMapping(“/uploadPic”)
Public void uploadPic(HttpServletRequest request,PrintWriter out,String lastRealPath){
	//强制转化request
	MultipartHttpServletRequest  mr = (MultipartHttpServletRequest) request;
	
	//获取input的name值
Iterator iter = mr.getFileNames();
String inputName = Iter.next();

//获得文件
MultipartFile mf = mr.getFile(inputName);
//把文件转换为字节数组
Byte[] mfs = mf.getBytes();

//为了方式图片名重复
String filename = new SimpleDateFormat(“yyyyMMddHHmmssSSS”).format(new Date());
Random random = new Random();
For(int i=0;i<3+i++){
	filename = filename + random.nextInt(10);
}

//获取原始文件全名
String oriFilename = mf.getOriginalFilename();
//截取后缀名
String suffix= oriFilename.substring(oriFilename.lastIndexOf(“.”));
//要上传文件的绝对路径		用于前台缩略图展示
String realpath = ECPSUtils.readpop(“upload_file_path”)+”/upload”+filename+suffix;
//要上传文件的相对路径		用于保存到数据库
String relativePath =”/upload”+filename+suffix;


//由于在不同的主机上不能直接通过流的方式上传
Cilent client = Client.create();

//判断图片是不是第一次上传
If(StringUtils.isNotBlank(lastRealPath)){
	WebResource wr = Client.resource(lastRealPath);
	Wr.delete();
}

//指定要上传的具体地址,参数就是要上传图片的绝对路径
WebResource wr = Client.resource(realpath);
//进行上传	传入图片的字节数组
wr.put(mfs);

//使用JSON对象把绝对路径和相对路径写回去
JSONObject jo = new JSONObject();
Jo.accumulate(“realpath”, realpath);
Jo.accumulate(“relativePath”, relativePath);

//现在获得的是json格式	键值对
String result = Jo.toString();
Out.write(result);
	}
}

第七步 JS代码

function submitUpload(){
	var option{
		url:path+"/upload/uploadPic.do",	//上传url地址
		dataType:"text",	//回调值的数据类型
		success:function(responseText){
			//里面的值是JSON格式,两个地址:相对路径和绝对路径,要取到绝对路径显示缩略图
			var jsonObj = $.parse(responseText);
			$("#ImgsImgSrc").attr("src",jsonObj.realpath);	//取到绝对路径
			//表单中写一个input隐藏域,设置一个Id 为了把相对路径保存到数据库
			$("#imgs").val(jsonObj.relativePath);	

			//再在表单里面加一个隐藏域,用来判断图片是不是第一次上传
			$("#lastRealPath").val(jsonObj.realpath);
		}
		error:function(){
			alter('系统错误');
		}
	}

	$("#form111").ajaxSubmit(option);		//提交表单
}

大功告成!!

你可能感兴趣的:(java,js,分布式,图片上传,WebService)