迅猛调整jQuery插件WebUploader文件上传

近几来在项目中用到了百度的文本图片上传插件WebUploader,分享给我们。

文本上传是网站和 Web
应用程序的常用功用,平素尚未一款完美的文件上传组件,由此让广大开采职员遇到发烧的浏览器包容难题。

WebUploader是由Baidu
WebFE(FEX)团队费用的二个简单易行的以HTML5为主,FLASH为辅的当代文件上传组件,下文来为各位演示一下有关jquery
WebUploader文件上传组件的用法。

WebUploader是由Baidu
WebFE(FEX)团队支付的三个轻易易行的以HTML5为主,FLASH为辅的当代文件上传组件。在现世的浏览器里面能丰硕发挥HTML5的优势,同期又不放任主流IE浏览器,沿用原本的FLASH运维时,包容IE6+,iOS
6+, android 4+。两套运营时,一样的调用方式,可供用户自由选用。
采取大文件分片并发上传,极大的拉长了文件上传效用。

WebUploader 是由 Baidu FEX 团队费用的一款以 HTML5 为主,FLASH
为辅的当代文件上传组件。在今世的浏览器里面能丰裕发挥 HTML5
的优势,相同的时间又不丢掉主流IE浏览器,沿用原本的 FLASH 运维时,包容IE6+,iOS 6+, android
4+。选取大文件分片并发上传,相当大的增高了文件上传成效。

选取WebUploader仍是能够批量上传文件、帮忙缩略图等等众多参数选项可设置,以及多个事件措施可调用,你能够自由的定制你要的上传组件。

需要在点击打开链接下载WebUploader

参考百度官方网站张开学习借鉴,整理,具体内容如下

图片 1

 // 初始化Web Uploader***上传图片 
var uploader = WebUploader.create({ 
 // 选完文件后,是否自动上传。 
 auto: true, 
 // 文件接收服务端地址,自动生成缩略图需要后端完成。 
 server: '/common/uploadFile?imageZip=1', 
 // 选择文件的按钮。可选。 
 // 内部根据当前运行是创建,可能是input元素,也可能是flash. 
 pick: '#sendimg', 
 fileNumLimit: 5, 
 //allowMagnify: false, 
 // 只允许选择图片文件。 
 accept:{ 
 title: 'Images', 
 extensions: 'gif,jpg,jpeg,bmp,png', 
 mimeTypes: 'image/*' 
 } 
}); 
// 当有文件添加进来的时候 
 uploader.on( 'fileQueued', function( file ) { 
 var $li = $( 
  '<div style="float:right" id="' + file.id + '" class="delimg">' + 
   '<img class="addimg"><div class="closeimg">×</div>' + 
  '</div>' 
  ), 
 $img = $li.find('img'); 

 // $list为容器jQuery实例 
 $("#piccon").append( $li ); 
 // 创建缩略图 
 // 如果为非图片文件,可以不用调用此方法。 
 // thumbnailWidth x thumbnailHeight 为 100 x 100 
 uploader.makeThumb( file, function( error, src ) { 
  if ( error ) { 
  $img.replaceWith('不能预览'); 
  return; 
  } 

  $img.attr( 'src', src ); 
 }, 100, 100 ); 
 $li.on('click', function() { 
  $(this).remove(); 
 }) 
 }); 
 // 文件上传过程中创建进度条实时显示。 
 uploader.on( 'uploadProgress', function( file, percentage ) { 
  var $li = $( '#'+file.id ), 
  $percent = $li.find('.progress span'); 

  // 避免重复创建 
  if ( !$percent.length ) { 
  $percent = $('<p class="progress"></p>') 
   .appendTo( $li ) 
   .find('span'); 
  } 

  $percent.css( 'width', percentage * 100 + '%' ); 
 }); 

 // 文件上传成功,给item添加成功class, 用样式标记上传成功。 
 uploader.on( 'uploadSuccess', function( file,response ) { 
  imgurl=response.fileName;//这里可以拿到后台返回的图片名称 
  //alert(imgurl); 
  $( '#'+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(); 
 }); 

先来讲一说WebUploader的特性

接下去自身以图片上传实例,给大家讲明怎样选用WebUploader。

越来越多美丽内容,请点击《jQuery上传操作汇总》,进行深切学习和研究。

分片、并发

HTML

上述就是本文的全体内容,希望对大家的学习抱有援救,也盼望大家多多支持脚本之家。

  分片与出新结合,将多少个大文件分割成多块,并发上传,异常的大地提升大文件的上传速度。

咱俩先是将css和血脉相通js文件加载。

您可能感兴趣的小说:

  • jQuery
    webuploader分片上传大文件
  • 一点也不慢调节jQuery插件WebUploader文件上传
  • 百度多文件异步上传控件webuploader基本用法解析
  • jquery组件WebUploader文件上传用法详解
  • 依照WebUploader的文书上传js插件
  • 动用Web
    Uploader完毕多文本上传
  • Java中应用WebUploader插件上传大文件单文件和多文件的方式小结
  • php结合web
    uploader插件达成分片上传文件
  • Web
    Uploader文件上传插件使用详解
  • 至于webuploader插件使用进程碰到的小意思

  当互联网难点形成传输错误时,只必要重传出错分片,而不是漫天文件。其它分片传输能够越来越实时的追踪上传进程。

<link rel="stylesheet" type="text/css" href="css/webuploader.css"> 
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> 
<script type="text/javascript" src="js/webuploader.min.js"></script>

具体就能够查阅:jQuery
webuploader分片上传大文件

然后大家必要打算贰个按键#imgPicker,和三个用来存放增多的文书新闻列表的容器#fileList,在body中投入如下代码:

预览、压缩

<div id="uploadimg"> 
 <div id="fileList" class="uploader-list"></div> 
 <div id="imgPicker">选择图片</div> 
</div>

  扶助常用图片格式jpg,jpeg,gif,bmp,png预览与削减,节省网络数据传输。

JAVASCRIPT

  解析jpeg中的meta消息,对于各类orientation做了合情合理的拍卖,相同的时间收缩后上传保留图片的有所原始meta数据。

先是创造Web Uploader实例:

多渠道添Gavin件

var uploader = WebUploader.create({ 
 auto: true, // 选完文件后,是否自动上传 
 swf: 'js/Uploader.swf', // swf文件路径 
 server: 'upload.php', // 文件接收服务端 
 pick: '#imgPicker', // 选择文件的按钮。可选 
 // 只允许选择图片文件。 
 accept: { 
 title: 'Images', 
 extensions: 'gif,jpg,jpeg,bmp,png', 
 mimeTypes: 'image/*' 
 } 
});

  扶助文件多选,类型过滤,拖拽(文件&文件夹),图片粘贴成效。

跟着监听fileQueued事件,即当有文件增添进去的时候,通过uploader.makeThumb来成立图片预览图。

  粘贴功用主要体现在当有图片数据在剪切板中时(截屏工具如QQ(Ctrl + ALT

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 ) { 
 if ( error ) { 
 $img.replaceWith('不能预览'); 
 return; 
 } 

 $img.attr( 'src', src ); 
 }, 100, 100 ); //100x100为缩略图尺寸 
});
  • A), 网页中右击图片点击复制),Ctrl + V便可增加此图片文件。

