HTML页面传图片到sftp

         为了实现上传图片这个功能还是费了老大的劲的，上代码之前首先了解下现在的服务器架构，一共有两个服务器，一个是nginx+sftp专门做图片服务的，另一个是程序服务器，放我们的程序的，我们要做的就是从个人电脑传图片到程序服务器，然后程序服务器再上传到图片服务器。

我们的实现顺序从后向前，现在开始实现程序服务器上传到sftp

我的程序架构简单的来说是这样的

首先按照这篇文章，实现从service到sftp的上传

http://www.cnblogs.com/longyg/archive/2012/06/25/2556576.html

然后将SFTPTest这个测试上传的改了，改成你自己的类，因为我们service是有实现和接口的，我便修改成如下的代码

接口

package com.dmsd.itoo.gis.picture.service;

public interface PictureUploadService {
	void addPicture(String name,String pictureRoute);
}

实现

package com.dmsd.itoo.gis.picture.service;

import java.util.HashMap;
import java.util.Map;

import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import com.jcraft.jsch.ChannelSftp;

import java.io.FileInputStream;
import java.util.HashMap;
import java.util.Map;

import org.junit.Test;

import com.jcraft.jsch.ChannelSftp;
@Service("pictureUploadService")
@Transactional
public class PictureUploadServiceImpl implements PictureUploadService{

	   public SFTPChannel getSFTPChannel() {
	        return new SFTPChannel();
	    }

	   /*
	    * 1 图片名称 2 要存的图片路径(带图片名称)
	    * @see com.dmsd.itoo.gis.picture.service.PictureUploadService#addPicture(java.lang.String, java.lang.String)
	    */
	@Override
	public void addPicture(String name, String pictureRoute) {
		PictureUploadServiceImpl test = new PictureUploadServiceImpl();

	        Map<String, String> sftpDetails = new HashMap<String, String>();
	        // 设置主机ip，端口，用户名，密码
	 
	        sftpDetails.put(SFTPConstants.SFTP_REQ_HOST, "*.*.*.*");
	        sftpDetails.put(SFTPConstants.SFTP_REQ_USERNAME, "*");
	        sftpDetails.put(SFTPConstants.SFTP_REQ_PASSWORD, "*");
	        sftpDetails.put(SFTPConstants.SFTP_REQ_PORT, "22");
	        //String src = "D:\\DevSoft\\HB-SnagIt1001.rar"; // 本地文件名
	        String src = pictureRoute; // 本地文件名
	       
	        /*String dst = "/home/ftpuser/www/images/"+name; // 目标文件名这里的是sftp的目标路径，一定要写对！*/	   
	        String dst = "/upload/"+name;
	        SFTPChannel channel = test.getSFTPChannel();
	        try {
	        	   ChannelSftp chSftp = channel.getChannel(sftpDetails, 60000);
	        	   System.out.println(src);
	    	       chSftp.put(src, dst, ChannelSftp.OVERWRITE); // 代码段2
	    	        
	    	       //chSftp.put(new FileInputStream(src), dst, ChannelSftp.OVERWRITE); // 代码段3
	    	        
	    	        chSftp.quit();
	    	        channel.closeChannel();
			} catch (Exception e) {
				// TODO: handle exception
			}
	     
	     
	
	     
	}

}

这样我们service段就完成了，下面写springMvc接受HTML页面传图片

springMvc   controller层

package com.dmsd.itoo.gis.controller;
  
import java.io.File;  
import java.util.Date;  
  



import java.util.UUID;

import javax.servlet.http.HttpServletRequest;  
  




import javax.servlet.http.HttpServletResponse;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;  
import org.springframework.ui.ModelMap;  
import org.springframework.web.bind.annotation.RequestMapping;  
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;  
import org.springframework.web.multipart.MultipartFile;  

