webuploader图片上传

1. webuploader怎么实现上传

使用webuploader

点击上传按钮，或者复制粘贴或者拖拉图片导下面区域里都可以上传图片

点击上传，java代码。 servlet里的携乎简滑dopost方法

点击上传后，图片会存入你辩咐悉写入的文件夹里

需要注意的是，需要修改js文件请求后台的路径

前段代码如下，需要源码的可以回复。

2. 使用webuploader插件上传图片时如果正确 限制上传数量

你要理解fileNumLimit的含义。fileNumLimit=总文件数-已经上传的文件数。这就意味着你fileNumLimit设置为5的话，一次上传6张是不行的，但是每次上传1张，就能突破5张的限制。原因是插件在上传完一个文件后，会把计数清零。你可以参考修改下面的代码：

uploader.on('fileQueued',function(){
count++;
});

uploader.on('fileDequeued',function(){
count--;
});

uploader.on('uploadFinished',function(){
//注销这段代码就可以了count=0;
});

上面的代码位于webuploader.js的L3809

3. 你好，我用webuploader.html5only.min.js实现批量图片上传，我该怎么在action中获取上传的那些文件呢

1.1 分片、并发
分片与并发结合，将一个大文件分割成多块，并发上传，极大地提高大文件的上传速度。
当网络问题导致传输错误时，只需要重传出错分片，而不是整个文件。另外分片传输能够更加实时的跟踪上传进度。
1.2 预览、压缩
支持常用图片格式jpg,jpeg,gif,bmp,png预览与压缩，节省网络数据传输。
解析jpeg中的meta信息，对于各种orientation做了正确的处理，同时压缩后上传保留图片的所有原始meta数据。
1.3 多途径添加文件
支持文件多选，类型过滤，拖拽(文件&文件夹)，图片粘贴功能。
粘贴功能主要体现在当有图片数据在剪切板中时（截屏工具如QQ(Ctrl + ALT + A), 网页中右击图片点击复制），Ctrl + V便可添加此图片文件。
1.4 HTML5 & FLASH
兼容主流浏览器，接口一致，实现了两套运行时支持，用户无需关心内部用了什么内核。
同时Flash部分没有做任何UI相关的工作，方便不关心flash的用户扩展和自定义业务需求。
1.5 MD5秒传
当文件体积大、量比较多时，支持上传前做文件md5值验证，一致则可直接跳过。
如果服务端与前端统一修改算法，取段md5，可大大提升验证性能，耗时在20ms左右。
1.6 易扩展、可拆分
采用可拆分机制, 将各个功能独立成了小组件，可自由搭配。
采用AMD规范组织代码，清晰明了，方便高级玩家扩展。
2、引入资源
2.1 下载包内容

├── Uploader.swf // SWF文件，当使用Flash运行时需要引入。

├── webuploader.js // 完全版本。
├── webuploader.min.js // min版本

├── webuploader.flashonly.js // 只有Flash实现的版本。
├── webuploader.flashonly.min.js // min版本

├── webuploader.html5only.js // 只有Html5实现的版本。
├── webuploader.html5only.min.js // min版本

├── webuploader.withoutimage.js // 去除图片处理的版本，包括HTML5和FLASH.
└── webuploader.withoutimage.min.js // min版本

2.2 或者直接使用由staticfile提供的cdn版本，或者下载Git项目包。

// SWF文件，当使用Flash运行时需要引入。
├── http://cdn.staticfile.org/webuploader/0.1.0/Uploader.swf

// 完全版本。
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.js
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.min.js

// 只有Flash实现的版本。
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.flashonly.js
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.flashonly.min.js

// 只有Html5实现的版本。
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.html5only.js
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.html5only.min.js

// 去除图片处理的版本，包括HTML5和FLASH.
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.withoutimage.js
└── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.withoutimage.min.js

2.3 DIY打包
WebUploader文件打包借助了Grunt工具来实现
2.3.1 环境依赖
1.git命令行工具
2.node & npm命令行工具
3.grunt (npm install grunt-cli -g)

2.3.2 编译代码
1.克隆 webuploader git仓库，git clone https://github.com/fex-team/webuploader.git。
2.安装node依赖，npm install。
3.执行grunt dist，此动作会在dist目录下面创建合并版本的js, 包括通过uglify压缩的min版本。

2.3.3 配置
打开webuploader仓库根目录下面的Gruntfile.js文件, 代码合并有buildtask来完成。找到build配置项。
Gruntfile.js已经配置了一个自定义合并的demo. 打包只支持HTML5的版本

