0

0

uploadFile+nginx实现上传图片(Windows/Linux均可用)

php中文网

php中文网

发布时间:2016-07-29 09:04:54

|

2628人浏览过

|

来源于php中文网

原创

       上传图片的功能想必并不是什么费劲的事儿了,但大多数童鞋都是在本机(也是tomcat/jboss服务器)实现上传,且没有考虑图片重命名(中文乱码)的问题。

       这篇博客的上传图片是基于真实的项目,且采用了nginx图片服务器,Windows和Linux服务器均可使用。

       Jsp页面:需要一个file控件,一个hidden控件(用于建立自定义分类文件夹)和一个button(上传按钮)。

<div>
    	<p class="ui-tips">上传头像会自动生成头像缩略图片,您也可以拖动大图的裁剪区域,调整缩图内容。</p>
    	<p class="ui-tips">支持JPG、GIF、PNG等图片格式 推荐尺寸:180*180像素</p>
    	<input type="file"  id="fileCoursePoster"
	style="display: none;" name="fileCoursePoster" />
		<span id="errorCoursePoster" style="color: red; display: none;">请上传图片!</span>
	<input type="button"  value="上传头像" class="btn btn-sm btn-normal">
	<input type="hidden" id="imageType" name="imageType"> 
</div>

       Js:需要引入ajaxfileupload这个js。

	function upLoad(){
		document.getElementById("imageType").value = "headPicture"; //图片分类,自定义类型,是海报还是个人头像
		$("#fileCoursePoster").click();
	}
	function uploadCoursePoster() {
		var imageType = document.getElementById("imageType").value;
		var studentId=$("#studentId").val();
		$.ajaxFileUpload({
			url : "/itoo-jrkj-student-web/media/uploadImages",		
			secureuri : false,
			data : {
				"studentId" : studentId,
				"imageType" : imageType
			},
			fileElementId : "fileCoursePoster",// 文件选择框的id属性
			dataType : 'json',
			success : function(data) {
				$("#imgCoursePoster").attr(
						"src",
						"http://123.56.120.25:8888/apple/"
								+ data);
				$('#headPic').val(data);
				alert("上传成功!");
			},
			error : function(XMLHttpRequest, textStatus, errorThrown) {
				alert("上传失败!");
			}
		});
	}

       Controller:

网趣购物系统精装版
网趣购物系统精装版

精装版对原程序进行了大量的更新和调整,在安全性和实用性上均有重大突破,特色功能:完美整合支付宝功能,根据用户需求,并具有打开和关闭支付宝的功能!匿名用户购买功能,商城支持匿名直接购买商品功能,方便用户购物!增加了后台LOGO图片上传管理功能,管理简单、易用对广告管理进行扩充,所有广告图片、FLASH均可实现在线上传管理!多种在线支付方式,程序同时支持网银、西部支付,可自由选择切换!支持简繁互换显示

