大文件webuploader的基本使用
webuploader的简单使用
需要的文件 自备 百度很多
webuploader.js uploader.swf jQuery
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Document</title>
-
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
-
<script type="text/javascript" src="webuploader.js"></script>
-
<style type="text/css">
-
.webuploader-container {
-
position: relative;
-
}
-
.webuploader-element-invisible {
-
position: absolute !important;
-
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
-
clip: rect(1px,1px,1px,1px);
-
}
-
.webuploader-pick {
-
position: relative;
-
display: inline-block;
-
cursor: pointer;
-
background: #00b7ee;
-
padding: 10px 15px;
-
color: #fff;
-
text-align: center;
-
border-radius: 3px;
-
overflow: hidden;
-
}
-
.webuploader-pick-hover {
-
background: #00a2d4;
-
}
-
-
.webuploader-pick-disable {
-
opacity: 0.6;
-
pointer-events:none;
-
}
-
</style>
-
</head>
-
<body>
-
<div id="uploader" class="wu-example">
-
<!--用来存放文件信息-->
-
<div id="thelist" class="uploader-list"></div>
-
<div class="btns">
-
<div id="picker">选择文件</div>
-
<button id="ctlBtn" class="btn btn-default">开始上传</button>
-
</div>
-
</div>
-
<div id="fileList"></div>
-
<div id="ss"></div>
-
</body>
-
</html>
-
$(function() {
-
var uploader;
-
uploader = WebUploader.create({
-
resize: false, // 不压缩image
-
swf: 'uploader.swf',// swf文件路径
-
server: 'upload.php', // 文件接收服务端。
-
pick: '#picker',// 选择文件的按钮。可选。内部根据当前运行是创建,可能是input元素,也可能是flash.
-
chunked: true,//允许分片上传
-
chunkSize:2*1024*1024,//每个分片大小
-
auto: true,//是否自动上传
-
duplicate:true,//去除重复
-
fileNumLimit:20,//上传文件个数限制
-
fileSingleSizeLimit:20*1024*1024, //单个文件大小限制 20M
-
accept: {
-
title: '文字描述',//文字描述
-
extensions: 'png,3gp,mp4,rmvb,mov,avi,m4v,wmv',//上传文件后缀
-
mimeTypes: 'image/*,video/*,audio/*,application/*'//上传文件类型
-
}
-
});
-
uploader.on('uploadStart', function (file) {
-
alert("这是文件上传前的操作函数");
-
});
-
$("#ctlBtn").click(function () {
-
alert("要使用手动上传请设置参数");
-
// uploader.upload();//这是将参数配置auto设置 false 手动上传
-
});
-
uploader.on( 'fileQueued', function( file ) { //文件加入队列后触发
-
var $list = $("#fileList"),
-
$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 );
-
// 创建缩略图
-
uploader.makeThumb( file, function( error, src ) { //src base_64位
-
if ( error ) {
-
$img.replaceWith('<span>不能预览</span>');
-
return;
-
}
-
-
$img.attr( 'src', src );
-
}, 100, 100 ); //100x100为缩略图尺寸
-
});
-
// 文件上传过程中创建进度实时显示。
-
uploader.on( 'uploadProgress', function( file, percentage ) {
-
var ss=(percentage*100)+"%";
-
$("#ss").text(ss);
-
});
-
-
// 文件上传成功
-
uploader.on( 'uploadSuccess', function( file, res ) {
-
alert("这是文件上传成功的操作函数");
-
console.log(res.filePaht);//这里可以得到上传后的文件路径
-
});
-
-
});
大文件webuploader的基本使用的更多相关文章
- 用百度webuploader分片上传大文件
一般在做文件上传的时候,都是通过客户端把要上传的文件上传到服务器,此时上传的文件都在服务器内存,如果上传的是视频等大文件,那么服务器内存就很紧张,而且一般我们都是用flash或者html5做异步上传, ...
- Webuploader 大文件分片上传
百度Webuploader 大文件分片上传(.net接收) 前阵子要做个大文件上传的功能,找来找去发现Webuploader还不错,关于她的介绍我就不再赘述. 动手前,在园子里找到了一篇不错的分片 ...
- 使用Webuploader大文件分片传输
背景:50G大文件的HTTP上传至服务器. 好了,根据这个命题,可以开始研究我们怎么做才能把这么大的文件上传成功. 分片上传是肯定的,断点续传也是要有的,进度可视化那就更好了,基于这些,我选择了Web ...
- 【原创】MVC +WebUploader 实现分片上传大文件
大文件的上传是我一直以来想学习的一个技术点,今天在项目闲暇之时,终于有机会自己尝试了一把,本文仅仅是个Demo,各种错误处理都么有,仅限于大家来学习思路. 参考博文:http://www.cnblog ...
- Asp.net MVC利用WebUploader上传大文件出现404解决办法。
刚开始我上传小文件都是比较顺利的,但是上传了一个大文件大约有200M的压缩包就不行了.在chrome里面监视发现网络状态是404,我分析可能不是WebUploader的限制,应该是WebConfig限 ...
- Bottle + WebUploader 修改Bottle框架从而大文件上传实现方案
Bottle 是个轻量级的Web框架,小巧又强大,真不愧是个轻量级的框架.可扩展性非常好,可以扩展很多功能,但是有些功能就不得不自己动手修改了. Bottle:http://www.bottlepy. ...
- 百度Webuploader 大文件分片上传(.net接收)
前阵子要做个大文件上传的功能,找来找去发现Webuploader还不错,关于她的介绍我就不再赘述. 动手前,在园子里找到了一篇不错的分片上传的帖子,参考之后,踏出了第一步.此文记录我这次实践的点滴,仅 ...
- webUploader实现大文件分片,断点续传
问题: 公司现在的业务需求是要上传一个大文件,上一次写了一篇博客,做了一个简单的文件上传,支持单文件,大型文件上传 现在对之前的上传进行优化,支持断点续传,秒传功能 上次博客:[http://www. ...
- 百度Fex webuploader.js上传大文件失败
项目上用百度webuploader.js上传文件,option选项里面已经设置单个文件大小,但是上传低于此阈值的文件时仍然不成功. 我现在的理解是,框架是将文件post到后台服务器端的.. 百度发现是 ...
随机推荐
- request.getParameterMap()获得Map中的数据
今天使用request.getParameterMap()获得Map中的数据时,使用 Map map=request.getParameterMap(); i ...
- 迷你MVVM框架 avalonjs 1.4.1发布
以后有关avalon的版本升级消息,全部改放到这里 重构parseHTML,让其支持xhtml 强化 ms-duplex-number拦截器 添加data-duplex-number辅助指令 值为st ...
- 从给定字符串中截取n个字节的字符(解决汉字截取乱码问题)
function GetNBytesChar(s: Ansistring; n: Integer): string;var aStr: AnsiString; bStr: WideString;b ...
- whlie and for
public class TestWhileAndFor { /**测试 while和for循环练习 * 100 以内的奇数和偶数的和 * @author Administrator * */ pub ...
- mysql在linux中安装问题和命令
1. cd / 切换到 根目录. 2. cd /root 切换到根目录下的 root目录. 3. cd .. 切换到当前目录的上级目录. 4. rpm --qa mysql 查询已经安装mysql. ...
- java 解析命令行参数
下载地址: https://jcenter.bintray.com/org/apache/commons/com.springsource.org.apache.commons.cli/1.2.0/ ...
- print 不换行
[print 不换行] 参考:http://zhidao.baidu.com/link?url=-qC2RyT5_GWzW_N-SyqJYgegVt2sSXwmMWGvHfk_4MjErhm_Pj23 ...
- Intersecting Lines(叉积,方程)
Intersecting Lines http://poj.org/problem?id=1269 Time Limit: 1000MS Memory Limit: 10000K Total Su ...
- ECMAScript6新特性之Array API
一 填充数组 var arr = new Array(5); arr.fill('abc',2,4); console.log('Array.prototype.fill',arr); // [und ...
- phpStudy5——php导入其他php文件(php文件的引入)
前言: 通过前边几个例子,相信大家都会有一个疑惑了,就是每个请求数据库的php页面,都要写一次连接数据库的代码,这个肯定是有违代码复用原则的.那么怎么解决这个问题呢? 在php中可以通过include ...