SmartUpload.jar和ajaxfileupload.js异步上传文件

最新推荐文章于 2021-08-05 20:57:28 发布

weixin_30357231

最新推荐文章于 2021-08-05 20:57:28 发布

阅读量314

点赞数

文章标签： java javascript web.xml ViewUI

原文链接：http://www.cnblogs.com/jgwmjz/p/6129129.html

版权

（1）首先需要SmartUpload.jar文件，然后需要jQuery.js和ajaxfileupload.js

（2）创建一个Java web项目，依次导入对应的文件到相应的目录

（3）编写测试代码

ajaxUpload.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'ajaxUpload.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="javascript/jquery-1.11.1.js"></script>
<script type="text/javascript" src="javascript/ajaxfileupload.js"></script>
<style type="text/css">
.upload_btn {
    border: 1px solid #ddd;
    width: 70px;
    height: 26px;
    text-align: center;
    line-height: 26px;
    display: block;
    float: left;
    margin-left: 10px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    color: #333;
    cursor: pointer;
}

.upload_file {
    background-color: #F00;
    top: 0;
    left: 0px;
    width: 70px;
    height: 26px;
    filter: alpha(opacity :   0);
    opacity: 0;
    cursor: pointer;
    margin-left: -70px;
}
</style>
</head>
<script type="text/javascript">
    /* $(function() {
        $("#myFile").change(function() {
            var value = $("#myFile").val();
            if (value == '') {
                alert("请选选择文件");
                return;
            }
            $.ajaxFileUpload({
                url : "SmartUploadServlet",
                secureuri : true,
                fileElementId : "myFile",
                dataType : "text",
                data : {
                    "randomNum" : new Date().getTime()
                },
                success : function(data, status) {
                    $("#myImg").attr("src", data);
                },
                error : function(data, status, e) {
                    alert(e);
                }
            });
        });
    }); */
    // 注意：JavaScript的onchange事件和jQuery的change函数有一定的区别,，这里建议用onchange事件
    function upload(fileElementId,imgElementId){
        var value = $("#"+fileElementId).val();
        if (value == '') {
            alert("请选选择文件");
            return;
        }
        $.ajaxFileUpload({
            url : "SmartUploadServlet",
            secureuri : true,
            fileElementId : fileElementId,
            dataType : "text",
            data : {
                "randomNum" : new Date().getTime()
            },
            success : function(data, status) {
                $("#"+imgElementId).attr("src", data);
            },
            error : function(data, status, e) {
                alert(e);
            }
        });
    }
</script>
<body>
    <div style="width: 200px;height: 210px;">
        <img src="" width="200" height="180" id="myImg" />
        <div style="width: 200px;height: 30px;padding-left: 60px;">
            <input type="button" value="上传" id="btn" class="upload_btn" />
            <input type="file" name="myFile" id="myFile" class="upload_file" οnchange="upload('myFile','myImg')"/>
        </div>
    </div>
</body>
</html>

SmartUploadServlet.java

package com.test.ajaxFile.servlet;

import java.io.IOException;
import java.io.Writer;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.jspsmart.upload.File;
import com.jspsmart.upload.Files;
import com.jspsmart.upload.Request;
import com.jspsmart.upload.SmartUpload;
import com.jspsmart.upload.SmartUploadException;

public class SmartUploadServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doPost(request, response);
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        // getServletConfig().getServletContext().getRealPath("/images");
        String param = this.getInitParameter("filePosition");
        SmartUpload su = new SmartUpload();
        su.initialize(this.getServletConfig(), request, response);
        su.setMaxFileSize(100 * 1024 * 1024);
        su.setAllowedFilesList("jpg,jpeg,bmp,gif,tif,png");
        try {
            String path = "";
            su.upload();
            Files files = su.getFiles();
            for (int i = 0; i < files.getCount(); i++) {
                File file = files.getFile(i);
                path = param + file.getFileName();
                file.saveAs(path);
                System.out.println("路径----" + path);
            }
            Request req = su.getRequest();//
            System.out.println(req.getParameter("randomNum").toString());
            Writer writer = response.getWriter();
            writer.write(path);
        } catch (SmartUploadException e) {
            e.printStackTrace();
        }
    }
}

web.xml

<servlet>
    <servlet-name>SmartUploadServlet</servlet-name>
    <servlet-class>com.test.ajaxFile.servlet.SmartUploadServlet</servlet-class>
    <init-param>
        <param-name>filePosition</param-name>
        <param-value>images/</param-value>
    </init-param>
</servlet>
<servlet-mapping>
    <servlet-name>SmartUploadServlet</servlet-name>
    <url-pattern>/SmartUploadServlet</url-pattern>
</servlet-mapping>