WebUploader是百度WebFE(FEX)团队开发的一款简单的现代文件上传组件，主要基于HTML5，辅以FLASH。下面是jquery WebUploader文件上传组件用法的演示。

使用WebUploader，还可以批量上传文件，支持缩略图等很多参数选项，调用多个事件方法。您可以随意自定义您想要的上传组件。

接下来，我将通过一个图片上传的例子向您展示如何使用网络上传器。

超文本标记语言

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

link rel='样式表' type=' text/CSS ' href=' CSS/web uploader . CSS ' Script src=' http :http://cdn . bootscs.com/jquery/1 . 12 . 4/jquery . min . js '/Script Script type=' text/JavaScript ' src=' http : js/web uploader . min . js '/Script然后我们需要准备一个按钮#imgPicker和一个容器#fileList

div id=' uploadimg ' div id=' file list ' class=' uploader-list '/div div id=' img picker '选择图片/div /divJAVASCRIPT

首先创建网络上传程序实例：

varuploader=webuploader . create({ auto : true，//是否自动上传swf 3360' js/uploader.swf '，//swf文件路径server: 'upload.php '，///文件接收服务器pick3360' # imgpicker '，//。可选//只允许选择图片文件。accept: { title: 'Images '，extensions: 'gif，jpg，jpeg，bmp，png '，mimetype : ' image/* })；然后听fileQueued事件，也就是添加文件时，通过uploader.makeThumb创建一个预览图片。

uploader.on('fileQueued '，函数(file ) { var $list=$('#fileList ')，$ Li=$(' div id=' ' file . id ' ' class=' file-item缩略图' ' ' img ' ' div class=' info ' ' file . name '/div ' '/div ')，$ img=$ Li . find(' img ')；//$list是容器jQuery实例$ list . append($ Li)；//创建缩略图上传程序。makethumb(文件，函数(错误，src) {if(错误){$ img。replacewith ('span不能预览/span ')；返回；} $img.attr('src '，src)；}, 100, 100 );//100x100是缩略图大小})；最后，上传状态提示。在文件上传过程中，上传成功、上传失败、上传完成都分别对应上传进度、上传成功、上传错误、上传完成事件。

//创建进度条，在文件上传时实时显示。uploader.on('uploadProgress '，函数(文件，百分比){ var $li=$('#' file.id)，$percent=$li.find('。进度跨度’)；//避免重复创建if(！$ percent . length){ $ percent=$(' p class=' progress ' span/span/p ')。appendo($ Li)。find(' span ')；} $percent.css('width '，percent * 100 ' % ')；});//文件上传成功，给项目添加一个成功的类，用样式标记上传成功。uploader.on('uploadSuccess '，函数(file，RES){ console . log(RES . filepath)；//这里可以得到上传的文件路径$ ('#' file.id)。add class(' 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 ')。appendo($ Li)；} $error.text('上传失败')；});//上传后，如果成功或失败，先删除进度条。uploader.on('uploadComplete '，function(file ) { $('#' file.id)。查找('。进步”)。移除()；});这里，我们实现了一个简单的图像上传的例子。点击“选择图像”弹出文件选择对话框。选择图像后，我们将进入上传图像的过程，图像对应的缩略图将显示在列表中。

通用选项设置和事件调用

网络上传器提供了丰富的应用编程接口选项设置和事件调用。

常见事件描述：

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

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。