<!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. 新安装的ubuntu编辑器问题

    转自:https://blog.csdn.net/xiangaichou/article/details/20235041 VI部分 1. 上下左右总是出ABCD,还占行,特难用.这种情况出现在ubu ...

  2. iOS 10 的一个重要更新-新的通知推送 API

    iOS 10 最重要的变化可能就是通知 API 的重构了.本文用一个简单闹钟的例子介绍了 User Notification 的 API 变化和新功能. 简介 很久以前,开发者就可以在 iOS 里预约 ...

  3. lsof命令详解（转）

    lsof命令详解(转) 上一篇 / 下一篇  2011-06-09 21:56:41 / 个人分类:Linux 查看( 351 ) / 评论( 0 ) / 评分( 0 / 0 ) 在Linux中,ls ...

  4. 【javascript】js中的函数节流和函数防抖

    一.概念解释  函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段.  大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...

  5. mysql用户权限管理的问题

    为了保证数据库安全,建立了若干个只能select的用户,但在权限授权的时候出现了不能连接的问题, 一个个尝试了一下,需要将 :  管理 -> SUPER项勾选才行(使用phpmyadmin),上 ...

  6. MongoDB学习笔记（11）-- Index

    索引通常能够极大的提高查询的效率,如果没有索引,MongoDB在读取数据时必须扫描集合中的每个文件并选取那些符合查询条件的记录. 这种扫描全集合的查询效率是非常低的,特别在处理大量的数据时,查询可以要 ...

  7. easyui按钮linkbutton 不可用（置灰）与 可用（取消置灰）

    easyui linkbutton按钮: 不可用(置灰) $('#butFree').linkbutton('disable'); 可用(取消置灰) $('#butFree').linkbutton( ...

  8. matlab入门笔记（六）：编程基础之M文件

    摘自<matlab从入门到精通>胡晓东 在Matlab中,用户可以在命令行中直接输入命令,从而以一种交互式的方式来编写程序.这种方式适用于命令行比较简单,输入比较方便,同时处理的问题较少的 ...

  9. STM32定时器T2纯软件仿真时间准确，JTAG在线调试查看时间不准的问题

    通过查看Sec的值和上次中断的差值计算的,虽然这个值是不准的 ,但实际上时间是准的, 原因如下:stm32在调试模式下虽然进断点之后程序停止了,但定时器的时钟还在走,计数器还在计数,若要在产生断点时计 ...

  10. DVWA默认用户名密码

    有些东西不好找啊,自己动手丰衣足食-- DVWA默认的用户有5个,用户名密码如下(一个足以): admin/password gordonb/abc123 1337/charley pablo/let ...