Webuploader图片上传

本文介绍了如何使用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 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值