// 自己配置的实例
// glob语法。
custom: {
preset: "custom",
cwd: "src",
src: [
'widgets/**/*.js',
'runtime/html5/**/*.js' ],
dest: "dist/webuploader.custom.js"
}

3、angular指令——<web-uploader>
3.1 指令功能
添加一个上传文件按钮，可以自行配置上传文件的类型和过滤规则，且在弹出的模态框中进行操作，支持连续上传，分类选择上传
3.2 使用说明
这里只是使用说明，可能会加一些注意事项，具体参数或者变量说明请参看后面
3.2.1 页面添加一个指令
<web-uploader class="btn btn-info" type="image" accept="accept">uploader</web-uploader>

3.2.2 配置上传类型和过滤规则
上传类型
type有四种类型，分别为
image：图片
video：音视频
flash：flash
file：办公文档，压缩文件等等
过滤规则
accept有四个对象属性，属性中包含标题、允许文件后缀、允许的mimetype
3.2.3 指令中绑定弹出模态框的事件
web-uploader这个指令中其实只做了一件事，给元素本身绑定弹出模态框的事件，具体上传文件是在模态框中完成的
3.2.4 初始化uploader类，配置相关属性
在模态框控制器中用到了$timeout
$timeout(function(){
//这里是上传配置代码
},0)

因为配置uploader时需要事先准备好dom元素，angular打开模态框是异步而JavaScript是单线程，所以实际上在执行模态框控制器中的代码时，模态框并没有打开，也就是dom并没有加载完成，这会导致WebUploader报a.runningtime is not a function...的错误
3.3 指令详细说明
3.3.1 父级controller中的配置

.controller('myCtrl',['$scope', '$modal', function($scope, $modal){
//配置允许上传的类型 图片/音视频/flash/文件
$scope.accept = {
//图片
image: {
title : 'Images',//标题
extensions : 'gif,jpg,jpeg,bmp,png,ico',//允许上传文件的后缀
mimeTypes : 'image/*'//允许的mimetype
},
//音视频
video: {
title : 'Videos',
extensions : 'wmv,asf,asx,rm,rmvb,ram,avi,mpg,dat,mp4,mpeg,divx,m4v,mov,qt,flv,f4v,mp3,wav,aac,m4a,wma,ra,3gp,3g2,dv,vob,mkv,ts',
mimeTypes : 'video/*,audio/*'
},
//flash
flash: {
title : 'Flashs',
extensions : 'swf,fla',
mimeTypes : 'application/x-shockwave-flash'
},
//办公文档，压缩文件等等
file: {
title : 'Files',
extensions : 'zip,rar,ppt,pptx,doc,docx,xls,xlsx,pdf',
mimeTypes : 'application/zip,application/x-rar-compressed,application/vnd.ms-powerpoint,application/vnd.openxmlformats- officedocument.presentationml.presentation,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms- excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/pdf'
}
};

}])

3.3.2 指令web-uploader

.directive('webUploader', ['$modal', function($modal){
return{
restrict: 'AE',
scope: {
accept: '=accept'
},
link: function($scope, $element, $attr){

$element.bind('click',function(){
var modalInstance = $modal.open({
controller: 'modalCtrl',
templateUrl: 'template/webuploader.tpl.html',
size:'lg',
resolve: {
items: function(){
return {
accept: $scope.accept,
type: $attr.type
};
}
}
});
modalInstance.result.then(function(returnStatus){
console.log(returnStatus);
},function(){
console.log('Modal dismissed at: ' + new Date());
});
});
}
};
}]);

4. webuploader怎么只能上传一个文件

使用webuploader

点击誉喊猛传按钮或者复制粘贴或者拖拉图片导面区域都传图片

点击传java代码庆桥 servletdopost

点击传图片存入写入文件夹

需要注意需要修渗此改js文件请求台路径

前段代码需要源码复

5. asp.net mvc 上传图片 webuploader

先分析原因。
你出现这个错误是因为你没有了解ASP.NET的工作原理。ASP.Net 和php，jsp ，asp等服务器语言一样 都是为了生成可供浏览器解析的页面，而可供迹则消浏览器解析的语言只有HTML。

1，如果你在aspx页面中插入一个asp:LinkButton 那么运行页面后 在浏览器中查看源代码你会发现这个标签实际被转为了一个<a>标签。
2，为什么你的写法不会转换呢？因为首先 传递给Literal1.Text 的值在asp.net中作为一段字符串被直接输出到浏览器中。那么你的写法到浏览器后源代码中仍然是一个asp:LinkButton 标签，而这个标签是无法被浏览器正确解析的。

