ajax上传组件

BJUI框架的异步上传组件功能。

初始化：

1、Data属性：div添加属性data-toggle="upload"后可触发上传组件。

示例代码：

<div class="bjui-pageContent">

    <script type="text/javascript">

        function doc_upload_success(file, data) {

            var json = $.parseJSON(data)

            $(this).bjuiajax('ajaxDone', json);

            if (json[BJUI.keys.statusCode] == BJUI.statusCode.ok) {

                $('#doc_pic').val(json.filename);

                $('#doc_span_pic').html('已上传图片：<img src="'+ json.filename +'" width="100">');

            }

        }

    </script>

    <div style="display:inline-block;vertical-align: middle">

        <div id="doc_pic_up" data-toggle="upload" data-uploader="${pageContext.request.contextPath}/upload" data-file-size-limit="102400000" date-file-type-exts="*.jpg;*.png;*.git;*.mpg" date-multi="false"

             data-on-upload-success="doc_upload_success" data-icon="could-upload"></div>

        <input type="hidden" name="doc.pic" value="" id="doc_pic">

    </div>

    <span id="doc_span_pic"></span>

2、jqueryAPI

$(div).upload(options)

参数（options）

名称	类型	默认值	描述
uploader	string	null	【必选】D-Url上传处理URL
formData	object	{}	【可选】发送到服务端的额外数据
fileTypeExts	string	.jpg;.png	【可选】限制上传文件类型，多个以;分隔
fileObjectName	string	file	【可选】服务端收到的file域名称
buttonText	string	选择上传文件	【可选】上传按钮的名称
auto	boolean	false	【可选】是否开启自动上传
multi	boolean	false	【可选】是否支持一次性选择多个上传文件
fileSizeLimit	int	204800	【可选】上传文件大小限制，单位KB
onUploadSuccess	function(file,data,$element)null	null	[必选]上传成功时的回调函数，data是服务端返回的JSON数据，$element是触发上传的jquery对象
dragDrop	boolean	false	【可选】HTML5专用是否开启拖动上传，开启后，将文件拖动到按钮即可上传
previewImg	boolean	true	【可选】HTML专用是否预览上传图片
previewLoading	string	null	【可选】HTML5专用载入预览图片前显示的loading图标，previewImg=true时生效
icon	string	null	【可选】HTML5专用上传按钮的图标

回调函数的JSON参数

名称	类型	描述
statusCode	int	【必选】。状态码（ok=200，error=300，timeout=301），可以在BJUI.init时配置三个参数的默认值
message	string	可选提示信息内容
filename	string	可选上传成功后的文件名或路径

通过这些参数你可以发现，你必须json值。

我的servlet代码：

package com.servlet;

import javax.servlet.ServletException;

import javax.servlet.annotation.MultipartConfig;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.http.Part;

import java.io.IOException;

import java.io.PrintWriter;

/**

 * Created by Administrator on 2016/11/20.

 */

@MultipartConfig(location = "D:\\temp")

@WebServlet(name = "UploadServlet",urlPatterns = "/upload")

public class UploadServlet extends HttpServlet {

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

        request.setCharacterEncoding("utf-8");

        response.setCharacterEncoding("utf-8");

        response.setContentType("text/html;charset=utf-8");

        Part part=request.getPart("file");

        String disposition = part.getHeader("content-disposition");

        System.out.println(disposition);

        String fileName = disposition.substring(disposition.lastIndexOf("=")+2, disposition.length()-1);

        String mds=request.getServletContext().getRealPath("/WEB-INF/upload");

        String fileType = part.getContentType();

        long fileSize = part.getSize();

        System.out.println(fileType+"--"+fileSize+"--"+fileName);

        part.write(mds+"/"+fileName);

        PrintWriter out= response.getWriter();

        out.print("{\"statusCode\":\"200\",\"message\":\"上传成功！\",\"filename\":\""+fileName+"\"}");

        out.flush();

    }

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

        doPost(request,response);

    }

}

相关文章