图片上传
文件上传流程:
1、定义
2、点击上传区域,触发打开选择框:
$(“#uploader”).click(function(){
$(“.upload”).click(); // 打开文件选择窗口,若点击会直接打开,则无需此代码
});
3、后台处理上传至图片服务器,返回图片地址,显示
4、获取图片路径,保存路径到数据库
function uploadimage(fileThis){
var fileObj = $(fileThis)[0].files[0];
var type = $(fileThis).data("type")
if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
return;
}
var formFile = new FormData();
formFile.append("upfile", fileObj); //加入文件对象
formFile.append("type", type); //加入文件对象
var action = basePath+"/user/platformInfo/uploadImage";
$.ajax({
url: action,
data: formFile,
type: "Post",
cache: false,//上传文件无需缓存
processData: false, 告诉jQuery不要去处理发送的数据
contentType: false, //告诉jQuery不要去设置Content-Type请求头
success: function (data) {
if(data.code == "88"){ // 图片显示处理
//$(fileThis).parents(".activsx").css({"background":"red"});
var $activsx = $(fileThis).parents(".activsx");
$($activsx).find(".del").css("display", "block"); // 显示删除样式
$($activsx).find(".pic ").attr("src", data.data); // 将图片路径存入src中,显示出图片
$($activsx).find(".pid").attr("src", data.data);
}else{
alert(data.message);
}
}
})
}
@RequestMapping("/uploadImage")
@ResponseBody
public ProcessBack uploadImage(@RequestParam("upfile") MultipartFile multipartFile){
String type = request.getParameter("type");
PreCommonMember preCommonMember = getPreCommonMemberByHtml();
ProcessBack processBack = attachUnusedService.uploadImage(multipartFile, preCommonMember.getUid(),type);
return processBack;
}
public ProcessBack uploadImage(MultipartFile multipartFile, Long baseid, String type){
ProcessBack processBack = new ProcessBack();
try{
if(StringUtil.isEmpty(type)){
processBack.setCode(ProcessBack.FAIL_CODE);
processBack.setMessage("type 不能为空");
return processBack;
}
//上传原图&&缩率图
Map<String,String> imageUploadMap = fastDFSUploadComponent.uploadDefaultFile(multipartFile);
if(imageUploadMap.get(FastDFSUploadComponent.FDFS_STATE).equals(FastDFSUploadComponent.FDFS_FAIL_STATUS)){//图片上传失败
throw new IllegalArgumentException("图片上传失败");
}
String url = (String) imageUploadMap.get(FastDFSUploadComponent.FDFS_URL);//原图路径
System.out.println(url);
//保存平台附件表
PlatformInfoAttachUnused attachment = new PlatformInfoAttachUnused();
attachment.setUid(baseid);//用户id
attachment.setType(Integer.valueOf(type));//图片类型
attachment.setIsuse(0);//是否使用1是0否
attachment.setPno("0");//
attachment.setAttachment(url);//图片路径
int count = 0;
count = baseMapper.insert(attachment);
if(!(count > 0)){
throw new IllegalArgumentException("附件索引记录保存失败");
}
processBack.setCode(ProcessBack.SUCCESS_CODE);
processBack.setMessage("图片上传成功");
processBack.setData(fastDFSUploadComponent.getResAccessUrl(url));
return processBack;
}catch(RuntimeException e){
e.printStackTrace();
TransactionAspectSupport.currentTransactionStatus().setRollbackOnly();//数据回滚
}catch(Exception e){
e.printStackTrace();
}
processBack.setCode(ProcessBack.FAIL_CODE);
processBack.setMessage(ProcessBack.EXCEPTION_MESSAGE);
return processBack;
}
<img id='pImg' src='"+data.data+"'/>
var logo = $("#pImg").attr("src"); // 这样获取图片路径更有效
还没有评论,来说两句吧...