分享百度文件上传组件webUploader的使用demo

最新推荐文章于 2024-03-30 09:59:49 发布
最新推荐文章于 2024-03-30 09:59:49 发布
阅读量191 收藏
点赞数
文章标签： javascript html

先创建DOM节点：

<head ng-app="myApp">
   <meta charset="UTF-8">
   <title></title>
   <script src="jquery-1.10.1.min.js"></script>
   <script src="http://cdn.staticfile.org/webuploader/0.1.0/webuploader.js"></script>
   <!--<script src="file_up.js"></script>-->
</head>
<body ng-controller="myCtrl">
　　<p><input type="file" value="上传文件"/></p>
　　</br>
　　<div >
　  　<!--用来存放文件信息-->
     <div ></div>
     <div class="btns">
	<div >选择文件</div>
	<button >开始上传</button>
     </div>
     <div ></div>
   </div>
</body>


<<span style="color:rgb(255 211 0)">scriptspan>>
	//实例化
	var <span style="color:rgb(98 189 255)">uploaderspan> = <span style="color:rgb(98 189 255)">Web<span style="color:rgb(98 189 255)">Uploaderspan>span>.create({
	         // <span style="color:rgb(255 111 119)">swfspan>文件路径
	   	//<span style="color:rgb(255 111 119)">swfspan>: BASE_URL + '/js/<span style="color:rgb(98 189 255)">Uploaderspan>.<span style="color:rgb(255 111 119)">swfspan>',
	  	// <span style="color:rgb(255 111 119)">swfspan>:'<span style="color:rgb(73 238 255)">httpspan>://<span style="color:rgb(255 111 119)">cdnspan>.<span style="color:rgb(98 189 255)">static<span style="color:rgb(73 238 255)">filespan>span>.org/web<span style="color:rgb(98 189 255)">uploaderspan>/0.1.0/<span style="color:rgb(98 189 255)">Uploaderspan>.<span style="color:rgb(255 111 119)">swfspan>',
	    <span style="color:rgb(73 238 255)">autospan>: false,  
	    // 文件接收服务端。
	    <span style="color:rgb(255 211 0)">serverspan>:'<span style="color:rgb(73 238 255)">httpspan>://<span style="color:rgb(255 111 119)">127span>.0.0.1:8020/upFile/<span style="color:rgb(253 97 106)"><span style="color:rgb(73 238 255)">filespan>_upspan>.html',	<span>//在做这个demo的时候，并没有服务器地址，我使用的是HBuilder自带的浏览器打开文件，复制urlspan>
	    // 选择文件的按钮。可选。
	    // 内部根据当前运行是创建，可能是input元素，也可能是<span style="color:rgb(255 95 0)">flashspan>.
	    <span style="color:rgb(73 238 255)">pickspan>: '#<span style="color:rgb(73 238 255)">pickspan>er',	
	    // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
	    <span style="color:rgb(255 211 0)">resizespan>: false,	    
            <span style="color:rgb(255 211 0)">methodspan>:'POST',  
	});
	 
// 上传队列，仅包括等待上传的文件
     var <span style="color:rgb(255 211 0)">_queuespan> = [];

// 存储所有文件
     var _map = {};