import com.dmsd.itoo.gis.entity.UserEntity;
import com.dmsd.itoo.gis.picture.service.PictureUploadService;
import com.dmsd.itoo.gis.service.UserService;
import com.dmsd.itoo.tool.json.HttpJsonUtil;
@RequestMapping("/pictureAdd")
@Controller  
public class PictureController {  
	@Autowired
	UserService userService;
	@Autowired
	PictureUploadService pictureUploadService;
	private static HttpJsonUtil httpJsonUtil = new HttpJsonUtil();
   @RequestMapping(value = "/upload.do", method = RequestMethod.POST) 
  /* @RequestMapping(value = { "upload.do" }, method = RequestMethod.POST), ModelMap model   HttpServletResponse response*/
    public void upload(@RequestParam(value = "file", required = false) MultipartFile file, ModelMap model ,HttpServletRequest request) {  
  
        System.out.println("开始");  
        String path = request.getSession().getServletContext().getRealPath("upload");  
        String fileName = file.getOriginalFilename(); 
        //获取文件类型-截取
        String fileType = file.getContentType(); 
        fileType = fileType.substring(fileType.lastIndexOf("/") + 1);  
        //生成文件名称
        UUID uuid = UUID.randomUUID();
        fileName = uuid.toString()+"."+fileType;
//        String fileName = new Date().getTime()+".jpg";  
        System.out.println(path);  
        File targetFile = new File(path, fileName);  
        if(!targetFile.exists()){  
            targetFile.mkdirs();  
        }  
      
        //保存  
        try {  
            file.transferTo(targetFile);  
            //将图片上传到sftp
            pictureUploadService.addPicture(fileName, path+"\\"+fileName);
            //将用户的头像更改为最新的

    		UserEntity userEntity = new UserEntity();
    		userEntity.setphone(request.getParameter("userphone"));// 用户id
    		userEntity = userService.queryUserInfo(userEntity).get(0);
    		userEntity.setheadpicture(fileName);// 加入图片名称
    		userService.updateUser(userEntity);
            
        } catch (Exception e) {  
            e.printStackTrace();  
        }  
     model.addAttribute("fileUrl", request.getContextPath()+"/upload/"+fileName);  
     model.addAttribute("phoneNumber", fileName);  
       
    }  
   }

因为我们使用maven来管理项目的，这里应该会用到几个jar,配置下pom文件，这里就不是说了，大家查下弄上就行，这部分的代码是看这边博客弄出来的

http://blog.csdn.net/cheung1021/article/details/7084673/

然后就是HTML页面的，页面其实非常简单，就是用form表单提交的，代码如下

<form  id="fromid" action="/dmsd-itoo-gis-web/pictureAdd/upload.do" method="post" enctype="multipart/form-data" >

<input name="file"  class="weui_uploader_input"  type="file" accept="image/*" multiple />

</form>

其实后来加了很多别的功能，所以变了样子，用了MUI，WEUI，效果图如下，其实就是一个上传头像的功能

    

所有html代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>修改头像</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.min.css">
	
		<link rel="stylesheet" type="text/css" href="../css/weui.css" />
	
	<style type="text/css"> 


span {
 	height: 40px;
 	width: 40px;
 	display: block;
 	position: relative;/*使用绝对定位*/
 }
 
 .demoSpan1 {
 	width: 50px;
 }
 
 .demoSpan1:before {
 	content: '';/*里面的文字*/
 	height: 50px;
 	width: 50px;
 	display: block;
 	position: absolute;/*相对于父元素进行定位*/
 	top: 2px;
 	left: 0px;
 	z-index: 1;/*堆叠顺序z-index: 5;*/
 	line-height: 26px;/*最小高*/
 	background: #4096fb;/*背景颜色*/
 	border-radius: 80px;/*圆角*/
 	-webkit-border-radius: 80px;
 	-moz-border-radius: 80px;
 	color: #000000;
 	text-align: center;
 }
 
 .demoSpan1:after {
 	content: '';
 	height: 0px;
 	width: 0px;
 	display: block;
 	position: absolute;
 	top:47px;
 	bottom: 2px;
 	left:10px;
 	border: 10px transparent solid;
 	border-top-color: #4096fb;
 	border-width: 10px 15px 0px 15px;
 }
.pictureCss{
	
 	height:46px;
 	width: 46px;
 	
 	position: absolute;/*相对于父元素进行定位*/
top:4px;
left:2px;
 	z-index: 1;/*堆叠顺序*/
 	line-height: 40px;/*最小高*/
 	border-radius: 80px;/*圆角*/
 	-webkit-border-radius: 80px;
 	-moz-border-radius: 80px;


}

