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}/ligerui2/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:

/**
 * Description:com.ims.action
 * Author: Eleven
 * Date: 2017/12/26 10:50
 */
@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;
    }
}

  這里還是說一下,對於文件的接收,其命名都是要以上傳文件對象名開頭的,比如文件對象變量名為upload,則接收文件名的變量為uploadFileName,這里稍微注意下。

  struts.xml配置:

 <action name="uploadFile3" class="FileAction" method="uploadFile3">
 </action>

  到這里,文件上傳的簡單功能就已經完成了,下面,運行截圖:

 

 對於前面開頭說的是大文件的上傳,那么這個上傳文件的最大限度是多少?在測試過程中發現,在struts.xml文件中可以控制上傳文件的大小:

<!--這里可以控制整個項目中上傳文件的大小-->
    <constant name="struts.multipart.maxSize" value="7340000"/>

  我這里舉例配置的value值是7340000,假設我現在上傳文件大小有7M,7 * 1024 * 1024 = 7340032,比我設置的value值要大,故此時上傳文件會失敗,拋出異常:

org.apache.commons.fileupload.FileUploadBase$SizeLimitExceededException: the request was rejected because its size (7576262) exceeds the configured maximum (7340000)

  所以我們可以通過設置這個值,來控制上傳文件的大小,查閱資料,也是可以局部進行控制上傳文件的大小的,即設置fileUpload攔截器,這里就不過多進行設置了,等以后有用到,再去研究也不遲。

  開心。。。。。。。

 

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM