700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > web下图片上传并预览

web下图片上传并预览

时间:2018-12-06 09:03:42

相关推荐

web下图片上传并预览

html代码:

<formid="upload"name="upload">

<divclass="upload-div"style="margin-top:20px">

<labelclass="btngray"for="input-upload"style="display:inline-block;width:100px">上传图片</label>

<inputtype="file"name="file"id="input-upload"style="display:inline"/>

<h5class="h5-gray"style="display:inline;margin-left:10px">宽高大于800px*480px,不得超过5M</h5>

</div>

<divclass="upload-list">

<imgid="add-pictureUrl"src="../../../static/png/img_default_goods.png"/>

</div>

</form>

js代码:

* String requestUri ="/views/commodity/upload";

* StringfileElement =$("#input-upload");

* StringpicElement =$("#add-pictureUrl");

fileElement.on("change",function(){

varfilePath=$(this).val();

if(filePath.indexOf("jpg")!=-1||filePath.indexOf("png")!=-1){

varformData=newFormData($("#upload")[0]);

formData.append('file',fileElement.val());

$.ajax({

type:'POST',

dataType:'json',

data:formData,

url:requestUri,

enctype:'multipart/form-data',

contentType:false,//必须有

processData:false,//必须有

success:function(result){

if(result.code==1){

picElement.attr("src",result.body);

}else{

alert(result.message);

}

},

error:function(d){

console.log(d);

alert("图片不符合要求,请重新上传");

}

});

}else{

alert("您上传文件类型有误!");

returnfalse

}

});

controller代码:

* StringrootDir = "/Users/mac/app"; (mac下路径)

* StringrootDir = "C:/Users/sandy/app"; (win下路径)

@ResponseBody

@RequestMapping(value="/upload",method=RequestMethod.POST)

publicJsonResponseDtohandleFileUpload(@PathParam(value="file")MultipartFilefile)throwsIOException{

if(!file.isEmpty()){

if(file.getSize()>uploadPicSize){

returnJsonResponseDto.FAILURE().setMessage("文件不得超过5M.");

}

BufferedImagebi=ImageIO.read(file.getInputStream());

if(bi.getWidth()<uploadPicWidth||bi.getHeight()<uploadPicHeight){

returnJsonResponseDto.FAILURE().setMessage("文件尺寸不正确");

}

StringmyFileName=file.getOriginalFilename();

if(myFileName.trim()!=""){

StringuploadPicFolder=rootDir+AppConstant.UPLOAD_PIC_COMMODITY;

StringpicUri=fileService.saveFile(file,uploadPicFolder);

returnJsonResponseDto.SUCCESS().setBody(picUri);

}

}

returnJsonResponseDto.FAILURE().setMessage("Fileisinvalid.");

}

图片上传service

/*

*

* * Copyright(c).ForIntelligentGroup.

* *

*

*/

packagecom.intelligent.hato.cs.service.core.service.impl;

importcom.intelligent.hato.cs.service.core.config.RouteConfig;

importcom.intelligent.hato.cs.service.core.service.FileService;

importcom.intelligent.hato.cs.service.core.utils.FileUploadUtil;

importcom.intelligent.hato.cs.service.core.utils.FileUtil;

importorg.slf4j.Logger;

importorg.slf4j.LoggerFactory;

importorg.springframework.beans.factory.annotation.Autowired;

importorg.springframework.stereotype.Service;

importorg.springframework.util.ClassUtils;

importorg.springframework.web.multipart.MultipartFile;

importjava.io.File;

importjava.time.LocalDate;

importjava.util.UUID;

/**

*Createdbycherryon/11/27.

*/

@Service

publicclassFileServiceImplimplementsFileService{

@Autowired

privateRouteConfigrouteConfig;

Loggerlogger=LoggerFactory.getLogger(FileServiceImpl.class);

publicStringsaveFile(MultipartFilefile,StringfilePath){

//扩展名格式

StringextName=file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));

Stringname;

/**

*指定上传目录

*/

if(filePath!=null&&!"".equals(filePath.trim())){

name=designatedUp(filePath,file);

returnname;

}

/**

*默认上传目录

*/

//图片类型文件

if(this.inArray(routeConfig.getImageType(),extName)){

filePath=routeConfig.getUploadDefaultDir();

}else{

return"Thisuploadtypeisnotsupportedtemporarily";

}

name=myFileUp(filePath,file);

returnname;

}

publicStringremoveFile(StringfilePath){

try{

FileUtil.removeFile(routeConfig.getUploadDefaultDir()+File.separator+filePath);

return"successfuloperation";

}catch(Exceptione){

return"dropfileerror";

}

}

/**

*判断数组中是否包含某个元素

*

*@paramarray 类型的数组

*@paramelement被检查的类型

*@return

*/

privatebooleaninArray(String[]array,Stringelement){

booleanflag=false;

for(Stringtype:array){

if(element.equals(type)){

flag=true;

break;

}

}

returnflag;

}

/**

*默认上传文件到文件夹

*

*@paramfolder默认文件夹

*@paramfile 上传的文件

*@return

*/