</style>
	</head>

	<body >

		<!--返回条********-->
		<header id="header" class="mui-bar mui-bar-nav" >
		<a class=" mui-icon mui-icon-left-nav mui-pull-left" href="/dmsd-itoo-gis-web/html/userInfo.html"></a>
			
				<!-- <div style="font-size: 13px;margin-left: -1px;" >确定</div> -->
					<!--  <input  style="height: 30px;width: 50px;font-size: 13px;margin-left: -1px;" type="submit" value="上传" />  -->
					<div class="mui-btn mui-btn-primary mui-pull-right" style="height: 30px;width: 50px;" οnclick="upload()" >
				<div style="font-size: 13px;margin-left: -1px;" >确定</div>
			
			</div>
		</header>

		<div class="mui-content">

				<!--图片上传-->
				<ul class="mui-table-view mtop">
					<li class="mui-table-view-cell">
						<!-- <div class="weui_uploader_hd weui_cell">
							<div class="weui_cell_bd weui_cell_primary">选择头像</div>
							 <div class="weui_cell_ft">0/2</div> 
						</div> -->
						<div style="height:5px;"></div>
						<div class="weui_uploader_bd">
					
					<div id="myimgs" style="display:none;height:77px;width: 77px; float: left;border:1px solid #d9d9d9;">
			<img id="myimg" src="http://sandbox.runjs.cn/uploads/rs/72/huvtowwn/zanwu.png" style="height:75px;width: 75px;"/>
						
					</div>
							<div id ="xyPicture" style="display:none;height:77px;width: 77px; float: left;margin-left:15px;border:1px solid #d9d9d9">
								<span class="demoSpan1" style="margin-left:12px;margin-top:8px;">
										<img id ="pictureCss" class = "pictureCss" src="http://sandbox.runjs.cn/uploads/rs/72/huvtowwn/zanwu.png"/>
								</span>
							
							</div>
								<div id="leftpx" style="float: left;width:15px;height:5px;display:none;"></div>
							<div style="float: left;">
						<form  id="fromid" action="/dmsd-itoo-gis-web/pictureAdd/upload.do" method="post" enctype="multipart/form-data" >
							<div class="weui_uploader_input_wrp" >
							<!-- 	<input name="file"  class="weui_uploader_input"  type="file" accept="image/*" multiple /> -->
							<!--input[button] 触发 file click事件-->
							<input type="button" class="weui_uploader_input"  id="mybutton" οnclick="Id('file').click();" />
								<!-- file 隐藏起来  触发onchange事件 -->
								<input id="file" type="file" name="file"  οnchange="changeToop();" style="display:none;" accept="image/png,image/jpg,image/jpeg" multiple/>
								 
							</div>
							 <input id="upPicture" type="submit" value="上传" style="display:none;"/> 
							 <input id="userPhoneN" type="text" name="userphone" value="" style="display:none;">
							</form>
						</div>
						</div>
						
					</li>

				</ul>
	
<!-- 	<form action="/dmsd-itoo-gis-web/pictureAdd/upload.do" method="post" enctype="multipart/form-data">  
<input type="file" name="file" /> <input type="submit" value="Submit" /></form>  	 -->
	
</div>
		<script src="../script/mui.min.js"></script>

<script>
//定义id选择器
function Id(id){
return document.getElementById(id);
}
function changeToop(){
	var file = Id("file");
	if(file.value==''){
		//设置默认图片
	Id("myimg").src='http://sandbox.runjs.cn/uploads/rs/72/huvtowwn/zanwu.png';
	}else{
		preImg("file","myimg");
		preImg("file","pictureCss");
		//显示两个
		Id("myimgs").style.display="block";
		Id("xyPicture").style.display="block"; 
		Id("leftpx").style.display="block"; 
		
	}
}
//获取input[file]图片的url Important
function getFileUrl(fileId) { 
	var url; 
	var file = Id(fileId);
	var agent = navigator.userAgent;
	if (agent.indexOf("MSIE")>=1) {
	url = file.value; 
	} else if(agent.indexOf("Firefox")>0) { 
	url = window.URL.createObjectURL(file.files.item(0)); 
	} else if(agent.indexOf("Chrome")>0) {
	url = window.URL.createObjectURL(file.files.item(0)); 
	} 
	return url; 
} 
//读取图片后预览
function preImg(fileId,imgId) { 
var imgPre =Id(imgId);
imgPre.src = getFileUrl(fileId); 
} 
//读取用户电话给表单from
var userPhoneNumber =localStorage.getItem("phoneNum");
/* alert(userPhoneNumber); */
 Id("userPhoneN").value=userPhoneNumber;
 
function upload(){
	/* Id("upPicture").onclick(); */
	Id("upPicture").click();
	/* return   Id("upPicture").onclick();
	return   Id("upPicture").click(); */
}
</script>
	</body>

</html>

读取图片的时候

——————————————————————————————暂时完结了，如果还有下文就是上传多个图片的了——————————————

————————————————————————————————chenchen————————————————————————————