h5完美实现无刷新上传并附带上传效果
附带上传源码如下：
<!DOCTYPE html>
<html>
<head>
<title>测试上传功能</title>
<meta charset='utf-8'/>
<style type="text/css">
.vue-file-control{
height:28px;
width:500px;
margin:100px;
}
.inputFileUpload
{
display: block;
position: relative;
width: 120px;
padding:8px 12px;
overflow: hidden;
border: 1px solid #EBEBEB;
background: none repeat scroll 0 0 #F3F3F3;
color: #999999;
cursor: pointer;
text-align: center;
float: left;
margin-right:5px;
border-radius:3px;
}
#textFileName
{
cursor: pointer;
display: block;
height:31px;
width:200px;
text-align: center;
overflow:hidden;
border:1px solid #f1f1f1;
display:inline-block;
border-radius:3px;
}
.btnUpload{
display: inline-block;
padding:8px 10px;
background: #7CBAE9;
color:white;
margin-left:10px;
position:absolute;
cursor: pointer;
border-radius:3px;
}
.filePreview
{
cursor: pointer;
position: absolute;
top: 0;
left:0;
width: 150px;
height: 30px;
font-size: 150px; /* 增大不同浏览器的可点击区域 */
opacity: 0; /* 实现的关键点 */
filter: alpha(opacity=0); /* 兼容IE */
}
.progressBarContainer{
position:relative;
margin-top:10px;
height:8px;
background:#f6f6f6;
border-radius:3px;
width:100%;
}
.progressBarContainer>#loadingBar{
position:absolute;
height:8px;
background:#09bb07;
border-radius:3px;
}
.progressBarContainer>#percentBar{
position:absolute;
margin-top:22px;
}
#linkPreviewPDF{
margin-left: 80px;
margin-top: 15px;
display: none;
}
</style>
<script src='./jquery.js'></script>
</head>
<body>
<div class='vue-file-control'>
<div class="inputFileUpload">
<span>选择上传的文件</span>
<input title="支持pdf文件上传，文件小于5M" class="filePreview" type="file" accept='application/pdf' onchange="document.getElementById('textFileName').value=this.value" single></div>
<input type='text' id="textFileName" />
<span class='btnUpload' >点击上传</span>
<div class='progressBarContainer'>
<div id='loadingBar'></div>
<div id="percentBar"></div>
</div>
<div id='linkPreviewPDF'>
<a href="#" >点击预览</a>
</div>
</div>
<script type="text/javascript">
$(".btnUpload").on("click",function(){
var file = $('input[type=file]')[0].files[0];
var form = new FormData();
form.append("file_type", "pdf");
form.append("subpath", "//sub//test");
form.append("upload_userid", "1");
form.append("file_original_name", file.name);
form.append("file", file); $.ajax({
url: 'http://192.168.217.12/files/api/uploadfile',
type: 'POST',
data: form,
processData: false,
contentType: false,
xhr: function() {
var xhr = $.ajaxSettings.xhr();
if (xhr.upload) {
//上传进度操作
xhr.upload.addEventListener('progress', function(e) {
var percentCount = ((e.loaded/e.total)*100).toFixed(0);
$('#loadingBar').css({"width":percentCount+"%"});
if(percentCount==100){
$("#percentBar").html("已完成");
}else{
$("#percentBar").html(percentCount+"%");
}
}, false);
}
return xhr;
}
}).done(function(res){
console.log("上传成功");
$("div#linkPreviewPDF").find("a").attr("href","http://192.168.217.12"+res.returnObj.url).end().show();
}).fail(function(err){
console.log("上传失败");
});
}) </script>
</body>
</html>
［图1］: 上传中。。。。。
［图2］：上传完成
［图3］：上传预览
h5完美实现无刷新上传并附带上传效果的更多相关文章
- 基于h5的图片无刷新上传(uploadifive)
基于h5的图片无刷新上传(uploadifive) uploadifive简介 了解uploadify之前,首先了解来一下什么是uploadify,uploadfy官网,uploadify和uploa ...
- PushState+Ajax 完美实现无刷新
转载自:http://lazynight.me/1897.html 折腾一下PJAX,利用HTML5的新API,实现历史记录的完美导入. 不知道你用没用过Github,里边的目录跳转就是用html5的 ...
- TP3.2：实现Ajax无刷新上传图片
1.基于TP3.2+ajaxfileupload进行无刷新上传图片,本次只上传一张,多张以后搞出来再发 2.效果: 3.html代码: <html> <head> < ...
- Ajax下载文件(页面无刷新)
说明:Ajax是无法实现文件传输的,本文只是模拟了Ajax不刷新页面就可以请求并返回数据的效果.实质上还是通过提交form表单来返回文件流的输出. 分步实现逻辑: ajax请求服务器,访问数据库,根据 ...
- MVC三级联动无刷新
本篇实现有关客户.订单和产品的无刷新三级联动,先看最终效果: 没有选择时,后2个Select状态为禁用: 当选择第1个Select,第2个Select可供选择,第3个Select依旧禁用: 当选择第2 ...
- jQuery无刷新上传之uploadify简单试用
先简单的侃两句:貌似已经有两个月的时间没有写过文章了,不过仍会像以前那样每天至少有一至两个小时是泡在园子里看各位大神的文章.前些天在研究“ajax无刷新上传”方面的一些插件,用SWFUpload实现了 ...
- PHP Ajax JavaScript 实现 无刷新附件上传
普通表单 前端页面 后台处理 带有文件的表单 刷新方式 前端界面 后台页面 无刷新方式 大文件上传 POST极值 upload极值 上传细节 前端页面 后台处理 总结 对一个网站而言,有一个基本的不可 ...
- ajax无刷新上传和下载
关于ajax无刷新上传和下载 这是一个没什么含量但是又用的比较多又不得不说的问题,其实真的不想说,因为没什么好说的. 关于上传 1.使用Flash,ActiveX 上传 ,略... 2.自己写XMLH ...
- mvc file控件无刷新异步上传操作
前言 上传文件应该是很常见必不可少的一个操作,网上也有很多提供的上传控件.今天遇到一个问题:input控件file无法进行异步无刷新上传.真真的感到别扭.所以就尝试这去处理了一下.主要分三个部分:上传 ...
随机推荐
- day27:反射和双下方法
1, # 面向对象的三大特性:继承,多态和封装 # 继承: # 单继承: **** # 父类(超类,基类) # 子类(派生类) 派生方法和派生属性 # 子类的对象在调用方法和属性:先用自己的,自己没有 ...
- Oracle JDK 1.8 openJDK11 定制化JDK
小结: 1. https://mp.weixin.qq.com/s/4rkgisFRJxokXZ4lyFXujw 京东JDK在大数据平台的探索与研究 臧琳 亿级流量网站架构 3月11日
- 一个人工智能教程，教案接地气、限制级。 http://www.captainbed.net
一个人工智能教程,教案接地气.限制级. http://www.captainbed.net https://open.weibo.com/
- DDoS攻击流量检测方法
检测分类 1)误用检测 误用检测主要是根据已知的攻击特征直接检测入侵行为.首先对异常信息源建模分析提取特征向量,根据特征设计针对性的特征检测算法,若新数据样本检测出相应的特征值,则发布预警或进行反应. ...
- [vue--开发记录]使用location.href修改地址跳转页面在ie上遇到的坑
管理后台项目上在用vue2.0开发,因为刚转vue2.0,不是太熟悉.在跳转页面的时候直接用location.href来修改地址跳转,在chrome和火狐上展现都是正常的.后面因为说要兼容到IE9,就 ...
- hdfs核心主件服务的启停方式
停止mapreduce服务 /hadoop/hadoop-2.6.4/sbin/stop-yarn.sh 启动mapreduce服务 /hadoop/hadoop-2.6.4/sbin/start-y ...
- mysql-5.7 通过apt或者yum安装方式
此文章仅记录使用apt-get安装mysql. 通过以下命令安装MySQL: shell> sudo apt-get install mysql-server 这将安装MySQL服务器的包,以及 ...
- 常用的 jQuery 事件
$(document).ready(): $(document).ready() 方法允许我们在文档完全加载完后执行函数. click(): click() 方法是当按钮点击事件被触发时会调用一个函数 ...
- ytkah常用网址导航 关于网站运营等
关于运营的网站 人人都是产品经理 产品100 爱运营 A5网站运营 姑婆那些事儿 馒头商学院 运营者 91运营网 互联网的一些事 jb51网站运营 三联网站运营 从零开始做运营 科技/互联网 cn ...
- PyCharm更换sublime类似主题
1. 下载jar主题包 下载地址:https://github.com/spasserby/PyCharm-monokai 2.导入pycharm设置 导入方法:file-->Import Se ...