解决办法：
知道了原因，那么如果非要按照你的写法去写，那么应该是这样的：
Literal1.Text = "姿知<li>" + ((users)Session["users"]).Name.ToString() + "</li><li> </li><li><a ID='LinkButton1' onclick='LinkButton1_Click1'>注销</a></li><li> </li><li>信息修改</li><li> </li>";
但是当你修改完后发现点击注销按钮依然不能执行！为什么呢？
因为你的LinkButton1_Click1 事件并没有在asp.net中被解析为可供浏览器识别的js代码。

如何解决？

在aspx页面中写一个asp:LinkButton按钮：
<asp:LinkButton ID='LinkButton2' runat='server' onclick='LinkButton1_Click1'>注销</asp:LinkButton>

运行页面，查看源代码 看看这个新加的注销按钮被解析为了什么html代码，大概如下
<a id="LinkButton2" onclick="xxxxx"></a>

将新加的linkbutton 设置不可见属性
<asp:LinkButton ID='LinkButton2' runat='server' visible="false" onclick='LinkButton1_Click1'>注销</asp:LinkButton>

重新修改后台代码
Literal1.Text = "<li>" + ((users)Session["users"]).Name.ToString() + "</li><li> </li><li><a ID='LinkButton1' onclick='xxxxx'>注销</a></li><li> </li><li>信息修改</li><li> </li>";
//也就是将标签的js事件绑定到那个隐藏的盯困注销按钮事件上。
希望对你有帮助

6. 百度上传控件webuploader如何限制 图片尺寸大小

可以通过mimeTypes判断图片类型，fileNumLimit: xx,//上传数量限制，fileSizeLimit: xx,//限制上传所有文件大小，fileSingleSizeLimit: xx,//限制上传单个文件大小

accept:{//只允许选择图片文件格式
title:'Images',
extensions:'gif,jpg,bmp,png',
mimeTypes:'image/*'
},
/**
*验证文件格式以及文件大小
*/
uploader.on("error",function(type){
if(type=="Q_TYPE_DENIED"){
layer.msg("请上传JPG、PNG、GIF、BMP格式文件");
}elseif(type=="Q_EXCEED_SIZE_LIMIT"){
layer.msg("文件大小不能超过2M");
}else{
layer.msg("上传出错！请检查后重新上传！错误代码"+type);
}
});

7. webuploader分片上传的实现代码（前后端分离）

