Java+jsp文件上传（ajax）的方式

今天在开发项目的时候碰到了一个需求，一个简单的文件上传。但是上传后需要通过回调函数做一些上传完毕的操作。发现通过<form><file><input submit>能做到文件上传，但是回调函数不是很好实现。 于是打算改用ajax的形式去提交。以下是实现的代码：

 

jsp页面：（css样式和标签引入属于自己定制的，与本文无关，直接去了就好）；

    <%@page language="java" contentType="text/html; charset=utf-8"%>
    <%@include file="/tagDeclare.jsp"%>
    <%@include file="/headDeclare.jsp"%>
</head>
    <body>
        <form
    action="${basePath}market/contractDocumentAction!fileUpload.action"
            name="aform" method="post" id="actionForm"
            ENCTYPE="multipart/form-data">
            <div class="dialogTop">
                <table width="400" border="0" align="center" cellpadding="0"
                    cellspacing="10">
                    <tr>
                        <td>请选择文件</td>
                        <td><input name="upload" type="FILE" id="attach" size="10"></td>
                        <input type="hidden" name="conId" id="cid" value="${contractId}" />
                    </tr>
                </table>
            </div>
            <div class="dialogBottom">
                <div class="btns">
                    <input type="button" class="ldBtnGreen" value="提交" onclick="sub()" />
                    <input type="button" class="ldBtnGray" value="关闭"
                        onclick="ldDialog.close();" />
                </div>
            </div>
        </form>
    
    </body>
    </html>

javaScript：

<script type="text/javascript">
        function sub() {
            var fileObj = document.getElementById("attach").files[0]; // js 获取文件对象 ie8以下不支持files
            if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
                ldDialog.alert("请选择文件");
                return;
            }
            if(fileObj.size >(1024*1024*10))
            {
                ldDialog.alert("不能上传超过10Mb的文件！");
                return;
            }
            var formFile = new FormData();
            formFile.append("file", fileObj); //加入文件对象
            formFile.append("conIds", $("#cid").val()); //附加参数1  因为不能序列化表单，提交的时候将form的非文件域的值获取到后拼装到此处。后台获取参数的方法不变
            formFile.append("filename", fileObj.name);//附加参数2
            var data = formFile;
            $.ajax({
                url : "${basePath}market/contractDocumentAction!fileUpload.action?" ,
                data : data,
                type : "Post",
                dataType : "json",
                cache : false,//上传文件无需缓存
                processData : false,//用于对data参数进行序列化处理 这里必须false，如果序列化处理了 那么form中的file怎无法提交。
                contentType : false, //必须
                success : function(result) {
                    ldDialog.close("上传合同文件成功");
                    return;
                }
            })
    
        }
    </script>

Struts2 Action代码

public class ContractDocumentAction extends ActionSupport {

    // 封装上传文件属性
    private File file;
    // 封装上传文件名称
    private String filename;


    public String getFilename() {
        return filename;
    }

    public void setFilename(String filename) {
        this.filename = filename;
    }public File getFile() {
        return file;
    }

    public void setFile(File file) {
        this.file = file;
    }

public void fileUpload() {
    
        String filenames = sdf.format(new Date()) + "_" +contract.getSerialNum() + "_" + filename;//文件名
        String serverPath = System.getProperty("catalina.home");
        InputStream is;

        try {
            is = new FileInputStream(file);
            String fpath = serverPath + File.separator + "file";//文件保存路径 tomcat下的file文件夹
            OutputStream os = new FileOutputStream(new File(fpath, filenames));
            byte[] buffer = new byte[is.available()];//这里尽量不要使用new byte[1024]之类的写法。可能会导致word文档上传之后提示文件损坏。
            int length = 0;
            while (-1 != (length = is.read(buffer, 0, buffer.length))) {
                os.write(buffer);
            }
            os.close();
            is.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }




}

以上内容为本人自学及总结，如有错误，麻烦大家及时指出并提示我更正。谢谢！

posted on 2018-06-06 16:48  techno-geek  阅读(645)  评论(0)    收藏  举报