本文目录
- 怎么封装webuploader
- web uploader怎么不使用按钮上传
- web uploader的demo怎样导入css文件
- webuploader 大文件分片上传处理如何解决
- webuploader上传成功后怎么删除
- webuploader该怎么配置啊，php的
- 用webuploader怎么解决跨域上传文件的问题
- webuploader分片上传的实现代码（前后端分离）
怎么封装webuploader
兼容IE6+ 以及以HTML5为主的上传组件。它支持分片和并发，也就是大文件可以分割多块并发上传。以及能够重传。
支持多种图片格式的预览和压缩。
支持多途径添加文件，比如拖拽，图片粘贴功能
支持了MD5，能够做文件md5值验证。
源码采用AMD规范，也实现AMD模块机制
查看源码其实可以看到分了几个模块组织代码，包括filepicker validator filepaste等都是可以拿出来单独用的。
所有代码都是在一个内部闭包中，对于暴露了唯一一个变量WebUploader,跟jQuery暴露$ 或 jQuery很类似，都是：return require(‘webuploader’),所以说内部是实现了一个简单的AMD模块机制
当然很多修复IE bug的代码，Android和 IOS的代码
同时它也定义了上传过程中的一系列事件像: fileQueued 、 startUpload 、 stopUpload、uploadFinished 等等，WebUploader帮我们定义了这些事件，我们需要在这些事件的回调函数中撰写我们的业务逻辑。
其实这也是封装的一个原因，把事件处理以及UI基本HTML的模板都封装起来了。
最后就是说一下其实WebUploader也实现了Promise规范。可以在WebUploader中创建Deferred对象来处理异步操作，如下：
// 在文件开始发送前做些异步操作。
// WebUploader会等待此异步操作完成后，开始发送文件。
Uploader.register({
’before-send-file’: ’doSomthingAsync’
}, {
doSomthingAsync: function() {
var deferred = Base.Deferred();
// 模拟一次异步操作。
setTimeout(deferred.resolve, 2000);
return deferred.promise();
}
web uploader怎么不使用按钮上传
web uploader可以使用按钮上传的。
1、引用脚本及样式 1 2 3 4 5 6 7 8 9 getting-starteder.js－－图片初始化及处理上传到服务器全是靠这个JS来实现 View Code 2、页面上代码： 选择图片 我用是NET+ashx
web uploader的demo怎样导入css文件
《!--引入CSS--》《link rel=“stylesheet“ type=“text/css“ href=“webuploader/webuploader.css“》
Web Uploader文件上传
首先准备dom结构，包含存放文件信息的容器、选择按钮和上传按钮三个部分。
初始化Web Uploader。
显示用户选择框。
文件上传进度显示。
文件成功、失败处理。
webuploader 大文件分片上传处理如何解决
关于插件的使用可以参考快速使用文档。在Github上下载了最新的压缩包后，基于其中的一个例子（image-upload）做了修改，主要是补充了.net后台分片接收文件的实现。
webuploader上传成功后怎么删除
webuploader上传成功后可以通过输入删除程序进行删除。
具体操作方法：
1、打开webuploader。
2、“点击选择图片”选择要删除的已上传图片。
3、输入程序：
//移除资源
$remove = isset($param[’remove’]) ? $param[’remove’] : array(); // 获取移除数据
unset($param[’remove’]);
$tools = new \org\Tools;
$result = $tools-》del_file(’../public/uploads/images/’, $remove);
$param[’photo’] = isset($param[’photo’]) ? implode(’,’, $param[’photo’]) : ’’; //获取插入数据
4、点击“确定”即可。
webuploader该怎么配置啊，php的
双核浏览器下在chrome内核中使用uploadify总有302问题，也不知道如何修复，反正很麻烦，之所以喜欢360浏览器是因为帮客户控制渲染内核，开发人员的神器啊有木有：
若页面需默认用极速核，增加标签：《meta name=“renderer“ content=“webkit“》
若页面需默认用ie兼容内核，增加标签：《meta name=“renderer“ content=“ie-comp“》
若页面需默认用ie标准内核，增加标签：《meta name=“renderer“ content=“ie-stand“》
要解决302问题也很简单，就是html5的文件上传，正好最近在ueditor里看到百度的webuploader，会自动选择flash html5，就是一个完善的解决方案了。
将最常用的操作封装为插件：
(function ($, applicationPath) {
function initWebUpload(item, options) {
var defaults = {
hiddenInputId: “uploadifyHiddenInputId“, // input hidden id
onAllComplete: function (event) { }, // 当所有file都上传后执行的回调函数
onComplete: function (event) { },// 每上传一个file的回调函数
innerOptions: {},
fileNumLimit: undefined,
fileSizeLimit: undefined,
fileSingleSizeLimit: undefined
};
var opts = $.extend({}, defaults, options);
var target = $(item);//容器
var pickerid = ““;
if (typeof guidGenerator != ’undefined’)//给一个唯一ID
pickerid = guidGenerator();
else
pickerid = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
var uploaderStrdiv = ’《div class=“webuploader“》’ +
’《div id=“thelist“ class=“uploader-list“》《/div》’ +
’《div class=“btns“》’ +
’《div id=“’ + pickerid + ’“》选择文件《/div》’ +
//’《a id=“ctlBtn“ class=“btn btn-default“》开始上传《/a》’ +
’《/div》’ +
’《/div》’;
target.append(uploaderStrdiv);
var $list = target.find(’#thelist’),
$btn = target.find(’#ctlBtn’),//这个留着，以便随时切换是否要手动上传
state = ’pending’,
uploader;
var jsonData = {
fileList:
};
var webuploaderoptions = $.extend({
// swf文件路径
swf: applicationPath + ’/Scripts/lib/webuploader/Uploader.swf’,
// 文件接收服务端。
server: applicationPath + ’/MvcPages/WebUploader/Process’,
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: ’#’ + pickerid,
// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
resize: false,
fileNumLimit: opts.fileNumLimit,
fileSizeLimit: opts.fileSizeLimit,
fileSingleSizeLimit: opts.fileSingleSizeLimit
},
opts.innerOptions);
var uploader = WebUploader.create(webuploaderoptions);
uploader.on(’fileQueued’, function (file) {//队列事件
$list.append(’《div id=“’ + file.id + ’“ class=“item“》’ +
’《div class=“info“》’ + file.name + ’《/div》’ +
’《div class=“state“》等待上传...《/div》’ +
’《div class=“del“》《/div》’ +
’《/div》’);
});
uploader.on(’uploadProgress’, function (file, percentage) {//进度条事件
var $li = target.find(’#’ + file.id),
$percent = $li.find(’.progress .bar’);
// 避免重复创建
if (!$percent.length) {
$percent = $(’《span class=“progress“》’ +
’《span class=“percentage“》《span class=“text“》《/span》’ +
’《span class=“bar“ role=“progressbar“ style=“width: 0%“》’ +
’《/span》《/span》’ +
’《/span》’).appendTo($li).find(’.bar’);
}
$li.find(’div.state’).text(’上传中’);
//$li.find(“.text“).text(percentage * 100 + ’%’);
$percent.css(’width’, percentage * 100 + ’%’);
});
uploader.on(’uploadSuccess’, function (file, response) {//上传成功事件
target.find(’#’ + file.id).find(’div.state’).text(’已上传’);
var fileEvent = {
queueId: file.id,
name: file.name,
size: file.size,
type: file.type,
filePath: response.filePath
};
jsonData.fileList.push(fileEvent)
opts.onComplete(fileEvent);
});
uploader.on(’uploadError’, function (file) {
target.find(’#’ + file.id).find(’div.state’).text(’上传出错’);
});
uploader.on(’uploadComplete’, function (file) {//全部完成事件
target.find(’#’ + file.id).find(’.progress’).fadeOut();
var fp = $(“#“ + opts.hiddenInputId);
fp.val(JSON.stringify(jsonData));
opts.onAllComplete(jsonData.fileList);
});
uploader.on(’fileQueued’, function (file) {
uploader.upload();
});
uploader.on(’filesQueued’, function (file) {
uploader.upload();
});
uploader.on(’all’, function (type) {
if (type === ’startUpload’) {
state = ’uploading’;
} else if (type === ’stopUpload’) {
state = ’paused’;
} else if (type === ’uploadFinished’) {
state = ’done’;
}
if (state === ’uploading’) {
$btn.text(’暂停上传’);
} else {
$btn.text(’开始上传’);
}
});
$btn.on(’click’, function () {
if (state === ’uploading’) {
uploader.stop();
} else {
uploader.upload();
}
});
//删除
$list.on(“click“, “.del“, function () {
var $ele = $(this);
var id = $ele.parent().attr(“id“);
var deletefile = {};
$.each(jsonData.fileList, function (index, item) {
if (item && item.queueId === id) {
deletefile = jsonData.fileList.splice(index, 1);
$(“#“ + opts.hiddenInputId).val(JSON.stringify(jsonData));
$.post(opts.ashx, { ’type’: ’delete’, ’filepathname’: deletefile.filePath }, function (returndata) {
$ele.parent().remove();
});
return;
}
});
});
}
$.fn.powerWebUpload = function (options) {
var ele = this;
if (typeof PowerJs != ’undefined’) {
$.lazyLoad(applicationPath + “/Scripts/lib/webuploader/webuploader.css“, function () { }, ’css’);
$.lazyLoad(applicationPath + “/Scripts/lib/webuploader/webuploader.min.js“, function () {
initWebUpload(ele, options);
});
}
else {
initWebUpload(ele, options);
}
}
})(jQuery, applicationPath);
html:
《div id=“uploadify“ class=“shortuploader“》《/div》
《input type=“hidden“ id=“hfFilePath“ /》
用webuploader怎么解决跨域上传文件的问题
跨域请求前浏览器会自动发出一个options请求，如果服务器的响应头部中有如下信息：
Access-Control-Allow-Origin: #允许访问的源，如ht localhost:3000
Access-Control-Allow-Methods: #允许的方法，如get, post
浏览器收到这个响应就会继续原来的请求，否则就会终止。
在webuploader中可以在uploadBeforeSend的回调中设置请求的头部，例如
uploader.on(’uploadBeforeSend’, function(obj, data, headers) {
_.extend(headers, {
“Origin“: “h /localhost:3000“,
“Access-Control-Request-Method“: “POST“
});
});
在服务端的post响应中增加头部：Access-Control-Allow-Origin //localhost:3000
完整配置参考：
跨域请求的问题 · Issue #1265 · fex-team/webuploader · GitHub
还有相关讨论
麻烦讲一下跨域的相关配置，谢谢！ · Issue #135 · fex-team/webuploader · GitHub
webuploader分片上传的实现代码（前后端分离）
本文介绍了webuploader分片上传的实现代码（前后端分离），分享给大家，具体如下：
WebUploader是由Baidu
WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS
6+,
android
4+。两套运行时，同样的调用方式，可供用户任意选用。采用大文件分片并发上传，极大的提高了文件上传效率。(这个是从官网上直接copy的解释)
功能描述
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分片上传大文件
