<!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. <转>LUA语法分析

    本文选自:http://www.cnblogs.com/nazhizq/p/6516561.html 一步步调试,在lparser.c文件中luaY_parser函数是语法分析的重点函数,词法分析也是 ...

  2. ACM经验分享[转]

    明确规则 规则:以最少的时间过题 (这意味着0ms与1000ms是一样的) 了解规则,善用规则 虽然这个题我不会但是AC是没有问题的 --ACRush 大力出奇迹 学会对拍数据,准备好对拍脚本:测试很 ...

  3. jenkins+maven+git+ 邮件自动转发 持续化集成 图文教程

    1.所需要的插件,安装plugin ,进入mangae Jenkins→ manage Plugins, 切换到Available tab, 选择如下plugin 安装 Gitplugin, GitH ...

  4. VS2010 C++环境下DLL和LIB文件的生成与调试

    利用VS2010工具,调试DLL文件的方法现总结如下: 在一个解决方案中生成两个工程,假设MYDLL和MYDLG两个工程,前者是DLL工程,后者DLG调用前边的DLL工程.设置如下: 目录如下:图,本 ...

  5. kubernetes架构之二

    一.概述 IaaS:即基础设施即服务,通过虚拟化和分布式存储等技术,实现对包括服务器.存储设备.网络设备等各种物理资源的抽象:从而形成了一个可扩展.可按需分配的虚拟资源池.最具代表性的IaaS产品有A ...

  6. 【Oracle 】pctfree和pctused详解

    一.建立表时候,注意PCTFREE参数的作用 PCTFREE:为一个块保留的空间百分比,表示数据块在什么情况下可以被insert,默认是10,表示当数据块的可用空间低于10%后,就不可以被insert ...

  7. C/C++/动态链接库DLL中函数的调用约定与名称修饰

    参见:http://blog.twofei.com/cc/impl/calling-convension.html 调用约定(Calling Convention)是指在程序设计语言中为了实现函数调用 ...

  8. Oracle 12C -- clone a non-cdb as a pdb

    将non-CDB置为只读模式: $ sqlplus '/as sysdba' SQL> select name, decode(cdb, 'YES', 'Multitenant Option e ...

  9. appium简明教程（7）——Desired Capabilities详解

    Desired Capabilities在启动session的时候是必须提供的. Desired Capabilities本质上是key value的对象,它告诉appium server这样一些事情 ...

  10. apache Tomcat配置SSL(https)步骤

    Tomcat配置https 1      生成Server端安全证书 要实现通信加密,首先要在本地准备一份符合X.509标准的Server端安全证书.如果有条件的话,可以向权威CA申请一份经过认证的安 ...