本文介绍了webuploader分片上传的实现代码（前后端分离），分享给大家，具体如下：
WebUploader是由Bai
WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS
6+,
android
4+。两套运行时，同样的调用方式，可供用户任意选用。采用大文件分片并发上传，极大的提高了文件上传效率。(这个是从官网上直接的解释)
功能描述
1、webuploader是网络研发的上传组件，文档不是特别规整，但是也够用了。
2、前端使用官网的上传图片demo，在此基础上代码略微调整做分片。既可以上传图片也可以上传文件。文件超过分片大小才启用分片。
3、分片上传已做md5校验，达到秒传的效果。分片以后需要合并，可以先分片后合并，也可以边分片边合并，本示例采用的是边分片边合并的方案。
4、后端用springboot做框架搭建。springMVC做rest服务，开启跨域访问。
5、容器用springboot内置的tomcat插件，运行Application的main方法即可启动服务；
显示效果
关键代码前端
WebUploader.Uploader.register({
'name':
'webUploaderHookCommand',
'before-send-file':
'beforeSendFile',
"before-send":
"beforeSend"
},
{
beforeSendFile:
function(file)
{
var
task
=
new
WebUploader.Deferred();
fileName
=
file.name;
fileSize
=
file.size;
(new
WebUploader.Uploader()).md5File(file,
0,
10
*
1024
*
1024).progress(function(percentage)
{}).then(function(val)
{
fileMd5
=
val;
var
url
=
checkUrl;
var
data
=
{
type:
0,
fileName:
fileName,
fileMd5:
fileMd5,
fileSize:
fileSize
};
$.ajax({
type:
"POST",
url:
url,
data:
data,
cache:
false,
async:
false,
//
同步
timeout:
1000,
//
todo
超时的话，只能认为该分片未上传过
dataType:
"json",
error:
function(XMLHttpRequest,
textStatus,
errorThrown)
{
file.statusText
=
'server_error';
task.reject();
}
}).then(function(data,
textStatus,
jqXHR)
{
if(data.rtn
==
0)
{
if(data.obj
==
1)
{
file.statusText
=
'file_existed';
task.reject();
}
else
{
task.resolve();
}
}
else
{
task.reject();
}
});
});
return
task.promise();
},
beforeSend:
function(block)
{
var
task
=
new
WebUploader.Deferred();
var
url
=
checkUrl;
var
data
=
{
type:
1,
fileName:
fileName,
fileMd5:
fileMd5,
chunk:
block.chunk,
fileSize:
block.end
-
block.start
};
$.ajax({
type:
"POST",
url:
url,
data:
data,
cache:
false,
async:
false,
//
同步
timeout:
1000,
//
todo
超时的话，只能认为该分片未上传过
dataType:
"json"
}).then(function(data,
textStatus,
jqXHR)
{
if(data.rtn
==
0
&&
data.obj
==
1)
{
task.reject();
//
分片存在，则跳过上传
}
else
{
task.resolve();
}
});
this.owner.options.formData.fileMd5
=
fileMd5;
this.owner.options.formData.chunkSize
=
chunkSize;
return
task.promise();
}
});
//
实例化
uploader
=
WebUploader.create({
pick:
{
id:
'#filePicker',
label:
'点击选择文件'
},
formData:
{
uid:
123
},
dnd:
'#dndArea',
//指定文件拖拽的区域
paste:
'#uploader',
//指定监听paste事件的容器，如果不指定，不启用此功能。此功能为通过粘贴来添加截屏的图片。建议设置为document.body.
swf:
'../plugins/webuploader/Uploader.swf',
chunked:
true,
chunkSize:
chunkSize,
chunkRetry:
false,
threads:
1,
server:
uploadUrl,
//
runtimeOrder:
'flash',
//
accept:
{
//
title:
'Images',
//
extensions:
'gif,jpg,jpeg,bmp,png',
//
mimeTypes:
'image/*'
//
},
//
禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
disableGlobalDnd:
true,
fileNumLimit:
300
//限制多文件上传的个数
//fileSizeLimit:
200
*
1024
*
1024,
//
限制所有文件的大小
200
M
//fileSingleSizeLimit:
50
*
1024
*
1024
//
限制单个文件的大小
50
M
});
后端
import
java.io.File;
import
java.io.IOException;
import
org.slf4j.Logger;
import
org.slf4j.LoggerFactory;
import
org.springframework.beans.factory.annotation.Value;
import
org.springframework.stereotype.Service;
import
org.springframework.web.multipart.MultipartFile;
import
com.bear.upload.util.FileUtil;
import
com.bear.upload.util.RETURN;
import
com.bear.upload.vo.CheckMd5FileVO;
import
com.bear.upload.vo.UploadVO;
@Service
public
class
ChunkUploadService
{
private
static
Logger
LOG
=
LoggerFactory.getLogger(ChunkUploadService.class);
@Value("${file.upload.path}")
private
String
UPLOAD_PATH;
private
static
final
String
Delimiter
=
"-";
/**
*
上传之前校验(整个文件、分片)
*
*
@param
md5FileVO
*
@return
*/
public
Object
check(CheckMd5FileVO
md5FileVO)
{
Integer
type
=
md5FileVO.getType();
Long
chunk
=
md5FileVO.getChunk();
String
fileName
=
md5FileVO.getFileName();
Long
fileSize
=
md5FileVO.getFileSize();
if
(type
==
0)
{//
未分片校验
String
destfilePath
=
UPLOAD_PATH
+
File.separator
+
fileName;
File
destFile
=
new
File(destfilePath);
if
(destFile.exists()
&&
destFile.length()
==
fileSize)
{
return
RETURN.success("文件已存在，跳过",
1);
}
else
{
return
RETURN.success("文件不存在",
0);
}
}
else
{//
分片校验
String
fileMd5
=
md5FileVO.getFileMd5();
String
destFileDir
=
UPLOAD_PATH
+
File.separator
+
fileMd5;
String
destFileName
=
chunk
+
Delimiter
+
fileName;
String
destFilePath
=
destFileDir
+
File.separator
+
destFileName;
File
destFile
=
new
File(destFilePath);
if
(destFile.exists()
&&
destFile.length()
==
fileSize)
{
return
RETURN.success("分片已存在，跳过",
1);
}
else
{
return
RETURN.success("分片不存在",
0);
}
}
}
/**
*
文件上传
*
*
@param
file
*
@param
uploadVO
*
@param
appVersion
*
@return
*/
public
Object
upload(MultipartFile
file,
UploadVO
uploadVO)
{
Long
chunk
=
uploadVO.getChunk();
if
(chunk
==
null)
{//
没有分片
return
UnChunkUpload(file,
uploadVO);
}
else
{//
分片
return
ChunkUpload(file,
uploadVO);
}
}
/**
*
分片上传
*
*
@param
file
*
@param
uploadVO
*
@param
appVersion
*
@return
*/
public
Object
ChunkUpload(MultipartFile
file,
UploadVO
uploadVO)
{
String
fileName
=
uploadVO.getName();
String
fileMd5
=
uploadVO.getFileMd5();
Long
chunk
=
uploadVO.getChunk();//
当前片
Long
chunks
=
uploadVO.getChunks();//
总共多少片
//
分片目录创建
String
chunkDirPath
=
UPLOAD_PATH
+
File.separator
+
fileMd5;
File
chunkDir
=
new
File(chunkDirPath);
if
(!chunkDir.exists())
{
chunkDir.mkdirs();
}
//
分片文件上传
String
chunkFileName
=
chunk
+
Delimiter
+
fileName;
String
chunkFilePath
=
chunkDir
+
File.separator
+
chunkFileName;
File
chunkFile
=
new
File(chunkFilePath);
try
{
file.transferTo(chunkFile);
}
catch
(Exception
e)
{
LOG.error("分片上传出错",
e);
return
RETURN.fail("分片上传出错",
1);
}
//
合并分片
Long
chunkSize
=
uploadVO.getChunkSize();
long
seek
=
chunkSize
*
chunk;
String
destFilePath
=
UPLOAD_PATH
+
File.separator
+
fileName;
File
destFile
=
new
File(destFilePath);
if
(chunkFile.length()
>
0)
{
try
{
FileUtil.randomAccessFile(chunkFile,
destFile,
seek);
}
catch
(IOException
e)
{
LOG.error("分片{}合并失败：{}",
chunkFile.getName(),
e.getMessage());
return
RETURN.fail("分片合并失败",
1);
}
}
if
(chunk
==
chunks
-
1)
{
//
删除分片文件夹
FileUtil.deleteDirectory(chunkDirPath);
return
RETURN.success("上传成功",
1);
}
else
{
return
RETURN.fail("上传中...",
1);
}
}
/**
*
未分片上传
*
*
@param
file
*
@param
uploadVO
*
@param
appVersion
*
@return
*/
public
Object
UnChunkUpload(MultipartFile
file,
UploadVO
uploadVO)
{
String
fileName
=
uploadVO.getName();
//
String
fileMd5
=
uploadVO.getFileMd5();
//
文件上传
File
destFile
=
new
File(UPLOAD_PATH
+
File.separator
+
fileName);
if
(file
!=
null
&&
!file.isEmpty())
{
//
上传目录
File
fileDir
=
new
File(UPLOAD_PATH);
if
(!fileDir.exists())
{
fileDir.mkdirs();
}
if
(destFile.exists())
{
destFile.delete();
}
try
{
file.transferTo(destFile);
return
RETURN.success("上传成功",
0);
}
catch
(Exception
e)
{
LOG.error("文件上传出错",
e);
return
RETURN.fail("文件上传出错",
0);
}
}
return
RETURN.fail("上传失败",
0);
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:Vue2.0结合webuploader实现文件分片上传功能使用WebUploader实现分片断点上传文件功能（二）webuploader在springMVC+jquery+Java开发环境下的大文件分片上传的实例代码jQuery
webuploader分片上传大文件

8. 使用webuploader插件上传图片时如果正确 限制上传数量

php.ini:upload_max_filesize 所上传的文件的最大大小。默认值2M。

9. vue移动端图片上传，可最多上传9张,使用webuploader插件

图片上传WebUploader.js

10. webuploader上传图片报F_EXCEED_SIZE错误，是什么原因

当册贺validate不通过时，会以派送错误事件的形式通知调用者。通过upload.on('error', handler)可以捕获到此类错误，目前有以下错误会在特州慎派定的情况下派送错来。
Q_EXCEED_NUM_LIMIT 在设置了fileNumLimit且尝试给uploader添加的文件数量超出这个值时派送。
Q_EXCEED_SIZE_LIMIT 在设置了Q_EXCEED_SIZE_LIMIT且尝试给uploader添加孝答的文件总大小超出这个值时派送。
Q_TYPE_DENIED 当文件类型不满足时触发。。
应该是你的upload.js中fileSingleSizeLimit参数设置过小，你可以修改大一点试试
具体参见http://fex..com/webuploader/doc/index.html