Web Uploader上传文件
Web Uploader是百度提供的。
1:下载:http://fex.baidu.com/webuploader/(官方下载/示例)
2:使用Web Uploader文件上传需要引入三种资源:JS, CSS, SWF。
///src值根据文件在项目中的位置而定 <link href="~/Content/webuploader/webuploader.css" rel="stylesheet" /> <script src="~/Content/webuploader/webuploader.js"></script>
<!--SWF在初始化的时候指定,在后面将展示-->
3、html部分:
<div id="uploadWindow" class="container-fluid">
<div class="windowTop" style="border-bottom:1px solid #808080;">
<div id="filePicker" style="width:50%;float:left;padding:5px 3px;">
选择文件
</div>
<button id="ctlBtn" class="button-upload">开始上传</button>
<button id="closeUploadWindow" class="button-upload cl">关闭</button>
</div>
<div class="windowCenter">文件上传示例:</div>
<div class="windowBottom">
<div id="selectedFiles" class="wu-example">
<!--用来存放文件信息-->
<div id="fileList" class="uploader-list"></div>
</div>
</div>
</div>
4、js部分
var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../../";
// 上传初始化
function initUpload() {
//文件上传
var $ = jQuery,
$list = $('#fileList'),
$btn = $('#ctlBtn'),
state = 'pending',
uploader;
uploader = WebUploader.create({
auto: false,// 选完文件后,是否自动上传。
// 不压缩image
resize: false,
// swf文件路径
swf: applicationPath + '~/Content/webuploader/Uploader.swf',
// 文件接收服务端。
server: '/Home/UploadFiles', // 选择文件的按钮。可选。
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick: '#filePicker',
//accept: {
// title: "RFA",
// extensions: "rfa",
// mimeTypes: ".rfa,application/octet-stream",
//},
chunked: true,// 开起分片上传。
threads: 1, // 上传并发数。允许同时最大上传进程数。
method: 'POST', // 文件上传方式,POST或者GET。
//fileSizeLimit: 1024 * 1024 * 100 * 100, //验证文件总大小是否超出限制, 超出则不允许加入队列。
//fileSingleSizeLimit: 1024 * 1024 * 100, //验证单个文件大小是否超出限制, 超出则不允许加入队列。
//fileVal: 'upload', // [默认值:'file'] 设置文件上传域的name。
}); // 当有文件添加进来的时候
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, response) {
$('#' + file.id).find('p.state').text(response.info);
// fileurl = response.data; //上传文件的路径
//
}); uploader.on('uploadError', function (file, response) {
debugger
$('#' + file.id).find('p.state').text('上传出错 ' + response);
}); uploader.on('uploadComplete', function (file, response) {
$('#' + file.id).find('.progress').fadeOut(); });
//当所有文件上传完成时触发
uploader.on('uploadFinished', function () {
这里是一个异步回调函数,对文件的一个处理。后台通过单独开一个线程进行处理。详情看多线程分类里相关文档里
// webuploaderCallBack();
}); 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 () {
var type="010";
var onelevel = $("#onelevel option:selected").attr("id");
var twolevel = $("#twolevel option:selected").attr("id");
var threelevel = $("#threelevel option:selected").attr("id"); if (threelevel != undefined) {
type = threelevel;
}
else {
if (twolevel != undefined) {
type = twolevel;
} else {
if (onelevel != undefined) {
type = onelevel;
}
}
} // 初始化以后添加
uploader.options.formData.filetype = type; if (state === 'uploading') {
uploader.stop();
} else {
uploader.upload();
}
});
///取消上传
$('.uploader-list').on('click', '.btn-remove', function () {
debugger
// 从文件队列中删除某个文件id
file_id = $(this).data('id');
uploader.removeFile(file_id, true); // 从队列中删除
//console.log(uploader.getFiles()) // 队列显示还在 其实已经删除
});
//重试上传,重试指定文件,或者从出错的文件开始重新上传。
$('.uploader-list').on('click', '.upload-item__progress span', function () {
debugger
uploader.retry($(this).data('file'));
});
};
5、常见问题及解决方案:
待写
Web Uploader上传文件的更多相关文章
- 解决Web Uploader上传文件和图片 延迟和not defined
1.出现list not define时,var $list = $("#fileList"); 2.选择文件框有延迟,可能是因为选择文件类型过多 mimeTypes: 'imag ...
- 演示如何通过 web api 上传文件MVC40
演示如何通过 web api 上传文件WebApiWebFormHost/UploadFileController.cs /* * 通过 web api 上传文件 */ using System; u ...
- 返璞归真 asp.net mvc (11) - asp.net mvc 4.0 新特性之自宿主 Web API, 在 WebForm 中提供 Web API, 通过 Web API 上传文件, .net 4.5 带来的更方便的异步操作
原文:返璞归真 asp.net mvc (11) - asp.net mvc 4.0 新特性之自宿主 Web API, 在 WebForm 中提供 Web API, 通过 Web API 上传文件, ...
- 数据採集之Web端上传文件到Hadoop HDFS
前言 近期在公司接到一个任务.是关于数据採集方面的. 需求主要有3个: 通过web端上传文件到HDFS; 通过日志採集的方式导入到HDFS; 将数据库DB的表数据导入到HDFS. 正好近期都有在这方面 ...
- web uploader 上传大文件总结
这里只写后端的代码,基本的思想就是,前端将文件分片,然后每次访问上传接口的时候,向后端传入参数:当前为第几块文件,和分片总数 下面直接贴代码吧,一些难懂的我大部分都加上注释了: 上传文件实体类: 看得 ...
- 封装Web Uploader 上传插件、My97DatePicker、百度 编辑器 的使用 (ASP.NET MVC)
Web Uploader: WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优 ...
- app端上传文件至服务器后台,web端上传文件存储到服务器
1.android前端发送服务器请求 在spring-mvc.xml 将过滤屏蔽(如果不屏蔽 ,文件流为空) <!-- <bean id="multipartResolver&q ...
- C# Web Api 上传文件
一. 使用默认方法上传文件: 1.Action: /// <summary> /// 上传文件 使用上传后的默认文件名称 /// 默认名称是BodyPart_XXXXXX,BodyPart ...
- 前端AngularJS后端ASP.NET Web API上传文件
本篇体验使用AngularJS向后端ASP.NET API控制器上传文件. 首先服务端: public class FilesController : ApiController { //usi ...
- web前端:上传文件夹(需支持多浏览器)
在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 先说下要求: PC端全平台支持,要求支持Windows,Mac,Linux 支持所 ...
随机推荐
- git -----已经被跟踪文件如何在本地提交时忽略
git update-index --assume-unchanged C.md 注:忽略后将不再拉取和提交c.md这个文件 git update-index --no-assume-unchange ...
- iOS组件化 pod命令创建私有库详解【引用其他私有库、oc、Swift混编】
1.命令创建pod pod lib create pod的名字 2.根据指令依次填写信息 3.填写完成后会自动打开项目 .然后修改podspec文件即可 4.创建当前pod的git 仓库.将当前代码放 ...
- python日志logging配置
python日志logging配置 为了方便ELK收集日志,将日志打印成json格式 开发过程中,使用json格式不方便排查问题 本文章使用python的logging模块,一步步增加配置,来说明每个 ...
- unity 扇形范围检测目标
第一种 代码方法 传入目标点测试即可 private float ScopeDistance = 2f;//扇形距离 private float ScopeJiaodu = 120;//扇形的角度 / ...
- PHP的session文件包含与竞争
PHP的session文件包含与竞争 lamaper@qq.com lamaper - 博客园 (cnblogs.com) 一.什么是Session Session:在计算机中,尤其是在网络应用中,称 ...
- 20203412马畅若 实验三 《Python程序设计》Socket编程技术实验报告
实验三 Socket编程技术 课程:<Python程序设计>班级: 2034姓名: 马畅若学号:20203412实验教师:王志强实验日期:2020年5月30日必修/选修: 公选课 ##1. ...
- uni-app学习笔记之----不同平台,独立设置
(不断补充中...) 1.导航栏 2.条件编译 不同的条件标记,会被编译到不同的平台 开头:[#ifdef]或[#ifndef] + 平台名称 结尾:[#endif] html中: js中: css中 ...
- mqtt抓包
mqtt消息抓包 账号.密码.imappclientId 或者imwebclientId校验成功后跟imserver连接成功 部分交互:先获取到uid,再根据uid拿到其他用户信息,且部分信息通过 ...
- 《基于Linux平台实现定时器功能》
1.demo static void sigHandFun(int signum) { struct itimerval itv; itv.it_interval.tv_sec = 5; itv.it ...
- 根据两点经纬度计算两点间距离 js
getDistance(lat1, lng1, lat2, lng2) { let radLat1 = lat1 * Math.PI / 180.0; let radLat2 = lat2 * Mat ...