uploadify官网我们需要到官网上下载需要的插件引入到项目中,同时我们最好看看uploadify的中文文档,当然直接把下面的代码复制作为一个工具类也行,反正都是大同小异.
如何实现图片上传功能?
在实际应用中我们会经常遇到实名认证的功能需要上传正反面照片或者上传文件之类的,如下图
首先简单介绍一下uploadify原理
了解:
以.swf结尾的就是flash文件或者程序,它必须在flash player上才能运行(类似.class文件是字节码文件,它是不能直接运行的必须在JVM上才能运行)
为什么使用flash 实现文件上传?
因为flash 是一个程序可以直接开启和后台的连接,我们通过这个连接提交文件到后台
可以这么理解:
1.浏览器里嵌入一个flash player,
2.flash player里运行一个flash程序 /xxxx/uploadify.swf,
3./xxxx/uploadify.swf 这个程序单独开启一个后台连接,把我们的文件从前台传到后台
执行流程:js先发出上传命令,js对象就是uploadify.swf对外的接口,我们只需操作js,js对象就会告诉uploadify.swf程序我们需要上传了,我们实现文件上传主要是通过uploadify对外提供的js对象,uploadify.swf是flash程序 ,它必须在flash player上才能运行.
现在我们开始实现文件上传的操作
1.首先引入uploadify的插件
jquery.uploadify.js
jquery.uploadify.min.js 是uploadify.swf提供我们操作uploadify.swf 的js对象
uploadify.swf 做上传的flash程序
uploadify-cancel.png 取消上传的图片
2.先看官网给我们的Basic Demo
$(function() {
$("#file_upload_1").uploadify({
height : 30,
swf : '/uploadify/uploadify.swf',
uploader : '/uploadify/uploadify.php',
width : 120
});
});
height : 30, width : 120--> 按钮的高和宽,
swf : '/uploadify/uploadify.swf'-->uploadify/对应的flash程序的地址 ,
uploader : '/uploadify/uploadify.php' -->指向的是后台地址,处理文件上传
3.根据Demo我们在前台界面引入 jquery.uploadify.min.js
4.点击上传按钮
$("#uploadBtn1").uploadify({
swf : "/js/plugins/uploadify/uploadify.swf",
uploader : "/realAuthImageUpload",
fileObjName : "image",
buttonText : "上传正面照片",
fileTypeExts : "*.jpg;*.png;*.gif;*.jpeg",
multi : false,
overrideEvents:['onUploadSuccess','onSelect'],
onUploadSuccess:function(file,data){
$("#uploadImg1").attr("src",data);
$("#uploadImage1").val(data);
}
});
swf :flash程序地址
uploader:处理文件上传的后台地址,
fileObjName:上传文件名
buttonText:选择上传文件按钮文字
fileTypeExts:上传文件的类型
multi :是否可以多选
overrideEvents:重写事件
onUploadSuccess:上传成功回调函数(回显图片)
onSelect:选择文件后向队列中添加每个上传任务时都会触发(这里是重写这个方法的空方法 覆盖原有的方法不显示上传进度之类的)
5.处理后台业务
处理文件上传的后台地址uploader : "/realAuthImageUpload"
先在pom.xml中添加依赖
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.2</version>
</dependency>
/**
* 实名认证图片上传
*
* @param image
* @return 文件名
*/
@RequestMapping("realAuthImageUpload")
@ResponseBody
public String realAuthImageUpload(MultipartFile image) {
logger.info("^^^^^^^^^^^处理文件上传^^^^^^^^^^^");
String fileName = UploadUtil.upload(image, "/Users/zhangshuai/Desktop/p2p/upload");
return fileName;
}
UploadUtil.java 上传文件工具类
import java.io.File;
import java.io.IOException;
import java.util.UUID;
import org.apache.commons.io.FileUtils;
import org.apache.commons.io.FilenameUtils;
import org.springframework.web.multipart.MultipartFile;
/**
* 上传工具
* Created by zhangshuai on 2017/10/7.
*/
public class UploadUtil {
/**
* 处理文件上传
*
* @param file 要上传的文件
* @param basePath 上传地址
* @return
*/
public static String upload(MultipartFile file, String basePath) {
String orgFileName = file.getOriginalFilename();
//uuid+原文件的后缀 --->作为新文件的fileName
// FilenameUtils.getExtension(orgFileName)-->org.apache.commons.io.FilenameUtils
String fileName = UUID.randomUUID().toString() + "." + FilenameUtils.getExtension(orgFileName);
try {
//(传入文件地址,文件名)创建新文件
File targetFile = new File(basePath, fileName);
//开始读写文件FileUtils-->org.apache.commons.io.FileUtils
FileUtils.writeByteArrayToFile(targetFile, file.getBytes());
} catch (IOException e) {
e.printStackTrace();
}
return fileName;
}
}
6.需要在配置文件中配置相关属性
application-website.properties
#文件上传配置
spring.http.multipart.maxFileSize=2MB
spring.http.multipart.maxRequestSize=10MB
#自动加载静态资源的地址
spring.resources.static-locations=classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,file:/Users/zhangshuai/Desktop/p2p/upload
6.图片回显后将值设置给uploadImage1
onUploadSuccess:function(file,data){
$("#uploadImg1").attr("src",data);
$("#uploadImage1").val(data);
}
总结:这是基于Spring boot的文件上传,在这里我们配置的上传图片的静态资源都是保存在本地,在我们的实际项目中这些静态资源都会交给nginx处理,更多的是我们图片这样的信息都存储在阿里云服务器上,这样我们的应用只处理动态的请求
