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);
    }
}