Webuploader图片上传

最新推荐文章于 2024-04-18 09:58:10 发布

Leewen_Dong

最新推荐文章于 2024-04-18 09:58:10 发布

阅读量582

点赞数

本文链接：https://blog.csdn.net/qq_34295193/article/details/79879000

版权

本文介绍了如何使用WebUploader快速搭建图片上传功能，包括前端js和css的引入，jsp页面的设置，以及后台servlet的处理。在实际应用中，还需考虑如何处理额外参数和文件存储。最后，作者提到样式和布局的挑战，感谢前端同事的帮助。

摘要由CSDN通过智能技术生成

前言：最近换了一份工作，做开发两年多了，总觉得输入了好多知识点，没有总结和输出，所以尝试着把自己用过得一些技术点通过博客的方式记录下来，见证一下自己的成长。

刚换了家公司，入职没几天就丢给我一个新需求，要添加一个图片上传功能，废话不多说，先上效果图：

webuploader快速搭建官网已经写的很简单，官网链接：点击打开链接；

参考着官方文档自己搭建

先引入webuploader的js和css(jquery当然也是少不了的)：

<link href="../weixin/css/webuploader.css" rel="stylesheet" type="text/css" />
<script src="../weixin/js/webuploader.nolog.js" type="text/javascript"></script>

js代码:

// 微信端图片上传
var thumbnailWidth = 60;   //缩略图高度和宽度 （单位是像素），当宽高度是0~1的时候，是按照百分比计算
var thumbnailHeight = 60;
$(function() {
    var uploader = WebUploader.create({
        // 选完文件后，是否自动上传。
        auto: true,
        // swf文件路径
        swf: '../weixin/swf/Uploader.swf',
        // 文件接收服务端。
        server: '../servlet/upload.servlet',
        // 选择文件的按钮。可选。
        pick: '#filePicker',
        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/'
        }
    });

    //传busiDataId 和文件类型
    uploader.on('uploadBeforeSend', function