功能强大的文件上传插件带上传进度-WebUploader

2024-08-25 16:38

本文主要是介绍功能强大的文件上传插件带上传进度-WebUploader,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

WebUploader是由Baidu WebFE(FEX)团队开发的一个以HTML5/FLASH构建的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用老的FLASH运行时,兼容PC和移动端。它最大的特点是采用大文件分片并发上传,极大的提高了文件上传效率。touchend略要处理下。功能强大的文件上传插件带上传进度 ,有兴趣请直接下载源码拿去用。

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

选择图片
首先js创建Web Uploader实例: 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/*'  }  
}); 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为缩略图尺寸  
});
// 文件上传过程中创建进度条实时显示。  
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();  
}); 
.prev{left: 20px}  
.next{right: 20px}
PHP处理文件上传 upload.php接收上传数据,将上传的文件保存到服务器相关目录,并将上传结果告知前端上传组件。 这里值得一提的是,如果设置了大文件分片上传,PHP将每次上传的小文件片临时保存,等最后文件片全部接收完毕后再将这些临时文件片组合,成为一个完整的大文件。 webuploader的分片上传是把文件分成若干份,然后向你定义的文件接收端post数据,如果上传的文件大于分片的尺寸,就会进行分片,然后会在post的数据中添加两个form元素chunk和chunks,前者标示当前分片在上传分片中的顺序(从0开始),后者代表总分片数。 关于upload.php中的代码,这里就不贴出来了,大家可以下载源码来学习。 Web Uploader项目的官网地址:http://fex.baidu.com/webuploader/

这里可以看演示效果 功能强大的文件上传插件带上传进度

这篇关于功能强大的文件上传插件带上传进度-WebUploader的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1106087

相关文章

Java实现数据库图片上传与存储功能

《Java实现数据库图片上传与存储功能》在现代的Web开发中,上传图片并将其存储在数据库中是常见的需求之一,本文将介绍如何通过Java实现图片上传,存储到数据库的完整过程,希望对大家有所帮助... 目录1. 项目结构2. 数据库表设计3. 实现图片上传功能3.1 文件上传控制器3.2 图片上传服务4. 实现

使用mvn deploy命令上传jar包的实现

《使用mvndeploy命令上传jar包的实现》本文介绍了使用mvndeploy:deploy-file命令将本地仓库中的JAR包重新发布到Maven私服,文中通过示例代码介绍的非常详细,对大家的学... 目录一、背景二、环境三、配置nexus上传账号四、执行deploy命令上传包1. 首先需要把本地仓中要

Java实现数据库图片上传功能详解

《Java实现数据库图片上传功能详解》这篇文章主要为大家详细介绍了如何使用Java实现数据库图片上传功能,包含从数据库拿图片传递前端渲染,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1、前言2、数据库搭建&nbsChina编程p; 3、后端实现将图片存储进数据库4、后端实现从数据库取出图片给前端5、前端拿到

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl

Java文件上传的多种实现方式

《Java文件上传的多种实现方式》文章主要介绍了文件上传接收接口的使用方法,包括获取文件信息、创建文件夹、保存文件到本地的两种方法,以及如何使用Postman进行接口调用... 目录Java文件上传的多方式1.文件上传接收文件接口2.接口主要内容部分3.postman接口调用总结Java文件上传的多方式1

使用Python实现大文件切片上传及断点续传的方法

《使用Python实现大文件切片上传及断点续传的方法》本文介绍了使用Python实现大文件切片上传及断点续传的方法,包括功能模块划分(获取上传文件接口状态、临时文件夹状态信息、切片上传、切片合并)、整... 目录概要整体架构流程技术细节获取上传文件状态接口获取临时文件夹状态信息接口切片上传功能文件合并功能小

IDEA常用插件之代码扫描SonarLint详解

《IDEA常用插件之代码扫描SonarLint详解》SonarLint是一款用于代码扫描的插件,可以帮助查找隐藏的bug,下载并安装插件后,右键点击项目并选择“Analyze”、“Analyzewit... 目录SonajavascriptrLint 查找隐藏的bug下载安装插件扫描代码查看结果总结Sona

Spring MVC 图片上传

引入需要的包 <dependency><groupId>commons-logging</groupId><artifactId>commons-logging</artifactId><version>1.1</version></dependency><dependency><groupId>commons-io</groupId><artifactId>commons-

Maven(插件配置和生命周期的绑定)

1.这篇文章很好,介绍的maven插件的。 2.maven的source插件为例,可以把源代码打成包。 Goals Overview就可以查看该插件下面所有的目标。 这里我们要使用的是source:jar-no-fork。 3.查看source插件的example,然后配置到riil-collect.xml中。  <build>   <plugins>    <pl

jenkins 插件执行shell命令时,提示“Command not found”处理方法

首先提示找不到“Command not found,可能我们第一反应是查看目标机器是否已支持该命令,不过如果相信能找到这里来的朋友估计遇到的跟我一样,其实目标机器是没有问题的通过一些远程工具执行shell命令是可以执行。奇怪的就是通过jenkinsSSH插件无法执行,经一番折腾各种搜索发现是jenkins没有加载/etc/profile导致。 【解决办法】: 需要在jenkins调用shell脚