WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。官方地址:http://fex.baidu.com/webuploader/

1. 引入资源

使用Web Uploader文件上传需要引入三种资源:JS, CSS, SWF。

<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css"> <!--引入JS-->
<script type="text/javascript" src="webuploader文件夹/webuploader.js"></script> <!--SWF在初始化的时候指定,在后面将展示-->

WebUploader只包含文件上传的底层实现,不包括UI部分。所以交互方面可以自由发挥,以下将演示如何去实现一个简单的版本。

2.Html部分

首先准备dom结构,包含存放文件信息的容器、选择按钮和上传按钮三个部分。

<link href="~/Scripts/webuploader-0.1.5/webuploader.css" rel="stylesheet" />

<script src="~/Scripts/jquery-2.1.4.js"></script>

<script src="~/Scripts/webuploader-0.1.5/webuploader.js"></script>
<script type="text/javascript">
// 文件上传
jQuery(function () {
var $ = jQuery,
$list = $('#thelist'),
$btn = $('#ctlBtn'),
state = 'pending',
BASE_URL = '~/Scripts/webuploader-0.1.5/',
uploader; uploader = WebUploader.create({ // 不压缩image
resize: false, // swf文件路径
swf: BASE_URL + 'Uploader.swf', // 文件接收服务端。
server: '@Url.Action("WebUploaderSave")', // 选择文件的按钮。可选。
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick: '#picker'
}); // 当有文件添加进来的时候
uploader.on('fileQueued', function (file) {
$list.append('<div id="' + file.id + '" class="item">' +
'<h4 class="info">' + file.name + '</h4>' +
'<p class="state">等待上传...</p>' +
'</div>');
}); // 文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress', function (file, percentage) {
var $li = $('#' + file.id),
$percent = $li.find('.progress .progress-bar'); // 避免重复创建
if (!$percent.length) {
$percent = $('<div class="progress progress-striped active">' +
'<div class="progress-bar" role="progressbar" style="width: 0%">' +
'</div>' +
'</div>').appendTo($li).find('.progress-bar');
} $li.find('p.state').text('上传中'); $percent.css('width', percentage * 100 + '%');
}); uploader.on('uploadSuccess', function (file,result) {
$('#' + file.id).find('p.state').text('已上传');
}); uploader.on('uploadError', function (file, code) {
$('#' + file.id).find('p.state').text('上传出错');
}); uploader.on('all', function (type) {
if (type === 'startUpload') {
state = 'uploading';
} else if (type === 'stopUpload') {
state = 'paused';
} else if (type === 'uploadFinished') {
state = 'done';
} if (state === 'uploading') {
$btn.text('暂停上传');
} else {
$btn.text('开始上传');
}
}); $btn.on('click', function () {
if (state === 'uploading') {
uploader.stop();
} else {
uploader.upload();
}
});
});
</script> <h2>Index</h2> <div id="uploader" class="wu-example">
<!--用来存放文件信息-->
<div id="thelist" class="uploader-list"></div>
<div class="btns">
<div id="picker">选择文件</div>
<button id="ctlBtn" class="btn btn-default">开始上传</button>
</div>
</div>

3.后台代码

后台代码与语言无关,主要是在后台接受一个名为“file”的数据流文件。这里是使用asp.net mvc模式下接收的:

 public ActionResult WebUploaderSave(HttpPostedFileBase file)
{
if (file == null)
return Content("请选择文件!");
string savePath = Server.MapPath("~/Template/");
file.SaveAs(savePath + file.FileName); return Content("上传成功!");
}

4.完成效果

选择文件:

点击开始上传

