bootstrap upload 文件上传的实现过程

最新推荐文章于 2022-01-13 16:42:18 发布

懒惰的小肥肥

最新推荐文章于 2022-01-13 16:42:18 发布

阅读量1.4w

点赞数 3

分类专栏： Bootstrap

本文链接：https://blog.csdn.net/hua1017177499/article/details/73123945

版权

Bootstrap 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

前端jsp页面

<body>
    <div class="htmleaf-container" style="width:400px;height:300px;  ">
        <div class="container kv-main">
            <form enctype="multipart/form-data">
                <label>简体中文</label> <input id="file-zh" name="files" type="file"
                    multiple>
                <p class="help-block">支持jpg、jpeg、png、gif格式，大小不超过2.0M</p>
            </form>
            <hr>
            <br>
        </div>
    </div>
</body>

js部分

$(function () {
         //0.初始化fileinput
         var oFileInput = new FileInput();
         oFileInput.Init("file-zh", "<%=basePath%>user/uploadImage.do");
    });

    //初始化fileinput
    var FileInput = function () {
     var oFile = new Object();

     //初始化fileinput控件（第一次初始化）
     oFile.Init = function(ctrlName, uploadUrl) {
     var control = $('#' + ctrlName);

     //初始化上传控件的样式
     control.fileinput({
     language: 'zh', //设置语言
     uploadUrl: uploadUrl, //上传的地址
     allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
     showUpload: true, //是否显示上传按钮
     showCaption: false,//是否显示标题
     browseClass: "btn btn-primary", //按钮样式 
     //dropZoneEnabled: false,//是否显示拖拽区域
     //minImageWidth: 50, //图片的最小宽度
     //minImageHeight: 50,//图片的最小高度
     //maxImageWidth: 1000,//图片的最大宽度
     //maxImageHeight: 1000,//图片的最大高度
     //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
     //minFileCount: 0,
     maxFileCount: 10, //表示允许同时上传的最大文件个数
     enctype: 'multipart/form-data',
     validateInitialCount:true,
     previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
     msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
     });

     //导入文件上传完成之后的事件
    $('#file-zh').on('fileuploaded', function(event, data, previewId, index) {
        var form = data.form, files = data.files, extra = data.extra,
        response = data.response, reader = data.reader;
        console.log(response);//打印出返回的json
        console.log(response.paths);//打印出路径
        });
    }
     return oFile;
    };

controller的实现部分

/**
     * 
     * @Title: uploadFj
     * @Description: TODO(上传附件)
     * @param request
     */
    @RequestMapping(value = "/uploadFj")
    public void uploadFj(HttpServletRequest request,
            HttpServletResponse response) {
        MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
        List<UploadFile> fileList = UploadUtil.getUploadFiles(multiRequest,
                ContextUtil.setPath());
        Map<String, Object> map = new HashMap<String, Object>();
        response.setContentType("text/xml;charset=UTF-8");
        PrintWriter out = null;
        try {
            out = response.getWriter();
            for (UploadFile file : fileList) {
                System.out.println("上传文件有：" + file);
            }

            map.put("message", "success");
        } catch (Exception e) {
            e.printStackTrace();
            map.put("meaasge", "failed");
        }
        out.print(JSONObject.fromObject(map));
    }

upload工具类UploadUtil

public static List<UploadFile> getUploadFiles(
            MultipartHttpServletRequest multipartHttpServletRequest, String Path) {
        List<MultipartFile> files = multipartHttpServletRequest
                .getFiles("files");
        List<UploadFile> fileList = new ArrayList<UploadFile>();
        for (MultipartFile file : files) {
            // 取得上传文件
            String fileName = file.getOriginalFilename();
            Long fileSize = file.getSize();
            if (null != fileName && !"".equals(fileName)) {
                try {
                    // 创建文件要保存的路径
                    File uploadFile = new File(Path);
                    if (!uploadFile.exists() || null == uploadFile) {
                        uploadFile.mkdirs();
                    }
                    // 获取文件类型
                    String fileType = fileName.substring(
                            fileName.lastIndexOf(".") + 1, fileName.length());
                    String id = UUID.randomUUID().toString();
                    String targetName = id + "." + fileType;
                    // 文件真实存放路径
                    String filePath = uploadFile.getPath() + File.separator
                            + targetName;
                    // 保存文件
                    file.transferTo(new File(filePath));
                    // 初始化上传文件
                    UploadFile up = new UploadFile(id, fileName, fileType,
                            fileSize + "", filePath);
                    fileList.add(up);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }
        return fileList;
    }

文件实体类

/**
 * 上传文件实体类
 * 
 * @author 
 * 
 */
public class UploadFile implements Serializable {

    private static final long serialVersionUID = -5077361410541860143L;
    private String id;
    private String fileName;
    private String fileType;
    private String fileSize;
    private String filePath;

    public UploadFile() {

    }

    public UploadFile(String id, String fileName, String fileType,
            String fileSize, String filePath) {
        this.id = id;
        this.fileName = fileName;
        this.fileType = fileType;
        this.fileSize = fileSize;
        this.filePath = filePath;
    }

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getFileName() {
        return fileName;
    }

    public void setFileName(String fileName) {
        this.fileName = fileName;
    }

    public String getFileType() {
        return fileType;
    }

    public void setFileType(String fileType) {
        this.fileType = fileType;
    }

    public String getFileSize() {
        return fileSize;
    }

    public void setFileSize(String fileSize) {
        this.fileSize = fileSize;
    }

    public String getFilePath() {
        return filePath;
    }

    public void setFilePath(String filePath) {
        this.filePath = filePath;
    }

    @Override
    public String toString() {
        return "UploadFile [id=" + id + ", fileName=" + fileName
                + ", fileType=" + fileType + ", fileSize=" + fileSize
                + ", filePath=" + filePath + "]";
    }

页面效果图
这里写图片描述

懒惰的小肥肥

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
bootstrap upload 文件上传的实现过程

前端jsp页面<body> <div class="htmleaf-container" style="width:400px;height:300px; "> <div class="container kv-main"> <form enctype="multipart/form-data"> <label>简体中
复制链接

扫一扫