// 当有文件被添加进队列的时候
    <span style="color:rgb(98 189 255)">uploaderspan>.on( '<span style="color:rgb(73 238 255)">filespan>Queued', function( <span style="color:rgb(73 238 255)">filespan> ) {       
	var that_<span style="color:rgb(73 238 255)">filespan>=<span style="color:rgb(73 238 255)">filespan>;
	<span style="color:rgb(255 211 0)">_queuespan>.push(<span style="color:rgb(73 238 255)">filespan>);
	draw_page(<span style="color:rgb(255 211 0)">_queuespan>);	    
    });
		 
   //绘制页面
    function draw_page(<span style="color:rgb(255 211 0)">_queuespan>){
    	$<span style="color:rgb(73 238 255)"><span style="color:rgb(144 255 173)">lispan>stspan>=$("#my_<span style="color:rgb(73 238 255)"><span style="color:rgb(144 255 173)">lispan>stspan>");
    	$<span style="color:rgb(73 238 255)"><span style="color:rgb(144 255 173)">lispan>stspan>.html("");
    	<span style="color:rgb(253 97 106)">consolespan>.log($<span style="color:rgb(73 238 255)"><span style="color:rgb(144 255 173)">lispan>stspan>.html());
		for(var i=0;i<<span style="color:rgb(255 211 0)">_queuespan>.length;i++){
			  $<span style="color:rgb(73 238 255)"><span style="color:rgb(144 255 173)">lispan>stspan>.append( '<<span style="color:rgb(255 111 119)">divspan> >' +
	        '<<span style="color:rgb(144 255 173)">h4span> class="<span style="color:rgb(73 238 255)">infospan>">' + <span style="color:rgb(255 211 0)">_queuespan>[i].name + 
	          '<span ' + 'onc<span style="color:rgb(144 255 173)">lispan>ck=deleteMy<span style="color:rgb(73 238 255)">filespan>('+<span style="color:rgb(255 211 0)">_queuespan>[i].<span style="color:rgb(144 255 173)">idspan>+')'+ '> 取消上传</span>'
	        +'</<span style="color:rgb(144 255 173)">h4span>>' +
	    	'</<span style="color:rgb(255 111 119)">divspan>>' );	
		}	
    }
	
    //点击开始上传文件
        $("#ctlBtn").on("c<span style="color:rgb(144 255 173)">lispan>ck",function(){
	   <span style="color:rgb(98 189 255)">uploaderspan>.upload(); 	
	});
	    	    
    //点击“取消”按钮，调用事件
	function deleteMy<span style="color:rgb(73 238 255)">filespan>(myFile_<span style="color:rgb(144 255 173)">idspan>){
		   <span style="color:rgb(253 97 106)">consolespan>.log(myFile_<span style="color:rgb(144 255 173)">idspan>);
		  //点击取消，删除dom节点刷新界面
	 	 //   $(myFile_<span style="color:rgb(144 255 173)">idspan>).remove();
	 	   
	 	   var tar_<span style="color:rgb(144 255 173)">idspan>= $(myFile_<span style="color:rgb(144 255 173)">idspan>).attr("<span style="color:rgb(144 255 173)">idspan>");
	 	   $.each(<span style="color:rgb(255 211 0)">_queuespan>,function(k,v){
	 	    	if(<span style="color:rgb(255 211 0)">_queuespan>[k].<span style="color:rgb(144 255 173)">idspan>==tar_<span style="color:rgb(144 255 173)">idspan>){
	 	    		var myFile=<span style="color:rgb(255 211 0)">_queuespan>[k];
	 	    		<span style="color:rgb(98 189 255)">uploaderspan>.removeFile(myFile,true);		
	 	    	}	
	 	    	//return false;
	 	   });		 
	}
	//文件删除的详细方式
	function _delFile (<span style="color:rgb(73 238 255)">filespan>){
	    for(var i = <span style="color:rgb(255 211 0)">_queuespan>.length - 1 ; i >= 0 ; i-- ){
	        if(<span style="color:rgb(255 211 0)">_queuespan>[i].<span style="color:rgb(144 255 173)">idspan>== <span style="color:rgb(73 238 255)">filespan>.<span style="color:rgb(144 255 173)">idspan>){
	             <span style="color:rgb(255 211 0)">_queuespan>.sp<span style="color:rgb(144 255 173)">lispan>ce(i,1); 
	            break;
	        }
	    }
	   //重新绘制界面
		draw_page(<span style="color:rgb(255 211 0)">_queuespan>); 	    
	};
	
	//档文件被移除队列de时候
	<span style="color:rgb(98 189 255)">uploaderspan>.on("<span style="color:rgb(73 238 255)">filespan>Dequeued",function(<span style="color:rgb(73 238 255)">filespan>){
		_delFile (<span style="color:rgb(73 238 255)">filespan>);
	});
	
	// 文件上传过程中创建进度条实时显示。
	<span style="color:rgb(98 189 255)">uploaderspan>.on( 'uploadProgress', function( <span style="color:rgb(73 238 255)">filespan>, <span style="color:rgb(253 97 106)">percentspan>age ) {
		alert("uploadProgress--文件正在上传");
	    var $<span style="color:rgb(144 255 173)">lispan> = $( '#'+<span style="color:rgb(73 238 255)">filespan>.<span style="color:rgb(144 255 173)">idspan> ),
	        $<span style="color:rgb(253 97 106)">percentspan> = $<span style="color:rgb(144 255 173)">lispan>.find('.progress .<span style="color:rgb(98 189 255)">progress-barspan>');
	        
	    // 避免重复创建
	    if ( !$<span style="color:rgb(253 97 106)">percentspan>.length ) {
	        $<span style="color:rgb(253 97 106)">percentspan> = $('<<span style="color:rgb(255 111 119)">divspan> class="progress progress-striped active">' +
	          '<<span style="color:rgb(255 111 119)">divspan> class="<span style="color:rgb(98 189 255)">progress-barspan>" role="<span style="color:rgb(98 189 255)">progressbarspan>" style="<span style="color:rgb(255 95 0)">w<span style="color:rgb(144 255 173)">idspan>thspan>: 0%">' +
	          '</<span style="color:rgb(255 111 119)">divspan>>' +
	        '</<span style="color:rgb(255 111 119)">divspan>>').appendTo( $<span style="color:rgb(144 255 173)">lispan> ).find('.<span style="color:rgb(98 189 255)">progress-barspan>');
	    }
	
	    $<span style="color:rgb(144 255 173)">lispan>.find('p.state').text('上传中');	
	    $<span style="color:rgb(253 97 106)">percentspan>.css( '<span style="color:rgb(255 95 0)">w<span style="color:rgb(144 255 173)">idspan>thspan>', <span style="color:rgb(253 97 106)">percentspan>age * 100 + '%' );
	});
	
	//开始上传
	<span style="color:rgb(98 189 255)">uploaderspan>.on('startUpload',function(<span style="color:rgb(73 238 255)">filespan>){
		  alert("文件开始上传了------startUpload");	
	});
	
	<span style="color:rgb(98 189 255)">uploaderspan>.on( 'uploadSuccess', function( <span style="color:rgb(73 238 255)">filespan> ) {
    	$( '#'+<span style="color:rgb(73 238 255)">filespan>.<span style="color:rgb(144 255 173)">idspan> ).find('p.state').text('已上传');
	});

	<span style="color:rgb(98 189 255)">uploaderspan>.on( 'uploadError', function( <span style="color:rgb(73 238 255)">filespan> ) {
	    $( '#'+<span style="color:rgb(73 238 255)">filespan>.<span style="color:rgb(144 255 173)">idspan> ).find('p.state').text('上传出错');
	});

	<span style="color:rgb(98 189 255)">uploaderspan>.on( 'uploadComplete', function( <span style="color:rgb(73 238 255)">filespan> ) {
	    $( '#'+<span style="color:rgb(73 238 255)">filespan>.<span style="color:rgb(144 255 173)">idspan> ).find('.progress').fadeOut();
	});
