uploadify 实现文件上传

简介: uploadify官网我们需要到官网上下载需要的插件引入到项目中,同时我们最好看看uploadify的中文文档,当然直接把下面的代码复制作为一个工具类也行,反正都是大同小异.

uploadify官网我们需要到官网上下载需要的插件引入到项目中,同时我们最好看看uploadify的中文文档,当然直接把下面的代码复制作为一个工具类也行,反正都是大同小异.

如何实现图片上传功能?
在实际应用中我们会经常遇到实名认证的功能需要上传正反面照片或者上传文件之类的,如下图

img_a12173bbfab1bf5e458e1ffc307e3171.png
首先简单介绍一下uploadify原理

了解:
.swf结尾的就是flash文件或者程序,它必须在flash player上才能运行(类似.class文件是字节码文件,它是不能直接运行的必须在JVM上才能运行)
为什么使用flash 实现文件上传?
因为flash 是一个程序可以直接开启和后台的连接,我们通过这个连接提交文件到后台

可以这么理解:
1.浏览器里嵌入一个flash player,
2.flash player里运行一个flash程序 /xxxx/uploadify.swf,
3./xxxx/uploadify.swf 这个程序单独开启一个后台连接,把我们的文件从前台传到后台

img_bf6be97d26dcee926937e3dc4eaced21.png

执行流程:js先发出上传命令,js对象就是uploadify.swf对外的接口,我们只需操作js,js对象就会告诉uploadify.swf程序我们需要上传了,我们实现文件上传主要是通过uploadify对外提供的js对象,uploadify.swf是flash程序 ,它必须在flash player上才能运行.

img_edc174515533a732ad680eee515c196e.png

现在我们开始实现文件上传的操作

img_67803ea09ee5b4b049a2425cafa1f7d9.png
1.首先引入uploadify的插件

jquery.uploadify.js
jquery.uploadify.min.js 是uploadify.swf提供我们操作uploadify.swf 的js对象
uploadify.swf 做上传的flash程序
uploadify-cancel.png 取消上传的图片

2.先看官网给我们的Basic Demo
img_7591bd237ea97e16d89c2f63d72b6f12.png

$(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
img_b9cf82ff8c0476e26e952a8535147725.png
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);
        }
    });
img_990e3b4918d176e6c1b6c1b5a7723a6e.png

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>
img_e40a67794448830733b320fe434307b7.png
 /**
     * 实名认证图片上传
     *
     * @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;
    }
}

img_93f4ee998b81fa673b52614234be786b.png
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 

img_fd974f0dc3b627ee47e9c1156601bac8.png

6.图片回显后将值设置给uploadImage1

onUploadSuccess:function(file,data){
    $("#uploadImg1").attr("src",data);
    $("#uploadImage1").val(data);
}
img_5889a36443f62e09dd7083c578cbcc7a.png
img_bbc7e2cda6d6a98706ea23193e2557ec.png

总结:这是基于Spring boot的文件上传,在这里我们配置的上传图片的静态资源都是保存在本地,在我们的实际项目中这些静态资源都会交给nginx处理,更多的是我们图片这样的信息都存储在阿里云服务器上,这样我们的应用只处理动态的请求

目录
相关文章
|
SQL 监控 druid
Druid未授权访问 漏洞复现
Druid未授权访问 漏洞复现
13712 0
|
8月前
|
存储 算法 安全
SM2解密
【10月更文挑战第5天】SM2解密
445 11
|
7月前
|
SQL 存储 数据处理
兼顾高性能与低成本,浅析 Apache Doris 异步物化视图原理及典型场景
Apache Doris 物化视图进行了支持。**早期版本中,Doris 支持同步物化视图;从 2.1 版本开始,正式引入异步物化视图,[并在 3.0 版本中完善了这一功能](https://www.selectdb.com/blog/1058)。**
|
8月前
|
存储 域名解析 监控
云上攻防:任意上传、域名接管与AK/SK泄漏
随着企业上云的趋势加剧,云安全成为新的焦点。本文探讨了云计算环境中的三大安全问题:任意上传、域名接管与AK/SK泄漏,分析了这些威胁的工作原理及防护措施,强调了数据保护和访问控制的重要性。通过阿里云等平台的实际案例,提供了具体的安全防范建议。
1124 2
云上攻防:任意上传、域名接管与AK/SK泄漏
|
6月前
|
机器学习/深度学习 存储 人工智能
【AI系统】TVM 实践案例
本文探讨了如何利用AI编译器在新硬件上部署神经网络,重点介绍了TVM的工作流程,包括模型导入、转换为Relay、TE和TIR、自动调优、编译为机器码等步骤。文章还讨论了算法层面上的算子优化、量化技术,以及编译层面对量化模型的解析和计算图优化。此外,还介绍了TVM的BYOC框架,允许硬件加速器供应商通过即插即用的方式集成代码工具,实现高效编译和优化。最后,文章提及了算子和网络仿真的重要性,确保新硬件平台上的模型正确性和性能。
150 2
|
前端开发
构建一个简单的React图片画廊应用
构建一个简单的React图片画廊应用
217 0
|
8月前
|
安全 网络协议 NoSQL
SSRF漏洞深入利用与防御方案绕过技巧
SSRF漏洞深入利用与防御方案绕过技巧
621 0
|
7月前
|
缓存 Java 数据库连接
Hibernate:Java持久层框架的高效应用
通过上述步骤,可以在Java项目中高效应用Hibernate框架,实现对关系数据库的透明持久化管理。Hibernate提供的强大功能和灵活配置,使得开发者能够专注于业务逻辑的实现,而不必过多关注底层数据库操作。
175 1
|
8月前
|
存储 SQL NoSQL
数据库技术深度探索:从关系型到NoSQL的演变
【10月更文挑战第21天】数据库技术深度探索:从关系型到NoSQL的演变
206 1