官方文档:http://fex.baidu.com/webuploader/getting-started.html

引入Webuploader的css和js文件,下载地址:http://fex.baidu.com/webuploader/download.html

把下载的整个文件夹添加的项目中

<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css"> <!--引入JS-->
<script type="text/javascript" src="webuploader文件夹/webuploader.js"></script>

下面这种方式默认是不能重复上传的 如果要能够重复上传一张图片 需要增加属性 duplicate :true,

    • duplicate {Boolean} [可选] [默认值:undefined]

      去重, 根据文件名字、文件大小和最后修改时间来生成hash Key.

如果要设置只能选择一张图片上传,把pick部分修改成

 pick: {
id:'#filePicker',
multiple: false,
},

简单demo

<div>
<!--dom结构部分-->
<!--用来存放item-->
<div id="filePicker">选择图片</div>
</div> <table class="vehicleImgs">
<tr>
<#list vehicleImg as p>
<td>
<img src="${p!}" alt="预览"/>
<span class="del_img">删除</span>
<input type="hidden" name="vehicleImgs" value="${p!}"/>
</td>
</#list>
</tr>
</table> <script>
var uploadPicsUrl = "../common/o_swfPicsUpload.do";
// 初始化Web Uploader
var uploader = WebUploader.create({ // 选完文件后,是否自动上传。
auto: true, //后台接收的name名
fileVal:"Filedata",
// swf文件路径
swf: '${base}/thirdparty/webuploader/Uploader.swf', // 文件接收服务端。
server: uploadPicsUrl, // 选择文件的按钮。可选。
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick: '#filePicker',
        
       //允许重复上传 
       duplicate:true,  // 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
}
});
// 当有文件添加进来的时候
uploader.on( 'fileQueued', function( file ) {
uploader.upload();
}); // 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
}); // 文件上传成功,response为服务器返回的数据。
uploader.on( 'uploadSuccess', function( file,response ) {
console.log(response);
var imgUrl=response._raw;
var str =$(".vehicleImgs tr").html();
str += "<td >";
str += " <img src="+imgUrl+" alt=\"预览\"/>";
str += " <span class=\"del_img\">删除</span>";
str += " <input type=\"hidden\" name=\"vehicleImgs\" value="+imgUrl+"/>";
str += " </td>"; $(".vehicleImgs tr").html(str); });
// 文件上传失败,显示上传出错。
uploader.on( 'uploadError', function( file ) {
});
/**
* 验证文件格式以及文件大小
*/
uploader.on("error", function (type) {
if (type == "Q_TYPE_DENIED") {
} else if (type == "Q_EXCEED_SIZE_LIMIT") {
} else if (type == "F_EXCEED_SIZE") {
}else {
}
}); // 完成上传完了,成功或者失败,先删除进度条。
uploader.on( 'uploadComplete', function( file ) {
$(".del_img").on('click',function () {
$(this).parent().remove();
})
}); uploader.on( 'all', function( type ) {
if ( type === 'startUpload' ) {
state = 'uploading';
} else if ( type === 'stopUpload' ) {
state = 'paused';
} else if ( type === 'uploadFinished' ) {
state = 'done';
} }); $(".del_img").on('click',function () {
$(this).parent().remove();
})
</script>

如果要只能选择固定格式的文件 修改

mimeTypes 

比如只能word03和07 可以写:
mimeTypes: 'application/msword,application/application/vnd.openxmlformats-officedocument.wordprocessingml.document'

更多MimeTypes数值表 参考:https://www.cnblogs.com/pxblog/p/14454262.html



