事件,当我们浏览完图片选中一张时,触发onchange事件将图片上传到服务器并回显、
1 <img width="100" height="100" id="allUrl" src="${brand.imgUrl }"/> 2 <input type="hidden" name="imgUrl" id="imgUrl" value="${brand.imgUrl }"/> 3 <input type="file" name="pic" onchange="uploadPic()"/>
uploadPic()方法:
//上传图片
function uploadPic(){
//jquery.form.js
var options = {
url : "/upload/uploadPic.do",
dataType : "json",
type : "post",
success : function(data){
$("#allUrl").attr("src",data.url);
$("#imgUrl").val(data.url);
}
}
$("#jvForm").ajaxSubmit(options);
}
Springmvc配置上传图片
1 <!-- 图片上传 --> 2 <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/>
FastDFS的Java接口使用
全局配置文件 fdfs_client.conf
# connect timeout in seconds
# default value is 30s
connect_timeout=30
# network timeout in seconds
# default value is 30s
network_timeout=60
# the base path to store log files
base_path=/home/fastdfs
# tracker_server can ocur more than once, and tracker_server format is
# "host:port", host can be hostname or ip address
tracker_server=119.29.146.187:22122
#tracker_server=119.29.146.187:22122
#standard log level as syslog, case insensitive, value list:
### emerg for emergency
### alert
### crit for critical
### error
### warn for warning
### notice
### info
### debug
log_level=info
# if use connection pool
# default value is false
# since V4.05
use_connection_pool = false
# connections whose the idle time exceeds this time will be closed
# unit: second
# default value is 3600
# since V4.05
connection_pool_max_idle_time = 3600
# if load FastDFS parameters from tracker server
# since V4.05
# default value is false
load_fdfs_parameters_from_tracker=false
# if use storage ID instead of IP address
# same as tracker.conf
# valid only when load_fdfs_parameters_from_tracker is false
# default value is false
# since V4.05
use_storage_id = false
# specify storage ids filename, can use relative or absolute path
# same as tracker.conf
# valid only when load_fdfs_parameters_from_tracker is false
# since V4.05
storage_ids_filename = storage_ids.conf
#HTTP settings
http.tracker_server_port=80
#use "#include" directive to include HTTP other settiongs
##include http.conf
工具类:FastDFSUtils
public class FastDFSUtil {
public static String uploadPic(byte[] pic ,String name,long size){
String path = null;
//ClientGloble 读配置文件
ClassPathResource resource = new ClassPathResource("fdfs_client.conf");
try {
ClientGlobal.init(resource.getClassLoader().getResource("fdfs_client.conf").getPath());
//老大客户端
TrackerClient trackerClient = new TrackerClient();
TrackerServer trackerServer = trackerClient.getConnection();
StorageServer storageServer = null;
StorageClient1 storageClient1 = new StorageClient1(trackerServer, storageServer);
String ext = FilenameUtils.getExtension(name);
NameValuePair[] meta_list = new NameValuePair[3];
meta_list[0] = new NameValuePair("fileName",name);
meta_list[1] = new NameValuePair("fileExt",ext);
meta_list[2] = new NameValuePair("fileSize",String.valueOf(size));
path = storageClient1.upload_file1(pic, ext, meta_list);
} catch (Exception e) {
e.printStackTrace();
}
return path;
}
}
保存图片到FastDFS分布式文件系统
@Service("uploadService")
public class UploadServiceImpl implements UploadService {
//上传图片
public String uploadPic(byte[] pic ,String name,long size) {
return FastDFSUtil.uploadPic(pic, name, size);
}
}
controller:
@Controller
public class UploadController {
@Autowired UploadService uploadService;
//上传图片
@RequestMapping(value="/upload/uploadPic.do")
public void uploadPic(@RequestParam(required = false) MultipartFile pic,HttpServletResponse response) throws IOException{
String path = uploadService.uploadPic(pic.getBytes(), pic.getOriginalFilename(), pic.getSize());
String url = Constants.img_url+path;
JSONObject jo = new JSONObject();
jo.put("url", url);
response.setContentType("application/json;charset=UTF-8");
response.getWriter().write(jo.toString());
}
}