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")@ResponseBodypublic 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.FilenameUtilsString fileName = UUID.randomUUID().toString() + "." + FilenameUtils.getExtension(orgFileName);try {//(傳入文件地址,文件名)創建新文件File targetFile = new File(basePath, fileName);//開始讀寫文件FileUtils-->org.apache.commons.io.FileUtilsFileUtils.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處理,更多的是我們圖片這樣的信息都存儲在阿里云服務器上,這樣我們的應用只處理動態的請求

總結

以上是生活随笔為你收集整理的uploadify 实现文件上传的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。