附带上传源码如下：

 <!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完美实现无刷新上传并附带上传效果的更多相关文章

  1. 基于h5的图片无刷新上传(uploadifive)

    基于h5的图片无刷新上传(uploadifive) uploadifive简介 了解uploadify之前,首先了解来一下什么是uploadify,uploadfy官网,uploadify和uploa ...

  2. PushState+Ajax 完美实现无刷新

    转载自:http://lazynight.me/1897.html 折腾一下PJAX,利用HTML5的新API,实现历史记录的完美导入. 不知道你用没用过Github,里边的目录跳转就是用html5的 ...

  3. TP3.2：实现Ajax无刷新上传图片

    1.基于TP3.2+ajaxfileupload进行无刷新上传图片,本次只上传一张,多张以后搞出来再发 2.效果:   3.html代码: <html> <head> < ...

  4. Ajax下载文件(页面无刷新)

    说明:Ajax是无法实现文件传输的,本文只是模拟了Ajax不刷新页面就可以请求并返回数据的效果.实质上还是通过提交form表单来返回文件流的输出. 分步实现逻辑: ajax请求服务器,访问数据库,根据 ...

  5. MVC三级联动无刷新

    本篇实现有关客户.订单和产品的无刷新三级联动,先看最终效果: 没有选择时,后2个Select状态为禁用: 当选择第1个Select,第2个Select可供选择,第3个Select依旧禁用: 当选择第2 ...

  6. jQuery无刷新上传之uploadify简单试用

    先简单的侃两句:貌似已经有两个月的时间没有写过文章了,不过仍会像以前那样每天至少有一至两个小时是泡在园子里看各位大神的文章.前些天在研究“ajax无刷新上传”方面的一些插件,用SWFUpload实现了 ...

  7. PHP Ajax JavaScript 实现 无刷新附件上传

    普通表单 前端页面 后台处理 带有文件的表单 刷新方式 前端界面 后台页面 无刷新方式 大文件上传 POST极值 upload极值 上传细节 前端页面 后台处理 总结 对一个网站而言,有一个基本的不可 ...

  8. ajax无刷新上传和下载

    关于ajax无刷新上传和下载 这是一个没什么含量但是又用的比较多又不得不说的问题,其实真的不想说,因为没什么好说的. 关于上传 1.使用Flash,ActiveX 上传 ,略... 2.自己写XMLH ...

  9. mvc file控件无刷新异步上传操作

    前言 上传文件应该是很常见必不可少的一个操作,网上也有很多提供的上传控件.今天遇到一个问题:input控件file无法进行异步无刷新上传.真真的感到别扭.所以就尝试这去处理了一下.主要分三个部分:上传 ...

随机推荐

  1. python 中的类

    1.1 类里面包括:类的属性.方法 OO的特征(Object Oriented) 封装:信息隐蔽技术 继承:继承是子类自动共享父类之间数据和方法的机制 >>> class MyCla ...

  2. QQ设置手机和pc qq群消息不同步

    作为开发人员QQ群很多,很正常,工作的时候才需要看qq信息和群消息,但是蛋疼qq在新版的qq必须设置同步,之前用的qq8.1版本可以设置不同步,但是现在突然不行 目前可以用的途径就是 QQ国际PC版2 ...

  3. JMeter压测基础（三）——Mysql数据库

    JMeter压测基础(三)——Mysql数据库 环境准备 mysql驱动 JMeter jdbc配置 JMeter jdbc请求 1.下载mysql驱动:mysql-connector-java.ja ...

  4. 2018-2019-2 《网络对抗技术》Exp0 Kali安装 Week1 20165225

    2018-2019-2 <网络对抗技术>Exp0 Kali安装 Week1 20165225 - 上Kali官网选择Kali Linux 64 bit的torrent,用迅雷解压即可 安装 ...

  5. SecureCRT连接linux步骤

    SecureCRT连接linux步骤  做个笔记,以免隔段时间后忘了 LINUX系统一般都是用来作服务器使用,而且都是通过命令行来操作,为了操作方便我们都会使用第三方软件来远程操作.CRT就是比较常用 ...

  6. centos7 + php7

    安装php7 https://www.zntec.cn/archives/centos7-lamp.html composer安装tp curl -sS https://getcomposer.org ...

  7. redis常用的命令总结

    redis常用的命令大全 1.基于内存的key-value数据库 2.基于c语言编写的,可以支持多种语言的api //set每秒11万次,取get 81000次 3.支持数据持久化 4.value可以 ...

  8. turtlebot3 ubuntu mate 实现vnc连接

    tuutlebot3 ubuntu mate 实现vnc连接 摘要: 在turtlebot3 安装的nbuntu mate系统实验过. 实现内容 x11vnc 安装 x11vnc自动启动 vnc分辩率 ...

  9. 理解 JavaScript 中的 this

    前言 理解this是我们要深入理解 JavaScript 中必不可少的一个步骤,同时只有理解了 this,你才能更加清晰地写出与自己预期一致的 JavaScript 代码. 本文是这系列的第三篇,往期 ...

  10. CentOS系统/tmp目录里面的文件默认保留多久

    一.CentOS系统/tmp目录里面的文件默认保留多久 CentOS6默认保留30天,CentOS7默认保留10天 一.CentOS7系统/tmp目录里面的文件默认保留多久 CentOS7默认保留10 ...