<!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. Linux桌面“彩”起来:桌面环境及窗口管理器大盘点

    2011-02-22 11:49:50   看到这个标题,很多人一定认为桌面环境和窗口管理器是一回事,但严格来说窗口管理器和桌面环境是有区别的.桌面环境(Desktop Environments)是最 ...

  2. Linux系统vi编辑器提示E325: ATTENTION的解决方法

    非正常关闭文件会报这样的警告信息, 原因是系统产生了一个.swp的文件. 删除就行了.(前提是确认.swp文件没用了.) 例如: rm -f /etc/.shadowsocks.json.swp 详情 ...

  3. 修改linux 最大文件限制数 ulimit

    1)修改当前交互终端的limit值 查询当前终端的文件句柄数: ulimit -n 回车,一般的系统默认的1024. 修改文件句柄数为65535,ulimit -n 65535.此时系统的文件句柄数为 ...

  4. MySQL 插入emoji 表情

    create table doctorUserInfoMation ( id int not null auto_increment comment '系统ID', userId ) comment ...

  5. Entity Framework中实体模型命名空间的问题

    在添加一个实体数据模型的时候(就是扩展名为edmx那位)属性里明明设置了自己的命名空间,但是后台的Designer.cs命名空间生成规则却是项目的默认命名空间加edmx文件所在文件夹的名称, 是BUG ...

  6. 【Linux】参数代换命令xargs

    xargs 是在做什么的呢?就以字面上的意义来看,x 是加减乘除的乘号,args 则是 arguments (参数) 的意思,所以说,这个玩意儿就是在产生某个命令的参数的意思! xargs 可以读入 ...

  7. MySQL -- innodb中cardinality是如何统计的

    cardinality是放在mysql存储引擎层进行的.采用的是采样取值.在innodb存储引擎中,cardinality统计信息的更新发生在两个操作中:insert和update 更新策略为:-表中 ...

  8. Linux信号机制

    Linux信号(signal) 机制分析 [摘要]本文分析了Linux内核对于信号的实现机制和应用层的相关处理.首先介绍了软中断信号的本质及信号的两种不同分类方法尤其是不可靠信号的原理.接着分析了内核 ...

  9. 跟我学SharePoint 2013视频培训课程——网站导航及页面元素（2）

    课程简介 第2天,介绍SharePoint 2013 网站导航及页面元素 视频 SharePoint 2013 交流群 41032413

  10. struts系列：校验（一）XML校验和函数方法校验

    一.jsp示例 <form action="login" method="post"> <div class="form-group ...