ajaxFileUpload上傳檔案簡單示例
寫在前面:
上傳檔案的方式有很多,最近在做專案的時候,一開始也試用了利用jquery的外掛ajaxFileUpload來上傳大檔案,下面,用一個上傳檔案的簡單例子,記錄下,學習的過程~~~
話不多說,直接上程式碼:
前臺jsp頁面:` <%@ page contentType=”text/html;charset=UTF-8” language=”java” %> <% String scheme = request.getScheme(); String serverName = request.getServerName(); String contextPath = request.getContextPath(); int port = request.getServerPort();
//網站的訪問跟路徑
String baseURL = scheme + "://" + serverName + ":" + port
+ contextPath;
request.setAttribute("baseURL", baseURL);
%>
<html>
<head>
<title>ajaxFileUpload檔案上傳簡單示例</title>
<script src="${baseURL}/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
<%--引入檔案上傳外掛--%>
<%--jquery檔案上傳外掛--%>
<script src="${baseURL}/script/ajaxfileupload.js" type="text/javascript"></script>
<script type="text/javascript">
//開啟選擇檔案對話方塊
function text_click(){
$("#upload").click();
}
//選擇檔案後觸發事件函式
function test(){
//將檔名賦值到文字輸入框
var fileName = $("#upload").val();
$("#fileText").val(fileName);
}
//檔案上傳
function btn_upload(){
var fileName = $("#upload").val();
var fileName2 = $("#fileText").val();
if(fileName == "" || fileName2 == ""){
alert("請先選擇哦~~~");
}
$.ajaxFileUpload({ //Jquery外掛上傳檔案
url: '${baseURL}/uploadFile3',
secureuri: false,//是否啟用安全提交 預設為false
fileElementId: "upload", //type="file"的id
dataType: "text", //返回值型別
success: function (data)
{
if(data.indexOf("success")!=-1){//上傳成功
alert("上傳成功!");
}else{
alert("上傳失敗。。");
}
},
});
}
</script>
</head>
<body style="padding:10px">
<div id="layout1">
<div >
檔名(上傳): <input type="text" style="height: 25px;width: 250px;" id="fileText" onclick="text_click()" />
<button onclick="btn_upload()">開始上傳</button>
</div>
<%--將檔案隱藏,由點選輸入框來觸發選擇檔案--%>
<div hidden="hidden">
<%--這裡不要忘記name,因為在後臺是是以name來接收的--%>
<input type="file" id="upload" name="upload" onchange="test();">
</div>
</div>
</body>
</html>
後臺action:
@Controller(“FileAction”) public class FileAction extends BaseAction{
//記得提供對應的get set方法
//上傳檔案物件(和表單type=file的name值一致)
private File upload;
//檔名
private String uploadFileName;
//上傳型別
private String uploadContentType;
public void uploadFile3() throws Exception{
String str = "D:/upload33/"; //檔案儲存路徑
System.out.println("檔案路徑===="+uploadFileName);
String realPath = str + uploadFileName;
File tmp =new File(realPath);
FileUtils.copyFile(upload, tmp);
System.out.println("上傳檔案"+uploadFileName+",大小:"+(upload.length()/1024/1024)+"M");
//當檔案上傳成功,用流寫訊息給頁面
PrintWriter writer = ServletActionContext.getResponse().getWriter();
writer.print("success");
}
public File getUpload() {
return upload;
}
public void setUpload(File upload) {
this.upload = upload;
}
public String getUploadFileName() {
return uploadFileName;
}
public void setUploadFileName(String uploadFileName) {
this.uploadFileName = uploadFileName;
}
public String getUploadContentType() {
return uploadContentType;
}
public void setUploadContentType(String uploadContentType) {
this.uploadContentType = uploadContentType;
}
}