webuploader的使用
webuploader
html5 文件预览 压缩 判断 上传
WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又 不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。采用大文件分片并发上传，极大的提高了文件上传效率。
最近做两个项目均使用到。接口简单，引用资源也不多
//&图片上传demo
jQuery(function()&{
&&&&var&$&=&jQuery,
&&&&&&&&$list&=&$('#fileList'),
&&&&&&&&//&优化retina,&在retina下这个值是2
&&&&&&&&ratio&=&window.devicePixelRatio&||&1,
&&&&&&&&//&缩略图大小
&&&&&&&&thumbnailWidth&=&100&*&ratio,
&&&&&&&&thumbnailHeight&=&100&*&ratio,
&&&&&&&&//&Web&Uploader实例
&&&&//&初始化Web&Uploader
&&&&uploader&=&WebUploader.create({
&&&&&&&&//&自动上传。
&&&&&&&&auto:&true,
&&&&&&&&//&swf文件路径
&&&&&&&&swf:&BASE_URL&+&'/js/Uploader.swf',
&&&&&&&&//&文件接收服务端。
&&&&&&&&server:&'/server/fileupload.php',
&&&&&&&&//&选择文件的按钮。可选。
&&&&&&&&//&内部根据当前运行是创建，可能是input元素，也可能是flash.
&&&&&&&&pick:&'#filePicker',
&&&&&&&&//&只允许选择文件，可选。
&&&&&&&&accept:&{
&&&&&&&&&&&&title:&'Images',
&&&&&&&&&&&&extensions:&'gif,jpg,jpeg,bmp,png',
&&&&&&&&&&&&mimeTypes:&'image/*'
&&&&//&当有文件添加进来的时候
&&&&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.append(&$li&);
&&&&&&&&//&创建缩略图
&&&&&&&&uploader.makeThumb(&file,&function(&error,&src&)&{
&&&&&&&&&&&&if&(&error&)&{
&&&&&&&&&&&&&&&&$img.replaceWith('&span&不能预览&/span&');
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&}
&&&&&&&&&&&&$img.attr(&'src',&src&);
&&&&&&&&},&thumbnailWidth,&thumbnailHeight&);
&&&&//&文件上传过程中创建进度条实时显示。
&&&&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();
这个开发团队很大，遇到问题，上github很快就回复了。
webuploader官方地址 http://fex-team.github.io/webuploader/
Posted in:用心创造滤镜
扫码下载App
汇聚2000万达人的兴趣社区下载即送20张免费照片冲印
扫码下载App
温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
认认真真做事,踏踏实实做人
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
class FileAction extends Action{& & function index(){& & & & $file=M('file');& & & & $list=$file-&select();& & & & $this-&assign('filelist',$list);& & & & $this-&display(); &&& & } & && && & function upload(){& & & & //文件上传地址提交给他，并且上传完成之后返回一个信息，让其写入数据库 &&& & & & if(empty($_FILES)){& & & & & & $this-&error('必须选择上传文件'); &&& & & & }else{& & & & & & $a=$this-&up();& & & & & & if(isset($a)){& & & & & & & & //写入数据库的自定义c方法& & & & & & & & if($this-&c($a)){& & & & & & & & & & $this-&success('上传成功'); &&& & & & & & & & }& & & & & & & & else{& & & & & & & & & & $this-&error('写入数据库失败'); &&& & & & & & & & }& & & & & & }else{& & & & & & & & $this-error('上传文件异常，请与系统管理员联系'); &&& & & & & & }& & & & }& & }& && & private function c($data){& & & & $file=M('file');& & & & $num & &= & &'0';& & & & for($i = 0; $i & count($data)-1; $i++) {& & & & & & $data['filename']=$data[$i]['savename']; & & & & &&& & & & & &if( $file-&data($data)-&add())& & & & & &{& & & & & & & &$num++;& & & & & &}& & & & }& & & & if($num==count($data)-1)& & & & {& & & & & & &&& & & & }else& & & & {& & & & & && & & & }& & & && & }& && & private function up(){& & & & //完成与thinkphp相关的，文件上传类的调用 &&& & & & import('@.Org.UploadFile');//将上传类UploadFile.class.php拷到Lib/Org文件夹下& & & & $upload=new UploadFile();& & & & $upload-&maxSize='1000000';//默认为-1，不限制上传大小& & & & $upload-&savePath='./Public/Upload/';//保存路径建议与主文件平级目录或者平级目录的子目录来保存 &&& & & & $upload-&saveRule=//上传文件的文件名保存规则& & & & $upload-&uploadReplace=//如果存在同名文件是否进行覆盖& & & & $upload-&allowExts=array('jpg','jpeg','png','gif');//准许上传的文件类型& & & & $upload-&allowTypes=array('image/png','image/jpg','image/jpeg','image/gif');//检测mime类型& & & & $upload-&thumb=//是否开启图片文件缩略图& & & & $upload-&thumbMaxWidth='300,500';& & & & $upload-&thumbMaxHeight='200,400';& & & & $upload-&thumbPrefix='s_,m_';//缩略图文件前缀& & & & $upload-&thumbRemoveOrigin=1;//如果生成缩略图，是否删除原图& & & && & & & if($upload-&upload()){& & & & & & $info=$upload-&getUploadFileInfo();& & & & & & return $& & & & }else{& & & & & & $this-&error($upload-&getErrorMsg());//专门用来获取上传的错误信息的 &&& & & & } &&& & }& &}?&模板文件index.html&html&&body&&volist name="filelist" id="vo"&& 小图：&img src="__PUBLIC__/upload/s_{$vo['filename']}" /&&br /&& 大图：&img src="__PUBLIC__/upload/m_{$vo['filename']}" /&&br /&&/volist&&form action="__URL__/upload" method="post" enctype="multipart/form-data"&& & &input type="file" name="file[]" /&&br /&& & &input type="file" name="file[]" /&&br /&& & &input type="file" name="file[]" /&&br /&& & &input type="submit" value="上传" /&&/form&&/body&&/html&
阅读(741)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'thinkphp文件上传',
blogAbstract:'&?phpclass FileAction extends Action{& & function index(){& & & & $file=M(\'file\');& & & & $list=$file-&select();& & & & $this-&assign(\'filelist\',$list);& & & & $this-&display(); &&& & } & && && & function upload(){& & & & //文件上传地址提交给他，并且上传完成之后返回一个信息，让其写入数据库 &&& & & & if(empty($_FILES)){',
blogTag:'thinkphp文件上传,文件上传,php',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:0,
publishTime:2,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:true,
hostIntro:'认认真真做事,踏踏实实做人',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}Comments are closed.
2015 年十一月
9101112131415
16171819202122
23242526272829
近期评论文章归档
Recent posts}