react实现上传文件进度条功能_js上传文件(可自定义进度条)
//本地上传图片、语音
function rsc_UploadFile(file) {var mypic = file.files[0];//创建一个FormData空对象,然后使用append方法添加key/value
var fd = newFormData();
fd.append("myhead", mypic);//上传图片
if (resourceManager.currentRscType==1)
fd.append("action", "uploadImg");//上传语音
else if (resourceManager.currentRscType==3)
fd.append("action", "uploadVic");//上传视频
else if (resourceManager.currentRscType == 5)
fd.append("action", "uploadVdo");if (resourceManager.currentRscType == 1 || resourceManager.currentRscType == 3)
$("#resourceManagerUploadContent").css("height", "330px");else if (resourceManager.currentRscType == 5)
$("#resourceManagerUploadContent").css("height", "420px");
$("#upRscProcessBar").css("display","block");
$("#upSelectFileBtn").attr("disabled", "disabled");
var xhr = newXMLHttpRequest();
xhr.onreadystatechange=function () {if (xhr.readyState == 4 && xhr.status == 200) {var data =JSON.parse(xhr.responseText);//如果上传图片成功,则保存
if (data.returnValue == 0) {var url = '';var sData = '';//上传图片
if (resourceManager.currentRscType == 1) {
url= GetHost() +data.returnData.tmpImgUrl;
sData = Base.encode('{"action":"saveImg","iu":"' + url + '"}');
}//上传语音
else if (resourceManager.currentRscType == 3) {
url= GetHost() +data.returnData.vicUrl;var duration =data.returnData.duration;
sData = Base.encode('{"action":"saveVic","vu":"' + url + '","dt":"' + duration + '"}');
}else if (resourceManager.currentRscType == 5) {
url= GetHost() +data.returnData.vdoUrl;var duration =data.returnData.duration;var frontCover = GetHost() +data.returnData.tmpImgUrl;
var sData = Base.encode('{"action":"saveVdo","vu":"' + url + '","fc":"' + frontCover + '","dt":"' + duration + '"}');
}
$.ajax({
type:'POST',
url: GetHost()+ 'tyadmin/Resource/index.ashx',
data: sData,
dataType:'json',
contentType:'application/json',
success: function (data) {if(data) {if (data.returnValue == 0) {//自动点击当前选中的资源组并加载图片
if (group && group > 0 && resourceManager.groups && resourceManager.groups.length > 0) {try{
resourceManager.isLocalUpload= true;
$("#resourceGroup_" +group).click();
}catch(e) { console.log(e); }
}//关闭图片上传窗体
closeUploadWin();
}elsealert(data.returnMsg);
}else{if (resourceManager.currentRscType == 1)
alert("图片上传失败,请重试!");else if (resourceManager.currentRscType == 3)
alert("语音上传失败,请重试!");else if (resourceManager.currentRscType == 5)
alert("视频上传失败,请重试!");
}
$("#rscUpload").val("");
},
error: function (msg) {
alert(msg.responseText);
}
});
}elsealert(data.returnMsg);
$("#upSelectFileBtn").removeAttr("disabled");
}
}//侦查当前附件上传情况
xhr.upload.onprogress =function (evt) {//侦查附件上传情况//通过事件对象侦查//该匿名函数表达式大概0.1秒执行一次
var loaded = evt.loaded;//已经上传大小情况
var tot = evt.total;//附件总大小
var per = Math.floor(100 * loaded / tot); //已经上传的百分比
try{//如果点击 返回 按钮,则中断文件的传输
if(_isRSCXMLHttpAbort) {
xhr.abort();
}//百分比
var txtProgress = $("#txtProgress");
txtProgress.html(per+ "%");//进度条
$(".upRscProcessContent").css("width", per + "%");
}catch(e) { }
}
xhr.open("post", GetHost() + 'tyadmin/Resource/index.ashx');
xhr.send(fd);
}
react实现上传文件进度条功能_js上传文件(可自定义进度条)相关推荐
- QQ语音进度条功能怎么用?附qq语音进度条使用方法
摘要: 手机QQ迎来了最新版本8.0.0. 手机QQ迎来了最新版本8.0.0.其中新增的一个功能就是QQ语音进度条功能,非常的便捷实用.而qq语音进度条功能怎么用呢?跟着小编一起详细了解. QQ语音 ...
- springboot文件上传下载实战 —— 登录功能、展示所有文件
springboot文件上传下载实战 创建项目 pom.xml 数据库建表与环境准备 建表SQL 配置文件 application.properties 整体架构 前端页面 登录页面 login.ht ...
- python编写代码实现文件的拷贝功能_python从一个文件夹自动拷贝文件到目标文件夹的代码...
这里为大家提供一个python操作文件的例子,实现功能:从一个文件夹自动拷贝文件到目标文件夹. 供python爱好者学习参考. 代码如下: # Filename: CopyPictures.py im ...
- tinyxml 读取文本节点_【C++】【TinyXml】xml文件的读写功能使用——写xml文件
TinyXml工具是常用比较简单的C++中xml读写的工具 需要加载 #include "TinyXml\tinyxml.h" 在TinyXML中,根据XML的各种元素来定义了一些 ...
- 【C++】【TinyXml】xml文件的读写功能使用——写xml文件
TinyXml工具是常用比较简单的C++中xml读写的工具 需要加载 #include "TinyXml\tinyxml.h" 在TinyXML中,根据XML的各种元素来定义了一些 ...
- 网络编程学习(11)/ FTP项目(5) ——文件上传和上传断点续存功能
网络编程学习(11)/ FTP项目(5) --文件上传和上传断点续存功能 `服务端 lib 文件夹下的 main.py 状态码的变化` 文件上传功能 `服务端 lib 文件夹下的 main.py` ` ...
- vue 文件及描述信息一起上传_用Vue实现一个大文件上传和断点续传
前言 这段时间面试官都挺忙的,频频出现在博客文章标题,虽然我不是特别想蹭热度,但是实在想不到好的标题了-.-,蹭蹭就蹭蹭 :) 事实上我在面试的时候确实被问到了这个问题,而且是一道在线 coding ...
- 如何用HTML语言设计进度条,html5代码如何实现进度条功能?(示例)
本篇文章主要介绍html5代码如何实现进度条功能,希望对大家有所帮助. html5代码实现进度条功能具体代码示例如下:/*实现进度条的功能*/ 下载进度: /*js代码*/ var pg=docume ...
- 计算机复制文件的功能,Radmin复制文件和DeltaCopy功能
Radmin复制文件和DeltaCopy功能 2年 复制文件或者文件夹 使用远程工具Radmin复制文件或者文件夹,请参照如下的操作: 按一下 复制' 工具列图标. 拖放被选的文件/或文件夹到任何文件 ...
- QT自定义进度条-画圆盘
目录 QT自定义进度条-画圆盘 六等分圆盘 QT自定义进度条-画圆盘 六等分圆盘 void PaintWidget::paintEvent(QPaintEvent *e) {QPainter pain ...
最新文章
- [源码和文档分享]基于Netty和WebSocket的Web聊天室
- 【小知识】为什么负数除二和右移一位的结果不一样?
- 前NASA工程师让钢琴开口说英文,还能自弹世界上最难曲目,快到冒烟
- 我理解的--java观察者模式
- Python 技术篇-使用time库获取秒级时间戳、毫秒级时间戳实例演示
- vue 发送ajax请求
- 草稿 ktv 航版 1211 rs ga 打开文件控件 文件的复制操作
- 帐户当前被锁定,所以用户 sa 登录失败。系统管理员无法将该帐户解锁 解决方法...
- 【Oracle】ORA-00054: resource busy and acquire with NOWAIT specified or timeout expired
- 安徽大学线性代数第二章习题册(详细解答)
- 关于C2100间接寻址的问题
- selenium自动化中停止页面加载
- Linq 语法的一系列问题,菜鸟求解。
- android studio 报错 AAPT: error: style attribute ‘attr/colorPrimary (aka com.
- 那一只蝴蝶飞不过沧海
- win10下使用Linux(ubuntu18.04)
- Mysql条件计数查询
- iOS渐变视图动画库、腰杆、音频水滴水波手势、多种对话框、四级展开效果等源码
- c语言 自动生成word文件,C#根据Word模版生成Word文件
- 达内python培训班靠谱吗
热门文章
- spark mlib系列2
- 用Python分析1585家电商车厘子销售数据,发现这些秘密
- 69 MyBatis和Spring整合
- java 串行_java串行化
- 什么是软件项目验收,软件项目验收测试方法分享
- kindle paper white部分优化
- 电脑c盘格式化,如何恢复C盘文件?
- 圆形谷仓Circular Barn_Silver---(DP优化 / )队列 + 贪心(复杂度O(2n))---DD(XYX)​​​​​​​的博客
- 太完美 TWM000极度精简版XP20130123终结美化版
- 织梦主要文件夹目录及模板文件说明