下载
// 上传个人头像--生成图片路径并将路径保存到数据库
	@RequestMapping(value = "media/uploadImages", produces = "text/plain;charset=UTF-8")
	@ResponseBody
	public void uploadImages(HttpServletRequest request,
			HttpServletResponse response) throws IllegalStateException,
			IOException {
		// 上传到指定的文件夹中,imageType为文件夹的名字
		String imageType = request.getParameter("imageType").toString(); //文件夹名,便于图片分类
		MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; 
		String fileName = "";//图片的名字

		Calendar date = Calendar.getInstance(); //以图片类别+日期规划图片文件夹层级
		SimpleDateFormat format1 = new SimpleDateFormat("yyyy");
		SimpleDateFormat format2 = new SimpleDateFormat("MM");
		SimpleDateFormat format3 = new SimpleDateFormat("dd");
		String year = format1.format(date.getTime());
		String month = format2.format(date.getTime());
		String day = format3.format(date.getTime());
		// 上传的图片存储的路径,格式如下:
		
//------------------要先将文件传入本机Jboss下的jboss3.1/bin文件夹中,因为File获得图片的绝对路径是自己定位到这儿了

		String uploadServicePath = "";
		String filePath="";
		for (Iterator it = multipartRequest.getFileNames(); it.hasNext();) {
			String key = (String) it.next();
			MultipartFile mulfile = multipartRequest.getFile(key);
			fileName = mulfile.getOriginalFilename(); //获取上传图片的文件名,以便得到其在jboss中的路径
			//获取存在服务器下的图片的绝对路径
			File getFilePath=new File(fileName);//要根据图片名字获取路径
			filePath=getFilePath.getAbsolutePath();//获取Jboss服务器bin路径
			File file = new File(filePath);
			mulfile.transferTo(file);//保存
		}
		
		File imagefile = new File(filePath);  
        //TODO:创建ftp客户端  --读配置文件
        FTPClient ftpClient = new FTPClient();
        ftpClient.setControlEncoding("GBK");  
        String hostname = "xxx.xxx.xxx.xxx";  //FTP服务器主机ip
        int port = 21;//FTP服务器端口,默认就是21
        String username = "apple";  //FTP服务器用户名(可以有多个)
        String password = "apple123";//FTP服务器密码
        try {  
            //链接ftp服务器  
            ftpClient.connect(hostname, port);  
            //登录ftp  
            ftpClient.login(username, password);  
            int reply = ftpClient.getReplyCode();    //ftp服务状态码
            System.out.println("reply返回码是:"+reply);
            
            //如果reply返回230就算成功了,如果返回530密码用户名错误或当前用户无权限。  
            if (!FTPReply.isPositiveCompletion(reply)) {    
                    ftpClient.disconnect();    
                    return ;    
                }    
                ftpClient.setFileType(FTPClient.BINARY_FILE_TYPE);  
                // 保存图片的相对路径到阿里云服务器
                fileName=UUID.randomUUID().toString()+".jpg";//自定义图片名,也能防止汉字的干扰
                uploadServicePath ="uploadImage/" + imageType + "/" + year + "/"
        				+ month+day+"/"+fileName; //上传到服务器的路径
                //在nginx上创建文件夹,一次只能创建一级,所以建多级要分多次
                ftpClient.makeDirectory("uploadImage");//什么的都不写的情况下,默认在root目录下创建文件夹,此处在nginx/apple/uploadImage下,apple文件夹是用户名,创建用户时自动建好的
                ftpClient.makeDirectory("uploadImage/"+imageType);
                ftpClient.makeDirectory("uploadImage/"+imageType+ "/" + year);
                ftpClient.makeDirectory("uploadImage/"+imageType+ "/" + year +"/"+month+day);  
                
                InputStream input = new FileInputStream(imagefile);   
                ftpClient.storeFile(uploadServicePath, input);//文件你若是不指定就会上传到root目录下
                input.close();    
                ftpClient.logout();   
              
        } catch (SocketException e) {  
            e.printStackTrace();  
        } catch (IOException e) {  
            e.printStackTrace();  
        }finally   
        {    
            if (ftpClient.isConnected())  
            {    
                try   
                {    
                    ftpClient.disconnect();    
                } catch (IOException ioe)   
                {    
                    ioe.printStackTrace();  
                }    
            }   
        }
		
		// 根据id更新个人信息
		Student student = new Student();
		String studentId = request.getParameter("studentId");
		student = studentBean.findStudentById(studentId, dataBaseName);
		student.setDataBaseName(dataBaseName);
		student.setHeadPic(uploadServicePath);
		if (!studentBean.updateHeadPicture(student)) {
			uploadServicePath = "error";
		}

		System.out.println("realPath-------------" + uploadServicePath);
		JacksonJsonUntil jacksonJsonUntil = new JacksonJsonUntil();
		jacksonJsonUntil.beanToJson(response, uploadServicePath);
	}

	// 读取往期图片
	@RequestMapping(value = "media/readImages", produces = "text/plain;charset=UTF-8")
	public void readImage(HttpServletRequest request,
			HttpServletResponse response) {
		// 或:从服务器中的相对位置读取图片
		// String imagesPath
		// =request.getSession().getServletContext().getRealPath("/")+request.getParameter("imagesPath");
		String imagesPath = request.getParameter("imagesPath");
		System.out.println("imagesPath-------------------" + imagesPath);
		try {
			File file = new File(imagesPath);
			if (file.exists()) {
				DataOutputStream temps = new DataOutputStream(
						response.getOutputStream());
				DataInputStream in = new DataInputStream(new FileInputStream(
						imagesPath));
				byte[] b = new byte[2048];
				while ((in.read(b)) != -1) {
					temps.write(b);
					temps.flush();
				}
				in.close();
				temps.close();
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

               有一个问题,就是上传过程中,Eclipse中常会出现net.connention.timeout;FireBug中出现“图像损坏”这两个异常,但并不影响使用。怀疑是我把所有图片都改为了JPG类型~ 还没测试到底是不是。

         解决思路:在Controller里判断一下,截取原图片名字的类型,即“.xxx”或“.xxxx”,如果不属于jpg/jpeg/png/gif四种类型就不许上传,符合的将其重命名后再加上它本来的图片类型后缀。

         

以上就介绍了uploadFile+nginx实现上传图片(Windows/Linux均可用),包括了方面的内容,希望对PHP教程有兴趣的朋友有所帮助。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法

本专题系统整理pixiv网页版官网入口及登录访问方式,涵盖官网登录页面直达路径、在线阅读入口及快速进入方法说明,帮助用户高效找到pixiv官方网站,实现便捷、安全的网页端浏览与账号登录体验。

797

2026.02.13

微博网页版主页入口与登录指南_官方网页端快速访问方法
微博网页版主页入口与登录指南_官方网页端快速访问方法

本专题系统整理微博网页版官方入口及网页端登录方式,涵盖首页直达地址、账号登录流程与常见访问问题说明,帮助用户快速找到微博官网主页,实现便捷、安全的网页端登录与内容浏览体验。

272

2026.02.13

Flutter跨平台开发与状态管理实战
Flutter跨平台开发与状态管理实战

本专题围绕Flutter框架展开,系统讲解跨平台UI构建原理与状态管理方案。内容涵盖Widget生命周期、路由管理、Provider与Bloc状态管理模式、网络请求封装及性能优化技巧。通过实战项目演示,帮助开发者构建流畅、可维护的跨平台移动应用。

144

2026.02.13

TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

25

2026.02.13

Redis高可用架构与分布式缓存实战
Redis高可用架构与分布式缓存实战

本专题围绕 Redis 在高并发系统中的应用展开,系统讲解主从复制、哨兵机制、Cluster 集群模式及数据分片原理。内容涵盖缓存穿透与雪崩解决方案、分布式锁实现、热点数据优化及持久化策略。通过真实业务场景演示,帮助开发者构建高可用、可扩展的分布式缓存系统。

92

2026.02.13

c语言 数据类型
c语言 数据类型

本专题整合了c语言数据类型相关内容,阅读专题下面的文章了解更多详细内容。

53

2026.02.12

雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法
雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法

本专题系统整理雨课堂网页版官方入口及在线登录方式,涵盖账号登录流程、官方直连入口及平台访问方法说明,帮助师生用户快速进入雨课堂在线教学平台,实现便捷、高效的课程学习与教学管理体验。

15

2026.02.12

豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法
豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法

本专题汇总豆包AI官方网页版入口及在线使用方式,涵盖智能写作工具、图片生成体验入口和官网登录方法,帮助用户快速直达豆包AI平台,高效完成文本创作与AI生图任务,实现便捷智能创作体验。

717

2026.02.12

PostgreSQL性能优化与索引调优实战
PostgreSQL性能优化与索引调优实战

本专题面向后端开发与数据库工程师,深入讲解 PostgreSQL 查询优化原理与索引机制。内容包括执行计划分析、常见索引类型对比、慢查询优化策略、事务隔离级别以及高并发场景下的性能调优技巧。通过实战案例解析,帮助开发者提升数据库响应速度与系统稳定性。

64

2026.02.12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Excel 教程
Excel 教程

共162课时 | 18.3万人学习

Pandas 教程
Pandas 教程

共15课时 | 1.1万人学习

C# 教程
C# 教程

共94课时 | 9.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号