1. 程式人生 > >ajaxFileUpload上傳檔案簡單示例

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;
}

}