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上传文件的更多相关文章

  1. 解决Web Uploader上传文件和图片 延迟和not defined

    1.出现list not define时,var $list = $("#fileList"); 2.选择文件框有延迟,可能是因为选择文件类型过多 mimeTypes: 'imag ...

  2. 演示如何通过 web api 上传文件MVC40

    演示如何通过 web api 上传文件WebApiWebFormHost/UploadFileController.cs /* * 通过 web api 上传文件 */ using System; u ...

  3. 返璞归真 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 上传文件, ...

  4. 数据採集之Web端上传文件到Hadoop HDFS

    前言 近期在公司接到一个任务.是关于数据採集方面的. 需求主要有3个: 通过web端上传文件到HDFS; 通过日志採集的方式导入到HDFS; 将数据库DB的表数据导入到HDFS. 正好近期都有在这方面 ...

  5. web uploader 上传大文件总结

    这里只写后端的代码,基本的思想就是,前端将文件分片,然后每次访问上传接口的时候,向后端传入参数:当前为第几块文件,和分片总数 下面直接贴代码吧,一些难懂的我大部分都加上注释了: 上传文件实体类: 看得 ...

  6. 封装Web Uploader 上传插件、My97DatePicker、百度 编辑器 的使用 (ASP.NET MVC)

    Web Uploader: WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优 ...

  7. app端上传文件至服务器后台,web端上传文件存储到服务器

    1.android前端发送服务器请求 在spring-mvc.xml 将过滤屏蔽(如果不屏蔽 ,文件流为空) <!-- <bean id="multipartResolver&q ...

  8. C# Web Api 上传文件

    一. 使用默认方法上传文件: 1.Action: /// <summary> /// 上传文件 使用上传后的默认文件名称 /// 默认名称是BodyPart_XXXXXX,BodyPart ...

  9. 前端AngularJS后端ASP.NET Web API上传文件

    本篇体验使用AngularJS向后端ASP.NET API控制器上传文件.    首先服务端: public class FilesController : ApiController { //usi ...

  10. web前端:上传文件夹(需支持多浏览器)

    在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 先说下要求: PC端全平台支持,要求支持Windows,Mac,Linux 支持所 ...

随机推荐

  1. git -----已经被跟踪文件如何在本地提交时忽略

    git update-index --assume-unchanged C.md 注:忽略后将不再拉取和提交c.md这个文件 git update-index --no-assume-unchange ...

  2. iOS组件化 pod命令创建私有库详解【引用其他私有库、oc、Swift混编】

    1.命令创建pod pod lib create pod的名字 2.根据指令依次填写信息 3.填写完成后会自动打开项目 .然后修改podspec文件即可 4.创建当前pod的git 仓库.将当前代码放 ...

  3. python日志logging配置

    python日志logging配置 为了方便ELK收集日志,将日志打印成json格式 开发过程中,使用json格式不方便排查问题 本文章使用python的logging模块,一步步增加配置,来说明每个 ...

  4. unity 扇形范围检测目标

    第一种 代码方法 传入目标点测试即可 private float ScopeDistance = 2f;//扇形距离 private float ScopeJiaodu = 120;//扇形的角度 / ...

  5. PHP的session文件包含与竞争

    PHP的session文件包含与竞争 lamaper@qq.com lamaper - 博客园 (cnblogs.com) 一.什么是Session Session:在计算机中,尤其是在网络应用中,称 ...

  6. 20203412马畅若 实验三 《Python程序设计》Socket编程技术实验报告

    实验三 Socket编程技术 课程:<Python程序设计>班级: 2034姓名: 马畅若学号:20203412实验教师:王志强实验日期:2020年5月30日必修/选修: 公选课 ##1. ...

  7. uni-app学习笔记之----不同平台,独立设置

    (不断补充中...) 1.导航栏 2.条件编译 不同的条件标记,会被编译到不同的平台 开头:[#ifdef]或[#ifndef] + 平台名称 结尾:[#endif] html中: js中: css中 ...

  8. mqtt抓包

      mqtt消息抓包 账号.密码.imappclientId 或者imwebclientId校验成功后跟imserver连接成功 部分交互:先获取到uid,再根据uid拿到其他用户信息,且部分信息通过 ...

  9. 《基于Linux平台实现定时器功能》

    1.demo static void sigHandFun(int signum) { struct itimerval itv; itv.it_interval.tv_sec = 5; itv.it ...

  10. 根据两点经纬度计算两点间距离 js

    getDistance(lat1, lng1, lat2, lng2) { let radLat1 = lat1 * Math.PI / 180.0; let radLat2 = lat2 * Mat ...