关键词：
最近在项目中用到了百度的文件图片上传插件WebUploader。分享给大家
需要在http://fex.baidu.com/webuploader/download.html点击打开链接下载WebUploader
// 初始化Web Uploader***上传图片
var uploader = WebUploader.create(
// 选完文件后，是否自动上传。
auto: true,
// 文件接收服务端地址，自动生成缩略图需要后端完成。
server: '/common/uploadFile?imageZip=1',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#sendimg',
fileNumLimit: 5,
//allowMagnify: false,
// 只允许选择图片文件。
accept:
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
);
// 当有文件添加进来的时候
uploader.on( 'fileQueued', function( file )
var $li = $(
'<div style="float:right" id="' + file.id + '" class="delimg">' +
'<img class="addimg"><div class="closeimg">×</div>' +
'</div>'
),
$img = $li.find('img');
// $list为容器jQuery实例
$("#piccon").append( $li );
// 创建缩略图
// 如果为非图片文件，可以不用调用此方法。
// thumbnailWidth x thumbnailHeight 为 100 x 100
uploader.makeThumb( file, function( error, src )
if ( error )
$img.replaceWith('<span>不能预览</span>');
return;
$img.attr( 'src', src );
, 100, 100 );
$li.on('click', function()
$(this).remove();
)
);
// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage )
var $li = $( '#'+file.id ),
$percent = $li.find('.progress span');
// 避免重复创建
if ( !$percent.length )
$percent = $('<p class="progress"><span></span></p>')
.appendTo( $li )
.find('span');
$percent.css( 'width', percentage * 100 + '%' );
);
// 文件上传成功，给item添加成功class, 用样式标记上传成功。
uploader.on( 'uploadSuccess', function( file,response )
imgurl=response.fileName;//这里可以拿到后台返回的图片名称
//alert(imgurl);
$( '#'+file.id ).addClass('upload-state-done');
);
// 文件上传失败，显示上传出错。
uploader.on( 'uploadError', function( file )
var $li = $( '#'+file.id ),
$error = $li.find('div.error');
// 避免重复创建
if ( !$error.length )
$error = $('<div class="error"></div>').appendTo( $li );
$error.text('上传失败');
);
// 完成上传完了，成功或者失败，先删除进度条。
uploader.on( 'uploadComplete', function( file )
$( '#'+file.id ).find('.progress').remove();
);使用webupload封装后的图片上传
//图片上传初始化
function webuploader()
var showimg=seturl("/dream/app/upload/");
// 初始化Web Uploader***上传图片
var uploader = WebUploader.create(
// 选完文件后，是否自动上传。
auto: true,
// 文件接收服务端。
server: seturl("/dream/app/fileupload.php"),
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#sendimg',
fileNumLimit: 3,
method:"POST",
//allowMagnify: false,
// 只允许选择图片文件。
accept:
title: 'Images',
extensions: 'gif,jpg,jpeg,png',
mimeTypes: 'image/*'
);
// 当有文件添加进来的时候
uploader.on( 'fileQueued', function( file )
);
// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage )
);
// 文件上传成功，给item添加成功class, 用样式标记上传成功。
uploader.on( 'uploadSuccess', function( file,response )
$("#piccon").append('<img id="'+response._raw+'" src="'+showimg+response._raw+'" class="addimg"><span id="'+response._raw+'" class="cimg">×</span>');
$( '#'+file.id ).addClass('upload-state-done');
);
// 文件上传失败，显示上传出错。
uploader.on( 'uploadError', function( file )
var $li = $( '#'+file.id ),
$error = $li.find('div.error');
// 避免重复创建
if ( !$error.length )
$error = $('<div class="error"></div>').appendTo( $li );
$error.text('上传失败');
);
// 完成上传完了，成功或者失败，先删除进度条。
uploader.on( 'uploadComplete', function( file )
$( '#'+file.id ).find('.progress').remove();
$(".cimg").click(function()
$(this).prev("img").remove();
$(this).remove();
)
);
使用webuploader插件上传图片时如果正确限制上传数量
//初始化WebUploader uploader=WebUploader.create( //自动上传。 auto:true, //swf文件路径 swf:'__PUBLIC__/Home/swf/Uploader.swf', //文件接收服务端。 server:'#:U('Feedback/uploadimg')#', //选择文件的按钮。可选。 //内部根据当前运行是... 查看详情
vue移动端图片上传，可最多上传9张,使用webuploader插件
参考技术A图片上传WebUploader.js 查看详情
大文件上传组件webupload插件
需求：项目要支持大文件上传功能，经过讨论，初步将文件上传大小控制在500M内，因此自己需要在项目中进行文件上传部分的调整和配置，自己将大小都以501M来进行限制。第一步：前端修改由于项目使用的是BJUI前端框架，并... 查看详情
jfinal+webuploader实现图片的异步上传(代码片段)
关于WebUploader##WebUploader是由BaiduWebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。界面友好，使用方便，稍作修改，可快速上手。官网：http://fex.baidu.com/webuploader/如何使用webuploader到官... 查看详情
webuploader怎么只能上传一个文件
使用webuploader点击传按钮或者复制粘贴或者拖拉图片导面区域都传图片点击传java代码servletdopost点击传图片存入写入文件夹需要注意需要修改js文件请求台路径前段代码需要源码复参考技术Apick下的属性multipleBoolean是否开起同时选... 查看详情
如何让webuploader上传之前进行验证
参考技术Awebuploader如何上传使用java方法/步骤1使用webuploader页面如下2点击上传按钮，或者复制粘贴或者拖拉图片导下面区域里都可以上传图片3点击上传，java代码如下。servlet里的dopost方法4点击上传后，图片会存入你写入的文件... 查看详情
webuploader分片上传的实现代码（前后端分离）
参考技术A本文介绍了webuploader分片上传的实现代码（前后端分离），分享给大家，具体如下：WebUploader是由BaiduWebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势... 查看详情
jsp使用七牛云api和webuploader上传多组图片(代码片段)
文章目录jsp使用七牛云API和webuploader上传多组图片介绍目录树遇到的问题上传组件的选择问题进度条多线程前端界面数据库关键代码UserPhotoDaoImplUploadServletJDBCServletlist.jspadd.jsppom.xml参考jsp使用七牛云API和webuploader上传多组图片介绍... 查看详情
使用webuploader实现图片上传(代码片段)
...inkrel="stylesheet"type="text/css"href="js/webuploader-0.1.5/webuploader.css"><scripttype="text/javascript"src="js/jquery.min.js"></script><scripttype="text/javascript"src="js/webuploader-0.1.5/webuploa... 查看详情
asp.netmvc之图片上传，webuploader多实例上传疑问，在这里轻松解决！(代码片段)
...，在处理图片上传功能上遇到了一道坎。之前是使用webuploader插件实现图片上传，但在处理多实例问题时，一直难以跨过。几经思索，再次踏上了学习之路。疑难问题1.在之前使用webuploader时,在处理多图上传问题上... 查看详情
用webuploader怎么解决跨域上传文件的问题
参考技术A最近研究了下大文件上传的方法，找到了webuploaderjs插件进行大文件上传，大家也可以参考这篇文章进行学习：《WebUploader文件上传插件使用详解》使用使用webuploader分成简单直选要引入<!--引入CSS--><linkrel="style... 查看详情
webuploder插件单图上传与删除上传文件demo
...客，不好请勿怪！ 言归正传，最近一段时间一直在用webuploader这个插件，这是一个无刷新上传的插件，开它的简介说明，是百度开发的小工具，用了小半年了，个人感觉是比较全面的。 但是一直有个问题没有解决，等待... 查看详情
webuploader插件单个文件上传（带进度条）
@{ViewBag.Title="主页";}<scriptsrc="~/Scripts/jquery-1.9.1.min.js"></script><linkhref="~/Scripts/1/bootstrap.css"rel="stylesheet"/><linkhref="~/Scripts/1/webuploader.css"rel="styles 查看详情
webuploader+php视频分片上传
...件上传的原理和使用BaiduWebFE(FEX)团队开发的文件上传插件WebUploader。利用前端框架WebUploader配置进行对大文件的分片（由Baidu官方测试，每5M一个分片是效率最高的），这里，我的服务端是php，所以需要修改php.ini里面的post_max_size... 查看详情
使用webuploader和servlet实现文件上传
...POST请求封装成Part，通过Part对上传的文件进行操作。3、WebUploader参照网上教程实现。4、引入webuploader.css、webuploader.js、Uploader.swfupload.jsp: < 查看详情
webuploader的demo怎样导入css文件？
...-><linkrel="stylesheet"type="text/css"href="webuploader/webuploader.css">WebUploader文件上传首先准备dom结构，包含存放文件信息的容器、选择按钮和上传按钮三个部分。初始化WebUploader。显示用户选择框。文件上传进... 查看详情
webuploader与django进行断点续传，大文件上传(代码片段)
需要实现的效果如下需要使用的 jsjquery.jswebuploader.hshashmap.js路由fromdjango.urlsimportpathfrom.importviewsurlpatterns=[path('index/',views.index),path('checkChunk/',views.checkChunk,name=&# 查看详情
webuploader的demo怎样导入css文件
WebUploader通过准备dom结构、初始化、显示用户选择、文件上传进度、提示信息实现导入JS,CSS,SWF资源。WebUploader的demo导入css等资源的流程：WebUploader概述：WebUploader是由BaiduWebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代... 查看详情