ajaxFileUpload上传文件简单示例

最新推荐文章于 2024-05-09 14:38:11 发布

蓝色水

最新推荐文章于 2024-05-09 14:38:11 发布

阅读量568

点赞数

分类专栏： JQUERY

JQUERY 专栏收录该内容

43 篇文章 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配置：

 <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拦截器,这里就不过多进行设置了，等以后有用到，再去研究也不迟。

　　开心。。。。。。。

蓝色水

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajaxFileUpload上传文件简单示例

写在前面：　　上传文件的方式有很多，最近在做项目的时候，一开始也试用了利用jquery的插件ajaxFileUpload来上传大文件，下面，用一个上传文件的简单例子，记录下，学习的过程~~~ 　　还是老样子，上代码最明了啦。。　　前台jsp页面：&lt;%@ page contentType="text/html;charset=UTF-8" language="j...
复制链接

扫一扫

专栏目录