web uploader上传图片

最新推荐文章于 2025-09-13 09:06:35 发布

weixin_33728268

最新推荐文章于 2025-09-13 09:06:35 发布

阅读量74

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/minbin/blog/360896

本文详细介绍了如何使用 WebUploader 进行文件上传操作。主要内容包括：官网资源介绍、包文件引用方式、页面 JS 文件引入方法及具体上传实现过程。通过实际代码示例展示了如何设置上传参数、监听上传成功与失败等事件。

为什么80%的码农都做不了架构师？>>>

1、web uploader官网

2、WebUploader包文件

3、在页面引入webuploader的js文件

    <!--引入上传组件JS-->
    <link rel="stylesheet" type="text/css" href="${ctx}/lib/webuploader/webuploader.css">
    <script type="text/javascript" src="${ctx}/lib/webuploader/webuploader.js"></script>

4、上传

 <div class="imgs">上传图片</div>
 
<script type="text/javascript"> 	
    $(function () {
        var uploader = WebUploader.create({
            auto: true,
            compress: false,
            swf: '${ctx}/lib/webuploader/Uploader.swf',
            server: "${ctx}/admin/file/image/upload",
            pick: '.imgs',
            fileVal: 'imageFile',
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });
        uploader.on('uploadSuccess', function (file, response) {
            //上传成功后的处理
            
        });
        uploader.on('uploadError', function (file) {
        	//上传失败后的处理
        	
        });
    });
</script>