zoukankan      html  css  js  c++  java
  • 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; 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拦截器,这里就不过多进行设置了,等以后有用到,再去研究也不迟。

      开心。。。。。。。

      

  • 相关阅读:
    python数据类型以及模块的含义
    python基础语言以及if/while语句结构
    subprocess模块
    linux 管道通信socket 全双工示例
    整体框架
    licode_WebrtcConnection
    webrtc杂谈(转)
    修改背景颜色
    激活NX窗口的按钮
    NX屏蔽窗口的按钮
  • 原文地址:https://www.cnblogs.com/eleven258/p/8126297.html
Copyright © 2011-2022 走看看