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无法进行异步无刷新上传.真真的感到别扭.所以就尝试这去处理了一下.主要分三个部分:上传 ...
随机推荐
- Java+Selenium向文本框输入内容以后模仿键盘的"ENTRY"
在自动化测试中我们避免不了要模仿一些键盘上按钮的操作,普通的字母,数字,特殊符号,这些都是很简单的,有时候我们也会模仿"SHIFT","ALT","C ...
- Python全栈-magedu-2018-笔记10
第三章 - Python 内置数据结构 集set 约定 set 翻译为集合 collection 翻译为集合类型,是一个大概念 set 可变的.无序的.不重复的元素的集合 set定义 初始化 set( ...
- verilog 之流水灯
1.黑金板 简易操作: 通过判断数值累加 个人观点:黑金代码质量有待提高,讲解不够详细 2.正点原子的 位置调换 led[:] <= {led[:],led[]}; 3.传统位移 led& ...
- 滴滴出行基于RocketMQ构建企业级消息队列服务的实践
小结: 1. https://mp.weixin.qq.com/s/v6NM3UgX-qTI7yO1QPCJrw 滴滴出行基于RocketMQ构建企业级消息队列服务的实践 原创: 江海挺 阿里巴巴中间 ...
- Redis之基本使用
基本介绍 Redis是一种key-value存储形式的非关系型数据库,也是一个强大的内存型存储系统,但是它比传统的Memcached 更灵活,支持更多的数据类型,同时也可以持久化. 支持的数据类型 先 ...
- 关于Eureka客户端连接服务端报错问题Cannot execute request on any known server
对于Eureka包这个错误问题:Cannot execute request on any known server,总的原因就是连接Eureka连接服务端的Url地址不对,Url地址不对很很多情况. ...
- matlab2014a 转化c语言
一.原因错误 第一种,命令窗口测试代码mbulid -setup 出错 , 就是电脑没有安装sdk7.1 网上有很多安装教程(注意要有vc++2010要卸载,具体看网上教程,安装好了要更性vc++ ...
- Java面向对象——类，对象和方法
1.类的概念 在生活中,说到类,可以联想到类别,同类,会想到一类人,一类事物等等.而这一类人或事物都是具有相同特征或特点和行为的,我们根据不同的特征或特点和行为将他们归类或分类.同时,当我们认识一个新 ...
- Cocos Creator JS 获取当前日期与时间
var testDate = new Date(); testDate.getYear();//获取当前年份(2位) testDate.getFullYear(); //获取完整的年份(4位,1970 ...
- .net 操作web.config文件
XmlDocument doc = new XmlDocument(); string wc = HttpContext.Request.PhysicalApplicationPath + @&quo ...