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无法进行异步无刷新上传.真真的感到别扭.所以就尝试这去处理了一下.主要分三个部分:上传 ...
随机推荐
- Linux服务器tomcat启动很慢
Linux服务器tomcat启动很慢 步骤: 一:找到 java 位置 whereis java 输出内容(部分):/usr/lib/java ...... 二:进入到 lib 目录 cd /usr ...
- jenkins配置自动发送邮件，抄送
1.安装插件.系统管理-安装插件:可选插件:搜索Email Extension 2.设置全局变量.系统管理-系统设置:a.Jenkins Location 设置发送方邮件--- b.Extended ...
- k8s-N0.4-service
本章目录 k8s中的三种网络 service的构建及参数说明 一 k8s的三种网络 在k8s集群中,k8s是有三种网络类型的,下面我们看一下下面这个图 1 节点网络:顾名思义,节点网络就是你每台物理 ...
- （4.11）mysql备份还原——mysql闪回技术（基于binlog）
0.闪回技术与工具简介 mysql闪回工具比较流行三大类: [0.1]官方的mysqlbinlog:支持数据库在线/离线,用脚本处理binlog的输出,转化成对应SQL再执行.通用性不好,对正则.se ...
- 【转】Spring Boot 构建应用——快速构建 Spring Boot 应用
Spring Boot 简化了 Spring 应用开发,不需要配置就能运行 Spring 应用,Spring Boot 的自动配置是通过 Spring 4.x 的条件注解 @Conditional 来 ...
- Servlet学习1
1.首先在Tomcat的webapp目录下新建文件夹myWebapp,作为自己的web应用. 2.myWebapp下新建WEB-INF(必须这个名)目录,WEB-INF下新建classes目录放置se ...
- gitbook build/serve 失败，Error: ENOENT: no such file or directory, stat ...
我使用的 gitbook 版本 CLI version: 2.3.2 GitBook version: 3.2.3 在使用 gitbook 生成文档时,发现编译偶尔不规律性地出现错误 d:\Mine\ ...
- 小程序：scroll-view组件滑动多次触发scroll事件的bug解决
在项目开发过程中,组件是微信小程序提供给我们的一个分页器,一般滑动到底部时会触发scroll事件,scroll事件中往往包含对后端数据的请求:若是还未滑动到底部时频繁触发事件,则会频繁发请求,达不到想 ...
- centos7mini静默安装oracle11gr2
[root@oracle ~]# cat /etc/hosts127.0.0.1 oracle.osp.cloud localhost localhost.localdomain localhost4 ...
- 使用TCP通信文件上传
客服端读取本地文件,吧文件上传到服务器,服务器在吧上传的文件保存到服务器硬盘上方法分析1:客户端使用本地字节输入流读取要上传的文件 2:客户端使用网络字节输出流,吧读取到的文件上传到服务器 3:服务器 ...