//本地上传图片、语音

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上传文件(可自定义进度条)相关推荐

  1. QQ语音进度条功能怎么用?附qq语音进度条使用方法

    摘要: 手机QQ迎来了最新版本8.0.0.  手机QQ迎来了最新版本8.0.0.其中新增的一个功能就是QQ语音进度条功能,非常的便捷实用.而qq语音进度条功能怎么用呢?跟着小编一起详细了解. QQ语音 ...

  2. springboot文件上传下载实战 —— 登录功能、展示所有文件

    springboot文件上传下载实战 创建项目 pom.xml 数据库建表与环境准备 建表SQL 配置文件 application.properties 整体架构 前端页面 登录页面 login.ht ...

  3. python编写代码实现文件的拷贝功能_python从一个文件夹自动拷贝文件到目标文件夹的代码...

    这里为大家提供一个python操作文件的例子,实现功能:从一个文件夹自动拷贝文件到目标文件夹. 供python爱好者学习参考. 代码如下: # Filename: CopyPictures.py im ...

  4. tinyxml 读取文本节点_【C++】【TinyXml】xml文件的读写功能使用——写xml文件

    TinyXml工具是常用比较简单的C++中xml读写的工具 需要加载 #include "TinyXml\tinyxml.h" 在TinyXML中,根据XML的各种元素来定义了一些 ...

  5. 【C++】【TinyXml】xml文件的读写功能使用——写xml文件

    TinyXml工具是常用比较简单的C++中xml读写的工具 需要加载 #include "TinyXml\tinyxml.h" 在TinyXML中,根据XML的各种元素来定义了一些 ...

  6. 网络编程学习(11)/ FTP项目(5) ——文件上传和上传断点续存功能

    网络编程学习(11)/ FTP项目(5) --文件上传和上传断点续存功能 `服务端 lib 文件夹下的 main.py 状态码的变化` 文件上传功能 `服务端 lib 文件夹下的 main.py` ` ...

  7. vue 文件及描述信息一起上传_用Vue实现一个大文件上传和断点续传

    前言 这段时间面试官都挺忙的,频频出现在博客文章标题,虽然我不是特别想蹭热度,但是实在想不到好的标题了-.-,蹭蹭就蹭蹭 :) 事实上我在面试的时候确实被问到了这个问题,而且是一道在线 coding ...

  8. 如何用HTML语言设计进度条,html5代码如何实现进度条功能?(示例)

    本篇文章主要介绍html5代码如何实现进度条功能,希望对大家有所帮助. html5代码实现进度条功能具体代码示例如下:/*实现进度条的功能*/ 下载进度: /*js代码*/ var pg=docume ...

  9. 计算机复制文件的功能,Radmin复制文件和DeltaCopy功能

    Radmin复制文件和DeltaCopy功能 2年 复制文件或者文件夹 使用远程工具Radmin复制文件或者文件夹,请参照如下的操作: 按一下 复制' 工具列图标. 拖放被选的文件/或文件夹到任何文件 ...

  10. QT自定义进度条-画圆盘

    目录 QT自定义进度条-画圆盘 六等分圆盘 QT自定义进度条-画圆盘 六等分圆盘 void PaintWidget::paintEvent(QPaintEvent *e) {QPainter pain ...

最新文章

  1. [源码和文档分享]基于Netty和WebSocket的Web聊天室
  2. 【小知识】为什么负数除二和右移一位的结果不一样?
  3. 前NASA工程师让钢琴开口说英文,还能自弹世界上最难曲目,快到冒烟
  4. 我理解的--java观察者模式
  5. Python 技术篇-使用time库获取秒级时间戳、毫秒级时间戳实例演示
  6. vue 发送ajax请求
  7. 草稿 ktv 航版 1211 rs ga 打开文件控件 文件的复制操作
  8. 帐户当前被锁定,所以用户 sa 登录失败。系统管理员无法将该帐户解锁 解决方法...
  9. 【Oracle】ORA-00054: resource busy and acquire with NOWAIT specified or timeout expired
  10. 安徽大学线性代数第二章习题册(详细解答)
  11. 关于C2100间接寻址的问题
  12. selenium自动化中停止页面加载
  13. Linq 语法的一系列问题,菜鸟求解。
  14. android studio 报错 AAPT: error: style attribute ‘attr/colorPrimary (aka com.
  15. 那一只蝴蝶飞不过沧海
  16. win10下使用Linux(ubuntu18.04)
  17. Mysql条件计数查询
  18. iOS渐变视图动画库、腰杆、音频水滴水波手势、多种对话框、四级展开效果等源码
  19. c语言 自动生成word文件,C#根据Word模版生成Word文件
  20. 达内python培训班靠谱吗

热门文章

  1. spark mlib系列2
  2. 用Python分析1585家电商车厘子销售数据,发现这些秘密
  3. 69 MyBatis和Spring整合
  4. java 串行_java串行化
  5. 什么是软件项目验收,软件项目验收测试方法分享
  6. kindle paper white部分优化
  7. 电脑c盘格式化,如何恢复C盘文件?
  8. 圆形谷仓Circular Barn_Silver---(DP优化 / )队列 + 贪心(复杂度O(2n))---DD(XYX)​​​​​​​的博客
  9. 太完美 TWM000极度精简版XP20130123终结美化版
  10. 织梦主要文件夹目录及模板文件说明