㈠ 使用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
㈡ javaWEB项目中如何实现批量选择文件并上传呢有什么好的插件，最好有相关代码例子
jquery.uploadify批量上传控件
[html]
<linkhref="styles/uploadify.css"rel="stylesheet"type="text/css"/>
<scripttype="text/javascript"src="styles/uploadify.swf"></script>
<scripttype="text/javascript"src="javascripts/jquery.uploadify.min.js"></script>
<linkhref="styles/uploadify.css"rel="stylesheet"type="text/css"/>
<scripttype="text/javascript"src="styles/uploadify.swf"></script>
<scripttype="text/javascript"src="javascripts/jquery.uploadify.min.js"></script>还有jquery.js,你懂得!
这里注意哦,css文件会引用到这个图片哦,所以请你指定这个图片的位置哦,不然就没有显示这个叉叉哦,这个叉叉是删除按钮的哦,没有就是空白哦!
[javascript]
<script>
functionsnedUpLoad(){
varpid=$("#entityId").val();//这个是我自己获取的自定义参数
varentityName=$("#entityName").val();//同上
$("#uploadify").uploadify({//初始化uploadifyuploadify是input的id
//'debug':false,//bug模式,默认是false
'auto':false,//自动上传,就是控件自动上传,默认是true
'multi':true,
//'successTimeout':99999,//超时时间
'formData':{'pid':pid,'entityName':entityName},//我的参数列表
//'fileObjName':'uploadify',//服务器的属性名字
'uploader':'你的后台url地址;jsessionid=${pageContext.session.id}',//提交服务器路径,这里
说明下;jsessionid=${pageContext.session.id},这个是用于非IE内核的浏览器兼容的
'swf':"styles/uploadify.swf",//flash文件,官方的文件,引用上就是了
//'uploader':'/Home/Upload',//文件保存路径用处不大
'buttonText':'文件上传',//按钮
//'height':'32',//浏览按钮的高度
//'width':'100',//浏览按钮的宽度
'fileTypeDesc':'支持的格式：',//在浏览窗口底部的文件类型下拉菜单中显示的文本
'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png',//允许上传的文件后缀
'fileSizeLimit':'3MB',//上传文件的大小限制
'queueSizeLimit':25,//上传数量
'onSelectError':function(file,errorCode,errorMsg){//返回一个错误，选择文件的时候触发
switch(errorCode){
case-100:
alert("上传的文件数量已经超出系统限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"个文件！");
break;
case-110:
alert("文件["+file.name+"]大小超出系统限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小！");
break;
case-120:
alert("文件["+file.name+"]大小异常！");
break;
case-130:
alert("文件["+file.name+"]类型不正确！");
break;
}
},
'onFallback':function(){//检测FLASH失败调用
alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");
},
'onUploadSuccess':function(file,data,response){//上传到服务器，服务器返回相应信息到data里
if(data){
vardataObj=eval("("+data+")");//转换为json对象
//$('#uploadify').uploadify('upload')
}
}
});
}
</script>
<script>
functionsnedUpLoad(){
varpid=$("#entityId").val();//这个是我自己获取的自定义参数
varentityName=$("#entityName").val();//同上
$("#uploadify").uploadify({//初始化uploadifyuploadify是input的id
//'debug':false,//bug模式,默认是false
'auto':false,//自动上传,就是控件自动上传,默认是true
'multi':true,
//'successTimeout':99999,//超时时间
'formData':{'pid':pid,'entityName':entityName},//我的参数列表
//'fileObjName':'uploadify',//服务器的属性名字
'uploader':'你的后台url地址;jsessionid=${pageContext.session.id}',//提交服务器路径,这里
说明下;jsessionid=${pageContext.session.id},这个是用于非IE内核的浏览器兼容的
'swf':"styles/uploadify.swf",//flash文件,官方的文件,引用上就是了
//'uploader':'/Home/Upload',//文件保存路径用处不大
'buttonText':'文件上传',//按钮
//'height':'32',//浏览按钮的高度
//'width':'100',//浏览按钮的宽度
'fileTypeDesc':'支持的格式：',//在浏览窗口底部的文件类型下拉菜单中显示的文本
'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png',//允许上传的文件后缀
'fileSizeLimit':'3MB',//上传文件的大小限制
'queueSizeLimit':25,//上传数量
'onSelectError':function(file,errorCode,errorMsg){//返回一个错误，选择文件的时候触发
switch(errorCode){
case-100:
alert("上传的文件数量已经超出系统限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"个文件！");
break;
case-110:
alert("文件["+file.name+"]大小超出系统限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小！");
break;
case-120:
alert("文件["+file.name+"]大小异常！");
break;
case-130:
alert("文件["+file.name+"]类型不正确！");
break;
}
},
'onFallback':function(){//检测FLASH失败调用
alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");
},
'onUploadSuccess':function(file,data,response){//上传到服务器，服务器返回相应信息到data里
if(data){
vardataObj=eval("("+data+")");//转换为json对象
//$('#uploadify').uploadify('upload')
}
}
});
}
</script>
[javascript]
$(function(){
snedUpLoad();//jquery容器加载完运行我们的函数
})
$(function(){
snedUpLoad();//jquery容器加载完运行我们的函数
})
[html]
<inputtype="file"name="uploadify"id="uploadify"/>//申明控件的容器
<inputtype="file"name="uploadify"id="uploadify"/>//申明控件的容器
前台页面代码基本就这样了,很好明白,至于后台逻辑和普通上传处理一致的,这里就不列出来的,最后上一张图给大家鉴赏一下
(tip:其实他的批量上传并不是一次全部提交处理的,他是一个一个依次提交,相当是一个for循环,所以后台处理的同时只是一个文件上传,即排序的处理上传文件,就和单个文件上传的代码一样,如果你早有后台的单文件上传代码就不用改,直接调用就行了,可以共用)
㈢ webuploader在安卓微信环境上传为什么不能多选
引入资源 使用Web Uploader文件上传需要引入三种资源：JS, CSS, SWF。 <!--引入CSS--> <link rel="stylesheet" type="text/css" href="webuploader文件夹/悉弊webuploader/server/fileupload/server/fileupload.php', // 选择文件的按钮。 可选。 // 内部根据当前运行是创建，可能是input元素，也可能是flash. pick: '#filePicker', // 只允许选择图片文件。 accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' } }); 监听fileQueued事件，通过uploader.makeThumb来创建图片预览图。 PS: 这里得到的是Data URL数据，IE6、IE7不支持直接预览。可以借助FLASH或者服务端来完成预览。 // 当有文件添加进码陆者来的时候 uploader.on( 'fileQueued', function( file ) { var $li = $( '<div id="' + file.id + '" class="file-item thumbnail">' + '<img>' + '<div class="info">' + file.name + '</div>' + '</div>' ), $img = $li.find('img'); // $list为容器jQuery实例 $list.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 ); }, thumbnailWidth, thumbnailHeight ); }); 然后剩下的就是上传状态提示了，当文件上传过程中, 上传成功，上传失败，上传完成都分别对应uploadProgress,uploadSuccess, uploadError, uploadComplete事件。 // 文件上传过程中创建进度条实时显示。 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 ) { $( '#'+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(); }); 以上所述是小编给大家介绍的使用Web Uploader实现多文件上传的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
㈣ 如何通过web页面绕过web服务器直接上传文件到FTP服务器
可以用ASPX页面表单请求到你WEB服务器上的接收接口，选择文件后点击上传，直接提交到你FTP服务器上。
FTP服务器上接收时候做个来源的判断，如果是非法调用的话直接阻止。
上传文件完成后，回调你网站Web服务器，返回上传文件的路径和文件名。
㈤ 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分片上传大文件
㈥ 如何在Web页上实现文件上传
JAVA WEB文件上传步骤如下：
实现 Web 开发中的文件上传功能，两个操作：在 Web 页面添加上传输入项，在 Servlet 中读取上传文件的数据并保存在本地硬盘中。
1、Web 端上传文件。在 Web 页面中添加上传输入项：<input type="file"> 设置文件上传输入项时应注意：(1) 必须设置 input 输入项的 name 属性，否则浏览器将不会发送上传文件的数据。(2) 必须把 form 的 enctype 属性设为 multipart/form-data，设置该值后，浏览器在上传文件时，将把文件数据附带在 http 请求消息体中，并使用 MIME 协议对上传文件进行描述，以方便接收方对上传数据进行解析和处理。(3) 表单提交的方式要是 post