功能强大的文件上传插件带上传进度-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

相关文章

springboot上传zip包并解压至服务器nginx目录方式

《springboot上传zip包并解压至服务器nginx目录方式》:本文主要介绍springboot上传zip包并解压至服务器nginx目录方式,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录springboot上传zip包并解压至服务器nginx目录1.首先需要引入zip相关jar包2.然

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例

AJAX请求上传下载进度监控实现方式

《AJAX请求上传下载进度监控实现方式》在日常Web开发中,AJAX(AsynchronousJavaScriptandXML)被广泛用于异步请求数据,而无需刷新整个页面,:本文主要介绍AJAX请... 目录1. 前言2. 基于XMLHttpRequest的进度监控2.1 基础版文件上传监控2.2 增强版多

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意:总结前言在javascript中控制视频播放

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实现大文件切片上传及断点续传的方法,包括功能模块划分(获取上传文件接口状态、临时文件夹状态信息、切片上传、切片合并)、整... 目录概要整体架构流程技术细节获取上传文件状态接口获取临时文件夹状态信息接口切片上传功能文件合并功能小