jquery组件WebUploader文件上传用法详解

这篇文章主要为大家详细介绍了jquery组件WebUploader文件上传用法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件,下文来为各位演示一下关于jquery WebUploader文件上传组件的用法。

使用WebUploader还可以批量上传文件、支持缩略图等等众多参数选项可设置,以及多个事件方法可调用,你可以随心所欲的定制你要的上传组件。

接下来我以图片上传实例,给大家讲解如何使用WebUploader。

HTML

我们首先将css和相关js文件加载。

?


1

2

3

<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>

然后我们需要准备一个按钮#imgPicker,和一个用来存放添加的文件信息列表的容器#fileList,在body中加入如下代码:

?


1

2

3

4

<div id="uploadimg">

 <div id="fileList" class="uploader-list"></div>

 <div id="imgPicker">选择图片</div>

</div>

JAVASCRIPT

首先创建Web Uploader实例:

?


1

2

3

4

5

6

7

8

9

10

11

12

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来创建图片预览图。

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

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(‘<span>不能预览</span>‘);

 return;

 }

 

 $img.attr( ‘src‘, src );

 }, 100, 100 ); //100x100为缩略图尺寸

});

最后是上传状态提示了,当文件上传过程中, 上传成功,上传失败,上传完成都分别对应uploadProgress, uploadSuccess, 
uploadError, uploadComplete事件。

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

// 文件上传过程中创建进度条实时显示。

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, 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();

});

到这里,我们就实现了一个简单的图片上传实例,点击“选择图片”会弹出文件选择对话框,当选择图片后,即进入上传图片流程,会将图片对应的缩略图现实在列表里。

常用选项设置与事件调用

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

常用的事件说明:

更多精彩内容,请点击《jQuery上传操作汇总》《ajax上传技术汇总》进行深入学习和研究。

时间: 03-31

jquery组件WebUploader文件上传用法详解的相关文章

Web应用安全之文件上传漏洞详解

什么是文件上传漏洞 文件上传漏洞是在用户上传了一个可执行的脚本文件,本通过此脚本文件获得了执行服务器端命令的功能,这种攻击方式是最为直接,最为有效的,有时候,几乎没有什么门槛,也就是任何人都可以进行这样的攻击.文件上传为什么会是漏洞呢?文件上传本身是没有问题的,问题是文件上传后看服务器怎么来处理,怎么来解析这个文件.如果说服务器处理的模式不够安全,那么就会导致严重的后果,也就是上传了恶意的可执行文件以后,服务器端对此文件进行执行. 文件上传后导致的安全问题 上传的文件是web脚本语言,服务器的w

使用Commons FileUpLoad组件实现文件上传功能

Commons 是Apache开放的源码组织的一个java子项目,该项目主要涉及一些开发中常用的模块,如文件上传,命令行处理,数据库连接池等.FileUpLoad就是其中的一个用于处理HTTP文件上传的子项目.Commons FileUpLoad组建具有以下几个特点: 1.使用简单:Commons FileUpLoad组件可以方便的嵌入JSP文件中,在JSP文件中仅编写少量代码就可完成文件上传功能,十分方便. 2.能够全程控制上传的内容:使用Commons FileUpLoad组件提供的对象及操

Javascript Fromdata 与jQuery 实现Ajax文件上传以及文件的删除

前端HTML代码: <!DOCTYPE html> <html> <head> <title>ajax</title> <script type="text/javascript" src="js/jquery.js"></script> <meta charset="utf-8" /> <style type="text/css&qu

Javascript Fromdata 与jQuery 实现Ajax文件上传

<!DOCTYPE html> <html> <head> <title>ajax</title> <script type="text/javascript" src="js/jquery.js"></script> <meta charset="utf-8" /> <style type="text/css"> fo

七牛云存储Python SDK使用教程 - 上传策略详解

文 七牛云存储Python SDK使用教程 - 上传策略详解 七牛云存储 python-sdk 七牛云存储教程 jemygraw 2015年01月04日发布 推荐 1 推荐 收藏 2 收藏,2.7k 浏览 本教程旨在介绍如何使用七牛的Python SDK来快速地进行文件上传,下载,处理,管理等工作. 前言 我们在上面的两节中了解到,客户端上传文件时,需要从业务服务器申请一个上传凭证(Upload Token),而这个上传凭证是业务服务器根据上传策略(PutPolicy)来生成的,而这个生成过程中

jQuery File Upload文件上传插件使用

jQuery File Upload 是一个Jquery文件上传组件,支持多文件上传.取消.删除,上传前缩略图预览.列表显示图片大小,支持上传进度条显示:支持各种动态语言开发的服务器端.官网链接:https://github.com/blueimp/jQuery-File-Upload/wiki 特点:拖放支持:上传进度条:图像预览:可定制和可扩展的:兼容任何服务器端应用平台(PHP, Python, Ruby on Rails, Java, Node.js, Go etc.). 使用方法: 1

Jquery Uploadify多文件上传实例

jQuery Uploadify开发使用的语言是java. 详细的相关文档,可以参考官网的doc:http://www.uploadify.com/documentation/ 官网的讲解还是很详细的,关键是要耐心看.虽说是英文,单有百度翻译. 看官网jQuery uploadify有基于flash和html5 的2个版本.我使用的是基于flash的. Jsp页面引用的文件有: <!-- 转诊单的附件商场页面 --> <script type="text/javascript&

用jspSmartUpload组件实现文件上传、下载

jspSmartUpload组件,可从http://download.csdn.net/user/dearchuansir下载,压缩包的名字是jspSmartUpload.zip.下载后,将其解压到Tomcat的webapps目录下.解压后,将webapps/jspsmartupload目录下的子目录Web-inf名字改为全大写的WEB-INF,这样一改jspSmartUpload类才能使用.如果想让Tomcat服务器的所有Web应用程序都能用它,必须做如下工作: 1.进入命令行状态,将目录切换

Jquery form.js文件上传返回JSON数据,在IE下提示下载文件的解决办法,并对返回数据进行正确的解析

Jquery from.js插件上传文件非常方便,但是在ie10以下的版本会弹出下载文件对话框 解决方法: 1.在服务端设置response.setContentType("text/plain"); 2.对返回数据正确解析                这时返回的数据不再是json,不能使用解析json的方法进行解析                       var data1=eval("(" + data+ ")");  //将返回的字符