privateStringmyFileUp(Stringfolder,MultipartFilefile){

LocalDatetoday=LocalDate.now();

StringsaveName=File.separator+today.getYear()+"."+today.getMonthValue()+File.separator;

StringfileCode=UUID.randomUUID().toString().trim().replaceAll("-","");

StringreturnName=FileUploadUtil.fileUp(file,routeConfig.getUploadDefaultDir()+File.separator+folder+saveName,fileCode);

saveName=folder+File.separator+saveName+File.separator+returnName;

logger.warn("Thisfilehasbeenuploaded:"+saveName);

returnsaveName;

}

/**

*指定目录上传文件

*

*@paramfolder指定文件夹

*@paramfile 上传文件

*@return

*/

privateStringdesignatedUp(Stringfolder,MultipartFilefile){

StringfileCode=UUID.randomUUID().toString().trim().replaceAll("-","");

// Stringpath=ClassUtils.getDefaultClassLoader().getResource("").getPath();

StringreturnName=FileUploadUtil.fileUp(file,folder,fileCode);

folder=(folder.contains(":")?folder.split(":")[1]:folder);

StringfilePathname=folder+"/"+returnName;

logger.warn("Thisfilehasbeenuploaded:"+filePathname);

returnfilePathname;

}

}

图片上传工具类

/*

*

* * Copyright(c).ForIntelligentGroup.

* *

*

*/

packagecom.intelligent.hato.cs.service.core.utils;

mons.io.FileUtils;

importorg.springframework.web.multipart.MultipartFile;

importjava.io.File;

importjava.io.IOException;

importjava.io.InputStream;

/**

*Createdbycherryon/11/27.

*/

publicclassFileUploadUtil{

/**

*@paramfile //文件对象

*@paramfilePath//上传路径

*@paramfileName//文件名

*@return文件名

*/

publicstaticStringfileUp(MultipartFilefile,StringfilePath,StringfileName){

StringextName="";//扩展名格式:

try{

if(file.getOriginalFilename().lastIndexOf(".")>=0){

extName=file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));

}

copyFile(file.getInputStream(),filePath,fileName+extName).replaceAll("-","");

}catch(IOExceptione){

System.out.println(e);

}

returnfileName+extName;

}

/**

*写文件到当前目录的upload目录中

*

*@paramin

*@paramdir

*@paramrealName

*@throwsIOException

*/

privatestaticStringcopyFile(InputStreamin,Stringdir,StringrealName)

throwsIOException{

Filefile=newFile(dir,realName);

if(!file.exists()){

if(!file.getParentFile().exists()){

file.getParentFile().mkdirs();

}

file.createNewFile();

}

FileUtils.copyInputStreamToFile(in,file);

returnrealName;

}

}

静态资源处理WebResourceConfig

packagecom.intelligent.hato.cs.web.config;

importcom.intelligent.hato.cs.web.utils.AppConstant;

importorg.springframework.beans.factory.annotation.Value;

importorg.springframework.context.annotation.Configuration;

importorg.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;

importorg.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

importjava.io.File;

/**

*CreatedbyCan.Guanon/11/14.

*/

@Configuration

publicclassWebResourceConfigextendsWebMvcConfigurerAdapter{

@Value("${app.path.root}")

privateStringrootDir;

@Override

publicvoidaddResourceHandlers(ResourceHandlerRegistryregistry){

registry.addResourceHandler("/static/css/**","/views/static/css/**")

.addResourceLocations("classpath:/static/css/");

registry.addResourceHandler("/static/fonts/**","/views/static/fonts/**")

.addResourceLocations("classpath:/static/fonts/");

registry.addResourceHandler("/static/js/**","/views/static/js/**")

.addResourceLocations("classpath:/static/js/");

registry.addResourceHandler("/static/png/**","/views/static/png/**")

.addResourceLocations("classpath:/static/png/");

registry.addResourceHandler("/static/upload/commodity/**")

.addResourceLocations("classpath:/static/upload/commodity/");

registry.addResourceHandler("/static/upload/default/**")

.addResourceLocations("classpath:/static/upload/default/");

registry.addResourceHandler("/static/upload/box/**")

.addResourceLocations("classpath:/static/upload/box/");

registry.addResourceHandler("/fragment/**")

.addResourceLocations("classpath:/templates/fragment/");

StringdefaultPicUploadPath=rootDir+AppConstant.UPLOAD_PIC_DEFAULT;

StringcommodityPicUploadPath=rootDir+AppConstant.UPLOAD_PIC_COMMODITY;

StringboxPicUploadPath=rootDir+AppConstant.UPLOAD_PIC_BOX;

if(defaultPicUploadPath!=null){

defaultPicUploadPath.replace(":",":");

StringfilePath=(defaultPicUploadPath.contains(":")?defaultPicUploadPath.split(":")[1]:defaultPicUploadPath);

registry.addResourceHandler(filePath+"/**")

.addResourceLocations("file:///"+defaultPicUploadPath);

}

if(commodityPicUploadPath!=null){

commodityPicUploadPath.replace(":",":");

StringfilePath=(commodityPicUploadPath.contains(":")?commodityPicUploadPath.split(":")[1]:commodityPicUploadPath);

registry.addResourceHandler(filePath+"/**")

.addResourceLocations("file:///"+commodityPicUploadPath+"/");

}

if(boxPicUploadPath!=null){

boxPicUploadPath.replace(":",":");

StringfilePath=(boxPicUploadPath.contains(":")?boxPicUploadPath.split(":")[1]:boxPicUploadPath);

registry.addResourceHandler(filePath+"/**")

.addResourceLocations("file:///"+boxPicUploadPath+"/");

}

}

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。