</<span style="color:rgb(255 211 0)">scriptspan>>

参考文章：http://blog.ncmem.com/wordpress/2023/09/14/%e5%88%86%e4%ba%ab%e7%99%be%e5%ba%a6%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%e7%bb%84%e4%bb%b6webuploader%e7%9a%84%e4%bd%bf%e7%94%a8demo/
欢迎入群一起讨论

在这里插入图片描述

M_Snow
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
百度多文件上传组件webuploader示例for java
08-18
本示例使用百度 webuploader组件实现前端多文件上传界面，后台使用servlet实现文件接收和保存。
百度开源webuploader文件上传组件ASP.NET\DOTNET\C#.NET的DEMO案例
01-21
百度baidu前端开发组开源项目webuploader，旨在为开发者免费提供开源的文件上传组件，但baidu提供出来的demo只有php版本，本实例为ASP.NET\DOTNET\C#.NET的DEMO，专门为大家提供分享！
webUploader上传demo
热门推荐
WiFi_Uncle的专栏
04-17 5万+
（若工程中，是上传文件到阿里云OSS中，可以去看这篇 http://blog.csdn.net/wx11408115/article/details/78844051） 最近，要做文件上传功能，在同事推荐下，选择了webUploader插件。WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件，详情请看官...
webUploader文件上传示例demo，配置前后端可以本地调试。
一键写代码的博客
10-27 1300
需求描述：使用html5的api完成大文件的上传。 调研结论： 可以选择webUploader 和simple-uploader 。 前者是百度出品。start很多。 两者都可以。本需求采用WebUploader。 1、部署上传的后台服务。 有时候受限，需要先跑起来。官方的后台接口是php代码。所有我们需要部署一个php的跑起来。 这里，我们为了快速部署，装依赖。直接使用快速工具。 参考文章：用XAMPP搭建本地PHP服务器，运行php文件 https://blog.csdn.net/web_xyk
百度WebUploader中实现文件上传下载的三种解决方案(推荐)
Mr_Zang666的博客
05-24 1913
文件上传是一个老生常谈的话题了，在文件相对比较小的情况下，可以直接把文件转化为字节流上传到服务器，但在文件比较大的情况下，用普通的方式进行上传，这可不是一个好的办法，毕竟很少有人会忍受，当文件上传到一半中断后，继续上传却只能重头开始上传，这种让人不爽的体验。断点续传是在下载或上传时，将下载或上传任务（一个文件或一个压缩包）人为的划分为几个部分，每一个部分采用一个线程进行上传或下载，如果碰到网络故障，可以从已经上传或下载的部分开始继续上传或者下载未完成的部分，而没有必要从头开始上传或者下载。
大文件分片上传-百度webuploader
qq_20741133的博客
06-20 805
大文件分片上传，文件秒传，百度webuploader
百度WebUploader大文件分片上传/多线程上传
Mr_Zang666的博客
06-08 291
对于大文件的处理，无论是用户端还是服务端，如果一次性进行读取发送、接收都是不可取，很容易导致内存问题。所以对于大文件上传，采用切块分段上传，从上传的效率来看，利用多线程并发上传能够达到最大效率。本文是基于 springboot + vue 实现的文件上传，本文主要介绍服务端实现文件上传的步骤及代码实现，vue的实现步骤及实现请移步本人的另一篇文章。
webuploader上传php实例示例demo
10-16
在网上找了一个，自己重新组合了下，两个主要的文件，再加上官方下载的文件。其中有几个重要的点。 1.上传存放视频目录为了测试 直接777 2.fileupload.php 给执行权限 3.finfo_open 需要php环境支持二进制，我用的...
百度上传控件Demo(WebUploader)及API文档
08-24
百度WebUploader是一款强大的前端文件上传组件，它提供了一套完整的解决方案，包括文件选择、文件预览、上传进度显示、多文件上传、断点续传等功能。在本文中，我们将深入探讨WebUploader的核心特性、API用法以及...
WebUploader+SpringMVC实现文件上传功能
08-30
WebUploader是百度团队开发的一款强大的文件上传组件，它支持HTML5和Flash两种技术，确保在各种浏览器环境下都能正常工作，包括兼容IE6+、iOS 6+以及Android 4+。该组件的一大特色是它的分片并发上传功能，能够极大...
前端webuploader文件上传实现demo
01-02
前端webuploader文件上传，支持多文件上传，分片存储，代码注释详细，适用于新手入门
webUploader Demo源码下载
04-17
【webUploader】是一个强大的前端文件上传组件，由百度公司开发并开源。这个组件的主要功能是为Web应用提供灵活、高效且具有多种定制可能性的文件上传功能。它支持多文件选择、断点续传、预览、进度显示以及各种错误...
Springboot+百度的WebUploader组件实现普通文件的批量上传
Mr_Zang666的博客
09-01 285
WebUploader与其他上传组件相比最突出的功能特性就是可以实现大文件的分片上传，将一个大文件分割成多块，并发上传，极大地提高大文件的上传速度。sendAsBinary {Object} [可选] [默认值：false] 是否已二进制的流的方式发送文件，这样整个上传内容php://input都为文件内容， 其他参数在$_GET数组中。disableGlobalDnd {Selector} [可选] [默认值：false] 是否禁掉整个页面的拖拽功能，如果不禁用，图片拖进来的时候会默认被浏览器打开。
百度WebUploader实现大文件上传
Mr_Zang666的博客
08-18 302
大致实现原理：当enctype的值是multipart/form-data时，浏览器会把每个表单项进行分割，分割成不同的部件，以boundary的值为分割标识，这个标识的字符串是随机生成的，最后一个表单项的分割标识字符串末尾会多两个”- -“，代表结束。支持大文件的上传和续传，要求续传支持所有浏览器，包括ie6,ie7,ie8,ie9,Chrome,Firefox,360安全浏览器，并且刷新浏览器后仍然能够续传，重启浏览器（关闭浏览器后再打开）仍然能够继续上传，重启电脑后仍然能够上传。
百度开源上传组件webuploader
weixin_45525177的博客
09-11 201
/上传多文件// 选完文件后，是否自动上传。// swf文件路径// 文件接收服务端。// 选择文件的按钮。可选。// 内部根据当前运行是创建，可能是input元素，也可能是flash.// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！});// 当有文件被添加进队列的时候else用来存放文件信息选择文件。
文件上传功能Demo
陆地神仙逍遥游
06-24 175
文件上传功能Demo 控制层代码 @RequestMapping("/upload") public ReturnValue uploadFileTest(@RequestParam("uploadFile") MultipartFile zipFile) { return subFundValuationService.uploadFileTest(zipFile); } /* MultipartFile 类 */ 服务层代码 ReturnValue u
探索WebUploaderDemo：一个高效、易用的前端文件上传解决方案
最新发布
gitblog_00062的博客
03-30 303
探索WebUploaderDemo：一个高效、易用的前端文件上传解决方案 项目地址:https://gitcode.com/kazaff/webuploaderDemo WebUploaderDemo 是一个基于JavaScript编写的前端文件上传组件，旨在提供简单、强大且灵活的文件上传体验。它利用HTML5的技术特性，实现了多文件选择、预览、进度显示等功能，并对旧版浏览器提供了良好的兼容性。 ...
JavaWeb——文件上传与下载
weixin_45525177的博客
12-12 226
参考文章：http://blog.ncmem.com/wordpress/2023/12/12/javaweb-%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%e4%b8%8e%e4%b8%8b%e8%bd%bd/Boolean isFormField() 方法：判断当前这个表单项，是普通表单项（true），还是上传文件的表单项（false）对文件而言就是文件）（1）要有一个 form 表单，请求方式为 post 请求（因为上传的文件一般都超出长度限制）。
百度上传组件web uploader介绍+快速入门案例
Creabine的博客
03-25 2万+
百度上传组件web uploader入门公司的项目需要文件上传的功能，之前使用的是SWFUpload这个上传组件，我将其替换成了web uploader。 SWFUpload组件SWFUpload 最初是Vinterwebb.se 开发的客户端文件上传工具。它联合javascript和flash，在浏览器中提供一个优于传统上传标签 的功能（和良好的用户体验）。SWFUpload 的主要特性:文件浏
使用java写一个文件上传的demo
07-12
以下是一个使用Java编写的文件上传的示例代码： ```java import java.io.File; import java.io.IOException; import java.io.InputStream; import java.nio.file.Files; import java.nio.file.StandardCopyOption; import javax.servlet.ServletException; import javax.servlet.annotation.MultipartConfig; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.Part; @WebServlet("/upload") @MultipartConfig public class FileUploadServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 获取上传文件的表单字段 Part filePart = request.getPart("file"); // 获取上传文件的名称 String fileName = getSubmittedFileName(filePart); // 获取服务器上保存文件的目录 String uploadDir = getServletContext().getRealPath("/uploads"); // 创建上传文件的保存路径 File savePath = new File(uploadDir); if (!savePath.exists()) { savePath.mkdirs(); } // 将上传文件保存到服务器 File uploadedFile = new File(savePath, fileName); try (InputStream fileContent = filePart.getInputStream()) { Files.copy(fileContent, uploadedFile.toPath(), StandardCopyOption.REPLACE_EXISTING); } response.getWriter().println("文件上传成功！"); } private String getSubmittedFileName(Part part) { String header = part.getHeader("content-disposition"); for (String content : header.split(";")) { if (content.trim().startsWith("filename")) { return content.substring(content.indexOf('=') + 1).trim().replace("\"", ""); } } return null; } } ``` 这个示例使用了Servlet的`@MultipartConfig`注解来支持文件上传，通过`request.getPart("file")`获取上传文件的表单字段，然后使用`Files.copy()`将文件保存到服务器指定的目录中。 请注意，这只是一个简单的文件上传示例，你可能需要根据自己的具体需求进行修改和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值