JQuery 实现文件上传

时间：2024-03-12 07:39:30

 

简述：

实现前端使用jquery上传文件

后台用servlet处理文件上传以及保存

 

知识点：

1. 用到ajaxfileupload.js库

2. 后台servlet文件保存

 

其中ajaxfileupload的库下载地址：

http://www.phpletter.com/download_project_version.php?version_id=34

 

Maven中需要添加两个java的库，用来上传以及在服务器保存文件

        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.2.2</version>
        </dependency>
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-io</artifactId>
            <version>1.3.2</version>
        </dependency>

 

项目结构（主要是js）

 

testUpload.html

<!DOCTYPE html>
<head>
<title>MyWebProject</title>
<meta charset="utf-8" />
<link type="text/css" href="./lib/css/jquery-ui-1.8.19.custom.css"
    rel="stylesheet" />
    <link type="text/css" href="./lib/css/ajaxfileupload.css"
    rel="stylesheet" />
<script type="text/javascript" src="./lib/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="./lib/js/ajaxfileupload.js"></script>
<script type="text/javascript">
function ajaxFileUpload() {
    $.ajaxFileUpload({
        url : "./UploadFile",   //submit to UploadFileServlet
        secureuri : false,
        fileElementId : \'fileToUpload\',
        dataType : \'text\', //or json xml whatever you like~
        success : function(data, status) {
            $("#result").append(data);
        },
        error : function(data, status, e) {
            $("#result").append(data);
        }
    });
    return false;
}
</script>
</head>

<body>
    <!-- upload file -->
    <form name="form" action="./UploadFile" method="POST" enctype="multipart/form-data">
        <table class="tableForm">
            <thead>
                <tr>
                    <th>JQuery Ajax File Upload</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input id="fileToUpload"  type="file" size="45" 
                        name="fileToUpload"  class="input"></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td><button class="button" id="buttonUpload"
                            onclick="return ajaxFileUpload();">Upload</button></td>
                </tr>
            </tfoot>
        </table>
        <div id="result" style="margin-left:200px"></div>
    </form>
</body>
</html>

后台实现：

 

参考：http://blog.163.com/lin305_gf/blog/static/969524402011718102116625/

UploadFileServlet.java

package mwp.servlet;

import java.io.File;
import java.io.IOException;
import java.util.Iterator;

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

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

/**
 * Servlet implementation class UploadFileServlet
 */
public class UploadFileServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    private static Logger logger = LoggerFactory.getLogger(UploadFileServlet.class);

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        //判断提交过来的表单是否为文件上传菜单
        boolean isMultipart= ServletFileUpload.isMultipartContent(request);
        if(isMultipart){
            //构造一个文件上传处理对象
            FileItemFactory factory = new DiskFileItemFactory();
            ServletFileUpload upload = new ServletFileUpload(factory);

            Iterator items;
            try{
                //解析表单中提交的所有文件内容
                items = upload.parseRequest(request).iterator();
                while(items.hasNext()){
                    FileItem item = (FileItem) items.next();
                    if(!item.isFormField()){
                        //取出上传文件的文件名称
                        String name = item.getName();
                        //取得上传文件以后的存储路径
                        String fileName = name.substring(name.lastIndexOf(\'\\\') + 1, name.length());
                        //上传文件以后的存储路径
                        String saveDir = this.getServletContext().getRealPath("/upload/");
                        if (!(new File(saveDir).isDirectory())){
                            new File(saveDir).mkdir();
                        }
                        String path= saveDir + File.separatorChar + fileName;

                        //上传文件
                        File uploaderFile = new File(path);
                        item.write(uploaderFile);
                    }
                }
            }catch(Exception e){
                e.printStackTrace();
                response.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);  
                return;  
            }
            response.setStatus(HttpServletResponse.SC_OK);
            response.getWriter().append("Success Upload");
        } 
    } 
}


测试界面：

 

 

如若数据交换格式是JSON，则如下示例

JS

/**
 * 上传图片
 */
function uploadUnitImage()    {
        showLoading("正在上传，请等待...");
        $.ajaxFileUpload
        (
            {
                url:\'/my-web/fileUpload?action=uploadImage\',//用于文件上传的服务器端请求地址，目前与优惠券上传图片请求地址一致
                secureuri:false,//一般设置为false
                fileElementId: \'unitImageToUpload\', //文件上传空间的id属性
                dataType: \'json\',//返回值类型 一般设置为json
                success: function (data, status)  //服务器成功响应处理函数
                {
                    if(typeof(data.error) != \'undefined\')
                    {
                        if(data.error != \'\')
                        {
                            alert(data.error);
                            dismissLoading();
                        }else
                        {
                            //若上传成功则自定义一些事
                            // do something
                        }
                    }
                },
                error: function (data, status, e)//服务器响应失败处理函数
                {
                    alert(e);
                    dismissLoading();
                }
            }
        )
}

JAVA

    public void uploadImage(
            HttpServletRequest request,HttpServletResponse response) throws Exception{
        logger.debug("上传图片");
        //上传图片
        String fileUrl=uploadFileAndGetFileUrl(request);
        String responseText = "";
        if(!StringUtils.isEmpty(fileUrl)){
            logger.debug("图片下载地址是"+fileUrl);
             responseText="{error: \'\',url: \'"+fileUrl+"\'}";
        }else{
            logger.debug("账户创建页面，图片上传失败");
            responseText="{error: \'\'}";
        }
        
        responseOutWithText(response, responseText);
    }

由于AjaxFileUpload在解析返回的response若为ＪＳＯＮ数据时会出现问题，所以需要转为text

    /**
     * 以文本形式下发数据
     * @param response
     * @param responseText
     */
    protected void responseOutWithText(HttpServletResponse response,
            String responseText) {
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html");
        PrintWriter out = null;
        try {
            out = response.getWriter();
            out.println(responseText);
            out.close();
            logger.debug("下发的数据是");
            logger.debug(responseText);
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } finally {
            if (out != null) {
                out.close();
            }
        }
    }

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

相关文章