ajaxFileUpload上传文件简单示例

短命女 2022-04-11 02:15 179阅读 0赞

**写在前面：**

上传文件的方式有很多，最近在做项目的时候，一开始也试用了利用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" οnclick="text_click()" />
    
            <button οnclick="btn_upload()">开始上传</button>
        </div>
    
        <%--将文件隐藏，由点击输入框来触发选择文件--%>
        <div hidden="hidden">
            <%--这里不要忘记name，因为在后台是是以name来接收的--%>
            <input type="file" id="upload" name="upload" οnchange="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配置：

到这里，文件上传的简单功能就已经完成了，下面，运行截图：

对于前面开头说的是大文件的上传，那么这个上传文件的最大限度是多少？在测试过程中发现，在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拦截器,这里就不过多进行设置了，等以后有用到，再去研究也不迟。

开心。。。。。。。