黑马程序员技术交流社区

标题: 【济南校区】炫酷图片上传插件webupload [打印本页]

---

作者: 大山哥哥    时间: 2018-3-31 11:21
标题: 【济南校区】炫酷图片上传插件webupload


最近研究了一下前端相关的东西,发现了一个好用的图片上传插件,在这里给大家推荐一下,各种效果也都比较好.(代码附文章末尾)
首先介绍一下webupload,都有那些优点:
1.文件多选
2.格式过滤
3.拖拽（文件 & 文件夹）
4.文件内容读取
5.上传前预览,旋转,删除
6.进度跟踪
7.文件数量,大小及总体大小限制
8.图片自动检测是否重复
等等,当然优点还有很多,具体的大家可以自己去发掘,现在我们来介绍一下webupload的具体使用.
具体开发步骤:项目使用SSM+webupload+jquery
1.创建动态web工程,并导入SSM相关jar包&配置文件
2.导入webupload所需相关资源,如下图:

3.定义页面,引入webUpload所需的资源文件,如下图:

4.根据项目需要定义自己的文件上传JS,js中的注解都十分清楚,如下图所示:


4.导入后台接收文件controller,如图示:

5.项目发布到tomcat服务器运行,如图示:

6.测试图片上传



7.图片上传成功后,查看图片上传连接,及图片位置:


图片上传成功,并返回图片链接地址.

详情可参考代码中注解,注解都很详细.
webupload相关API可参考:http://fex.baidu.com/webuploader/doc/#WebUploader_Uploader
(因项目大于2M上传不了,只能百度云盘共享)

示例代码 链接：https://pan.baidu.com/s/1-3Lvd0SGN39BuUKAknLTcA 密码：ug7h

---

作者: zzh540537473    时间: 2018-3-31 13:09
感谢楼主~~~~~~~~~~~~~~~~~~~~

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2