文件上傳的步驟:
1.<input type="file" />
2.首先要更改form的enctype="multipart/form-data"
表示向服務器傳輸的過程中以二進制的方式傳輸
默認傳輸類型: enctype="application/x-www-form-urlencoded"
3.相關jar包 下載地址 www.apache.org
commons-fileupload-1.2.1.jar 核心組件包
commons-io-2.0.1.jar --fileupload組件包,依賴了IO
commons-lang3-3.1.jar
commons-logging-1.1.3.jar
json-lib-2.4-jdk15.jar JSON工具類
struts2-json-plugin-2.3.15.1.jar
4.普通上傳頁面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>文件上傳的開發</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!-- <link rel="stylesheet" type="text/css" href="styles.css"> -->
</head>
<body>
<form action="upload/uploadAction.jsp?dirpath=pipi" method="post" enctype="multipart/form-data">
<p><input type="text" name="username" value="pipi" /></p>
<p><input type="file" name="file000" /></p>
<input type="submit" value="提交" />
</form>
</body>
</html>
5.ajax上傳頁面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ajax文件上傳的開發</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<!-- <link rel="stylesheet" type="text/css" href="styles.css"> -->
<style type="text/css"> #percent{width:600px;height:30px;position:relative;border:1px solid green;} #percent #per{height:30px;background:green;position:absolute;left:0;top:0;}
</style>
</head>
<body>
<form action="upload/uploadAction.jsp?dirpath=pipi" method="post" enctype="multipart/form-data">
<a href="javascript:;" class="uploadbtn" onclick="openFileDialog()">文件上傳</a>
<input type="file" name="file" id="file" onchange="uploadFile()" style="display: none;" />
<input type="submit" value="提交" />
</form>
<img id="showImg" width="160" height="120" />
<ul id="showlist">
</ul>
<div id="percent">
<div id="per"></div>
</div>
<div id="pnum"></div>
<script type="text/javascript">
function openFileDialog(){ var ie = navigator.appName == "Microsoft Internet Explorer"?true:false; if(ie){ //如果是ie瀏覽器
document.getElementById("file").click(); }else{ //自定義事件es5中的內容
var a = document.createEvent("MouseEvents"); a.initEvent("click",true,true); document.getElementById("file").dispatchEvent(a); } }; //ajax文件上傳 不支持低版本瀏覽器
function uploadFile(){ //拿到文件上傳的隊列
var files = document.getElementById("file").files var file = files[0]; var type = file.type;//文件類型
var name = file.name;//文件名稱
var size = file.size;//文件大小
if(type.indexOf("image") == -1) { alert("請上傳圖片類型") return; } //alert(file.name+"===="+file.size+"==="+file.type);
showImage(file,function(data){ document.getElementById("showImg").src=data; }) var form = new FormData(); form.append("file",file); //如何傳輸給服務器端，進度條
var xhr = new XMLHttpRequest(); //請求服務器
xhr.open("post", "upload/uploadAction.jsp?dirpath=pipi",true); xhr.onreadystatechange = function(){ if(this.readyState == 4 && this.status == 200){ var data = this.responseText; var jsonData = eval("("+data+")"); var html = ""; for(var i=0;i<jsonData.length;i++){ html += "<li>"+jsonData[i].name+"===="+jsonData[i].sizeString+"====<img src='"+jsonData[i].url+"' width='50' height='50'/>" } console.log(data); document.getElementById("showlist").innerHTML += html; } }; xhr.upload.addEventListener("progress", progressFunction,false); xhr.send(form); } //進度條
function progressFunction(evt){ console.log("------"); var perDom = document.getElementById("per"); if(evt.lengthComputable){ //evt.loaded已經上傳了多少
//event.total上傳文件的總大小
var p = evt.loaded / event.total; console.log(p); var pnum = Math.floor(p*100) +"%"; perDom.style.width = pnum; document.getElementById("pnum").innerHTML = pnum; } } /*圖片預覽*/
function showImage(f,callback){ var reader = new FileReader(); reader.onload = (function(theFile) { return function(e) { // img 元素
if(callback)callback(e.target.result); }; })(f); reader.readAsDataURL(f); }; </script>
</body>
</html>
6.后台處理類
<%@page import="org.apache.struts2.json.JSONUtil"%>
<%@page import="com.rui.util.StrUtils"%>
<%@page import="java.io.File"%>
<%@page import="org.apache.commons.fileupload.FileItem"%>
<%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>
<%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
<%@page import="org.apache.commons.fileupload.FileItemFactory"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
/*文件上傳的方式*/
//1.獲取文件上傳的工廠類 FileItemFactory factory = new DiskFileItemFactory(); //2.解析上傳文件的工廠 ServletFileUpload fileUpload = new ServletFileUpload(factory); //3.通過解析類解析request對象中的二進制文件 List<FileItem> fileItems = fileUpload.parseRequest(request); //4.讀取二進制文件,寫入服務器 //獲取服務器的路徑getRealPath()獲取當前項目所在服務器的根目錄 //D:\tool\dev\apache-tomcat-7.0.56-windows-x86\apache-tomcat-7.0.56\me-webapps\fileUpload\resource String dirpath = request.getParameter("dirpath");//
if(StrUtils.isEmpty(dirpath)) dirpath = "default"; String fpath = "resource/"+dirpath; String path = request.getRealPath(fpath); File rootPath = new File(path); //如果目錄不存在就動態創建 if(!rootPath.exists()){ rootPath.mkdirs(); } //如果有文件,就開始進行讀和寫 if(fileItems != null && fileItems.size()>0){ List<Map<String,Object>> maps = new ArrayList<Map<String,Object>>(); for(FileItem fileItem : fileItems){ if(!fileItem.isFormField()){//判斷是不是file表單 //獲取文件名稱 String filename = fileItem.getName(); //文件大小 long filesize = fileItem.getSize(); //獲取文件后綴 String ext = StrUtils.getExt(filename, true); //重構文件的名稱===頭像上傳的原理就是文件的覆蓋 String fname = UUID.randomUUID().toString()+ext; File fileName = new File(rootPath,fname); fileItem.write(fileName); Map<String,Object> map = new HashMap<String,Object>(); map.put("name", filename); map.put("size", filesize); map.put("sizeString", StrUtils.countFileSize(filesize)); map.put("url", fpath+"/"+fname); maps.add(map); } } out.print(JSONUtil.serialize(maps)); }else { out.print(""); //response.sendRedirect("fail.jsp"); } //5.在服務器創建一個上傳的目錄 //6.開始寫入 //7.返回數據 //response.sendRedirect("success.jsp"); %>
7.工具類
package com.rui.util; import java.text.DateFormat; import java.text.DecimalFormat; import java.text.SimpleDateFormat; import java.util.Date; import java.util.Random; /** * * @ClassName: StrUtils * @Description: 工具類 * @author poseidon * @date 2015年10月23日 下午8:13:45 * @version V1.0.0 */
public class StrUtils { /** * * @Title: isEmpty * @Description: 空判斷 * @param content * @return boolean */
public static boolean isEmpty(String content){ return (content==null || content.equals(""))?true:false; } /** * * @Title: isNotEmpty * @Description: 非空判斷 * @param content * @return boolean */
public static boolean isNotEmpty(String content){ return !isEmpty(content); } /** * * @Title: formatDate * @Description: 格式化日期類 * @param date * @param pattern * @return String */
public static String formatDate(Date date,String pattern){ if(date!=null){ String dateString = new SimpleDateFormat(pattern).format(date); return dateString; }else{ return ""; } } /** * * @Title: getExt * @Description: 獲取文件的后綴 * @param name 文件名稱 * @param flag true有點false沒點 * @return String */
public static String getExt(String name,boolean flag){ if(isNotEmpty(name)){ String ext = null; if(flag){ ext = name.substring(name.lastIndexOf("."), name.length()); }else{ ext = name.substring(name.lastIndexOf(".")+1, name.length()); } return ext; }else{ return ""; } } /** * * @Title: generateFileName * @Description: 為上傳文件自動分配文件名稱，避免重復 * @param fileName * @param randomNum * @param dataPattern * @return String */
public static String generateFileName(String fileName,int randomNum,String dataPattern) { // 獲得當前時間
DateFormat format = new SimpleDateFormat(dataPattern); // 轉換為字符串
String formatDate = format.format(new Date()); // 隨機生成文件編號
int random = new Random().nextInt(randomNum); // 獲得文件后綴名稱
int position = fileName.lastIndexOf("."); String extension = fileName.substring(position); // 組成一個新的文件名稱
return formatDate + random + extension; } /** * * @Title: countFileSize * @Description: 根據File文件的長度統計文件的大小 * @param fileSize * @return String */
public static String countFileSize(long fileSize) { String fileSizeString = ""; try { DecimalFormat df = new DecimalFormat("#.00"); long fileS = fileSize; if (fileS == 0) { fileSizeString = "0KB"; } else if (fileS < 1024) { fileSizeString = df.format((double) fileS) + "B"; } else if (fileS < 1048576) { fileSizeString = df.format((double) fileS / 1024) + "KB"; } else if (fileS < 1073741824) { fileSizeString = df .format(((double) fileS / 1024 / 1024) - 0.01) + "MB"; } else { fileSizeString = df.format((double) fileS / 1024 / 1024 / 1024) + "G"; } } catch (Exception e) { e.printStackTrace(); } return fileSizeString; } /** * * @Title: conversionSpecialCharacters * @Description: 把兩個反斜線轉換成正斜線 * @param string * @return String */
public static String conversionSpecialCharacters(String string) { return string.replaceAll("\\\\", "/"); } public static void main(String[] args) { } }