最后是上传状态提示了,当文件上传进度中,
上传成功,上传退步,上传完曼彻斯特各自对应uploadProgress, uploadSuccess,
uploadError, uploadComplete事件。

HTML5 & FLASH**
**

// 文件上传过程中创建进度条实时显示。 
uploader.on( 'uploadProgress', function( file, percentage ) { 
 var $li = $( '#'+file.id ), 
 $percent = $li.find('.progress span'); 

 // 避免重复创建 
 if ( !$percent.length ) { 
 $percent = $('<p class="progress"></p>') 
 .appendTo( $li ) 
 .find('span'); 
 } 

 $percent.css( 'width', percentage * 100 + '%' ); 
}); 

// 文件上传成功,给item添加成功class, 用样式标记上传成功。 
uploader.on( 'uploadSuccess', function( file, res ) { 
 console.log(res.filePath);//这里可以得到上传后的文件路径 
 $( '#'+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(); 
});

  包容主流浏览器,接口一致,实现了两套运转时援助,用户无需关怀内部用了何等内核。

到此处,大家就落到实处了一个简练的图形上传实例,点击“选取图片”会弹出文件选用对话框,当采用图片后,即进入上传图片流程,会将图片对应的缩略图现实在列表里。

  同不平时候Flash部分没有做任何UI相关的行事,方便不关心flash的用户扩充和自定义业务必要。

常用选项设置与事件调用

MD5秒传**
**

Web Uploader提供了增进的API选项设置与事件调用。

  当文件体量大、量比较多时,支持上传前做文件md5值验证,一致则可径直跳过。

图片 2

  假如服务端与前者统一修改算法,取段md5,可大大升高验证品质,耗费时间在20ms左右。

图片 3

易扩展、可拆分**
**

常用的事件作证:

  选拔可拆分机制, 将依次职能独立成了小组件,可放肆搭配。

图片 4

  选取英特尔规范组织代码,清晰明了,方便高等游戏者扩充。

越多卓越内容,请点击《jQuery上传操作汇总》,《ajax上传技巧汇总》打开深切学习和商讨。

发表评论

电子邮件地址不会被公开。 必填项已用*标注