使用WebUploader进行文件图片上传的更多相关文章

  1. WebUploader文件图片上传插件的使用

    最近在项目中用到了百度的文件图片上传插件WebUploader.分享给大家 需要在http://fex.baidu.com/webuploader/download.html点击打开链接下载WebUp ...

  2. Webuploader 大文件分片上传

    百度Webuploader 大文件分片上传(.net接收)   前阵子要做个大文件上传的功能,找来找去发现Webuploader还不错,关于她的介绍我就不再赘述. 动手前,在园子里找到了一篇不错的分片 ...

  3. 使用WebUploader实现文件批量上传,进度条显示功能

    知识点:利用WebUploader,实现文件批量上传,并且实时显示文件的上传进度 参考官方文档:http://fex.baidu.com/webuploader/ (1)引入三个资源 JS,CSS,S ...

  4. Retrofit 2.0 轻松实现多文件/图片上传/Json字符串/表单

    如果嫌麻烦直接可以用我封装好的库:Novate: https://github.com/Tamicer/Novate 通过对Retrofit2.0的前两篇的基础入门和案例实践,掌握了怎么样使用Retr ...

  5. TP5.0整合webuploader实现多图片上传功能

    在https://github.com/fex-team/webuploader 下载webuploader并解压,解压后放到public里面.其中我把解压缩后的文件夹改名为webuploader,放 ...

  6. [iOS AFNetworking框架实现HTTP请求、多文件图片上传下载]

    简单的JSON的HTTP传输就不说了,看一个简单的DEMO吧. 主要明白parameters是所填参数,类型是字典型.我把这部分代码封装起来了,以便多次调用.也许写在一起更清楚点. #pragma m ...

  7. WebApi2 文件图片上传下载

    Asp.Net Framework webapi2 文件上传与下载 前端界面采用Ajax的方式执行 一.项目结构 1.App_Start配置了跨域访问,以免请求时候因跨域问题不能提交.具体的跨域配置方 ...

  8. Vue2.0结合webuploader实现文件分片上传

    Vue项目中遇到了大文件分片上传的问题,之前用过webuploader,索性就把Vue2.0与webuploader结合起来使用,封装了一个vue的上传组件,使用起来也比较舒爽. 上传就上传吧,为什么 ...

  9. 关于富文本编辑器—UEditor(java版)的使用,以及如何将UEditor的文件/图片上传路径改成绝对路径

    突然发现好久没写博客了,感觉变懒了,是要让自己养成经常写文章的习惯才行.既可以分享自己的所学,和所想,和大家一起讨论,发现自己的不足的问题. 大家可能经常会用到富文本编辑器,今天我要说的是UEdito ...

随机推荐

  1. Atcoder Grand Contest 003 F - Fraction of Fractal(矩阵乘法)

    Atcoder 题面传送门 & 洛谷题面传送门 Yet another AGC F,然鹅这次就没能自己想出来了-- 首先需注意到题目中有一个条件叫做"黑格子组成的连通块是四联通的&q ...

  2. Nginx在make时报错[objs/Makefile:469: objs/src/core/ngx_murmurhash.o] Error

    Nginx在make时报错[objs/Makefile:469: objs/src/core/ngx_murmurhash.o] Error   在安装目录下执行 vim obj/Markfile 把 ...

  3. shell 除法和格式化输出printf

    相关知识的补充: printf命令模仿C程序库里的printf()程序.printf由POSIX标准所定义,因此使用printf的脚本比使用echo有着更好的移植性. printf使用引用文本或者空格 ...

  4. Python基础之字典内置方法

    目录 1. 字典 1.1 字典的作用 1.2 创建和使用字典 1.2.1 dict类 1.2.2 基本的字典操作 1.2.3 字典方法 1. 字典 映射:可以通过名称来访问其各个值的数据结构. 字典是 ...

  5. JavaScript | 新手村(一)变量,运算和变量方法

    资料来自:JavaScript 第一步 1. 向 html 页面添加 JavaScript 1.1 内部 JavaScript 在 html 文件中的 </body> 标签前插入代码: & ...

  6. 生产环境高可用centos7 安装配置RocketMQ-双主双从-同步双写(2m-2s-sync)

    添加hosts信息[四台机器] vim /etc/hosts 192.168.119.130 rocketmq-nameserver1 192.168.119.130 rocketmq-master1 ...

  7. 【1】Embarrassingly Parallel(易并行计算问题)

    1.什么是Embarrassingly Parallel(易并行计算问题) 易并行计算问题:A computation that can be divided into a number of  co ...

  8. Oracle LOB类型

    一.Oracle中的varchar2类型1.我们在Oracle数据库存储的字符数据一般是用VARCHAR2.VARCHAR2既分PL/SQL Data Types中的变量类型,也分Oracle Dat ...

  9. go channel 概述

    精髓 将资源读进内存-->共享内存,一个个进程/线程进行处理,这是常见模式.go channel 是一种直接在进程/线程之间传递资源的方式,即以通信来共享内存.这便是go的精髓. 扩展-一些名词 ...

  10. VScode 使用 CMake 入门

    参考 CMake 入门实战 在 linux 平台下使用 CMake 生成 Makefile 并编译的流程如下: 编写 CMake 配置文件 CMakeLists.txt . 执行命令 cmake PA ...