webuploader上传文件,图片的更多相关文章

  1. webuploader 上传文件 生成链接下载文件

    最近 在asp.net MVC 项目 需要实现一个Excel和 图片上传功能.之前有使用过SWFUpload 做过上传图片功能,在本次实现过程中,有人推荐WebUploader 上传组件,因此采用we ...

  2. webuploader 上传文件参数设置

    webUploader 是款很好用的优秀的开源上传组件,由百度公司开发,详细的介绍可参见webUploader 的官方文档: 最近在使用webUploader时,需要添加额外的参数,并在后台获取,参数 ...

  3. ASP.NET、JAVA跨服务器远程上传文件(图片)的相关解决方案整合

    一.图片提交例: A端--提交图片 protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { string u ...

  4. PHP socket上传文件图片

    最近了解了下下socket方面的东西,想做一个socket上传文件的例子. 在网上搜了搜代码执行后,图片数据传输了一半,图片的下半部分是灰色的.然后就自己仿着搜来的代码和php.net 中socket ...

  5. 基于spring-boot的web应用,ckeditor上传文件图片文件

    说来惭愧,这个应用调试,折腾了我一整天,google了很多帖子,才算整明白,今天在这里做个记录和分享吧,也作为自己后续的参考! 第一步,ckeditor(本博文论及的ckeditor版本4.5.6)的 ...

  6. WebUploader上传文件(一)

    写在前面: 文件上传方式很多的,对于大文件的上传,在本次项目中也有涉及,主要是用了分片断点上传大文件.所以就去了解了一下WebUploader,先从简单的上传文件开始吧~ 在代码中写注释,这样看的比较 ...

  7. webuploader+上传文件夹

    在web项目中上传文件夹现在已经成为了一个主流的需求.在OA,或者企业ERP系统中都有类似的需求.上传文件夹并且保留层级结构能够对用户行成很好的引导,用户使用起来也更方便.能够提供更高级的应用支撑. ...

  8. 通过PHP CURL模拟请求上传文件|图片。

    现在有一个需求就是在自己的服务器上传图片到其他服务器上面,过程:客户端上传图片->存放到本地服务器->再转发到第三方服务器; 由于前端Ajax受限制,只能通过服务器做转发了. 在PHP中通 ...

  9. elementUI 上传文件图片大小加了限制后 仍然上传了

    https://blog.csdn.net/chanlingmai5374/article/details/80558444  看了这位老哥的说法 在看看文档 才发现自己没认真看文档 <el-u ...

  10. 【2】通过Ajax方式上传文件(图片),使用FormData进行Ajax请求

    HTML: <form id= "uploadForm"> <p >指定文件名: <input type="text" name= ...

随机推荐

  1. JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  2. Linux基础介绍【第八篇】

    Linux网络基础 网线 568A 568B 线序:橙白橙 绿白蓝 蓝白绿 棕白棕 交换机.路由器 交换机:DLINK.H3C.CISCO 交换机(Switch)是一种用于电信号转发的网络设备.它可以 ...

  3. C#迪杰斯特拉算法

    C#迪杰斯特拉算法 网上有许多版本的,自己还是写一个理解点 Dijkstra.cs public class Dijkstra { private List<Node> _nodes; p ...

  4. FastClick 填坑及源码解析

    最近产品妹子提出了一个体验issue —— 用 iOS 在手Q阅读书友交流区发表书评时,光标点击总是不好定位到正确的位置: 如上图,具体表现是较快点击时,光标总会跳到 textarea 内容的尾部.只 ...

  5. HTPC家庭娱乐和XBOX未来发展畅想<另:创业工作机会>

    微软中国在上海举办新闻发布会,正式宣布Xbox One将于9月23日在中国开始销售,定价3699元起.这款早在2001年就发布的电视游戏机终于在经历了14年的等待后,进军中国大陆市场.此次Xbox O ...

  6. Direct3D Draw函数 异步调用原理解析

    概述 在D3D10中,一个基本的渲染流程可分为以下步骤: 清理帧缓存: 执行若干次的绘制: 通过Device API创建所需Buffer: 通过Map/Unmap填充数据到Buffer中: 将Buff ...

  7. esayui

  8. Windows操作系统下tomcat安装版图文教程

    下载tomcat安装文件,官方下载地址是:http://tomcat.apache.org/,本文以tomcat-7.0.26版本为例进行安装过程的说明: 1.双击apache-tomcat-7.0. ...

  9. Android之SQLite数据库篇

    一.SQLite简介 Google为Andriod的较大的数据处理提供了SQLite,他在数据存储.管理.维护等各方面都相当出色,功能也非常的强大. 二.SQLite的特点 1.轻量级使用 SQLit ...

  10. Redis之AOF备份

    redis在进行备份的时候有2种方式:1.RDB:2.AOF:现在主要讲哈AOF的备份 1.找到redis.config配置文件,大部分下载下来和redis-service同目录: 2.打开redie ...