<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Js实现文件上传功能</title>

     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

     <style>

         .a-upload {

             position: relative;

             display: inline-block;

             background: #D0EEFF;

             border: 1px solid #99D3F5;

             border-radius: 4px;

             padding: 4px 12px;

             overflow: hidden;

             color: #1E88C7;

             text-decoration: none;

             text-indent: 0;

             line-height: 20px;

         }

         .a-upload input {

             position: absolute;

             font-size: 100px;

             right: 0;

             top: 0;

             opacity: 0;

         }

         .a-upload:hover {

             background: #AADFFD;

             border-color: #78C3F3;

             color: #004974;

             text-decoration: none;

         }

     </style>

 </head>

 <body>

 <form method="post"

       enctype="multipart/form-data"

       id="upload">

     <a href="javascript:;"   id="pic"    class="a-upload">

         <input type="file"

                name="file"

         >

         点击这里上传文件

     </a>

     <input type="button" value="提交" onclick="uploadPic()">

     <span class="showUrl"></span>

     <img src="" alt="" class="showPic">

 </form>

 </body>

 <script>

     function uploadPic() {

         var form = document.getElementById('upload')

         var formData = new FormData(form);

         $.ajax({

             url:"https://sscpre.boe.com/v1/medical-console/medical/file/upload",

             type:'post',

             data:formData,

             processData:false,

             success:function (res) {

                 if(res){

                     alert('上传成功')

                 }

                 $('#pic').val('');

                 $(".showUrl").html(res);

                 $(".showPic").attr("src",res);

             },

             error:function(err){

                 alert('网络失败，请稍后再试',err)

             }

         })

     }

 </script>

 </html>

原生js实现文件上传的更多相关文章

  1. js获取文件上传进度

    js获取文件上传进度: <input name="file" id="FileUpload" type="file" /> &l ...

  2. 使用ajaxfileupload.js实现文件上传

    ajaxFileUpload是一个异步上传文件的jQuery插件 语法:$.ajaxFileUpload([options]) options参数说明: 1.url  上传处理程序地址. 2,file ...

  3. js多文件上传

    一.HTML 选择文件的时候可以选择多个文件,这个需要我们在input file 里面加入一个属性multiple="multiple" 这样就可以框选文件了 <!DOCTY ...

  4. springmvc环境下使用ajaxfileupload.js进行文件上传

    controller: /* #region */ @RequestMapping(produces = "text/html;charset=UTF-8", value = &q ...

  5. Js学习文件上传

    // 文件上传 jQuery(function() { var $ = jQuery, $list = $('#thelist'), $btn = $('#ctlBtn'), state = 'pen ...

  6. JS大文件上传断点续传解决方案

    1 背景 用户本地有一份txt或者csv文件,无论是从业务数据库导出.还是其他途径获取,当需要使用蚂蚁的大数据分析工具进行数据加工.挖掘和共创应用的时候,首先要将本地文件上传至ODPS,普通的小文件通 ...

  7. JS大文件上传解决方案

    1 背景 用户本地有一份txt或者csv文件,无论是从业务数据库导出.还是其他途径获取,当需要使用蚂蚁的大数据分析工具进行数据加工.挖掘和共创应用的时候,首先要将本地文件上传至ODPS,普通的小文件通 ...

  8. js大文件上传

    一般10M以下的文件上传通过设置Web.Config,再用VS自带的FileUpload控件就可以了,但是如果要上传100M甚至1G的文件就不能这样上传了.我这里分享一下我自己开发的一套大文件上传控件 ...

  9. js实现文件上传

    js function UpladFile() { var fileObj = document.getElementById("filetes").files[0]; // 获取 ...

随机推荐

  1. hihocoder第229周：最大连续字母个数

    题目链接 给定一个仅包含小写字母的字符串s(长度小于1e5),你可以交换任意两个字符的位置,现在允许交换k次,要求交换之后,s中最长的连续相同字符个数尽量多,求这个最长连续区间的长度. 样例 输入 1 ...

  2. 开始 App前 需要考虑的几项

    来源:Limboy's HQ http://t.cn/R5sEDMJ 随着工具链的完善,语言的升级以及各种优质教程的涌现,做一个 App 的成本也越来越低了.尽管如此,有些事情最好前期就做起来,避免当 ...

  3. Linux下Valgrind的使用概述 来源：Linux社区 作者：dndxhej

    本地使用情况,在Ubantu系统上编写的测试性能: 1,下载:sudo apt-get install valgrind; 2,验证是否安装成功:试着valgrind ls -l来检测是否正常工作: ...

  4. 谈谈选用技术的原则，技术学习方法技巧，阅读代码的技巧及其它 MSF的一点心得

    谈谈技术原则,技术学习方法,代码阅读及其它(正文) 这篇文章是前一阵在水木BBS上和别人讨论中偶自己发言的摘编,是偶这几年开发过程完全经验式的总结.完全个人经验,供批判. 一.选用技术的原则 比较规范 ...

  5. SqlServer 2005 将已存在大量数据的表更改为分区表

    一.分区表简介: 使用分区表的主要目的,是为了改善大型表以及具有各种访问模式的表的可伸缩性和可管理性.分区一方面可以将数据分为更小.更易管理的部分,为提高性能起到一定的作用:另一方面,对于如果具有多个 ...

  6. Block（二）内存管理与其他特性-b

    一.block放在哪里 我们针对不同情况来讨论block的存放位置: 1.栈和堆 以下情况中的block位于堆中: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ...

  7. CocoaPods iOS 开源库管理

    1.CocoaPods 简介 1.1 CocoaPods CocoaPods 是 macOS 和 iOS 下的一个第三类库管理工具,通过 CocoaPods 工具我们可以为项目添加被称为 " ...

  8. Spark弹性分布式数据集RDD

    RDD(Resilient Distributed Dataset)是Spark的最基本抽象,是对分布式内存的抽象使用,实现了以操作本地集合的方式来操作分布式数据集的抽象实现.RDD是Spark最核心 ...

  9. Js实现动态添加删除Table行示例

    <table cellpadding="0" cellspacing="0" border="1" style="margi ...

  10. java 传址或传值

    原文链接: http://blog.csdn.net/jdluojing/article/details/6962893 java是传值还是传址,这个问题已经讨论了很久了,有些人说是传值的,有些人说要 ...