<!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. iOS transform解决连续多次旋转缩放，实现图片旋转缩放效果

    一.需求 实现imageView的缩放旋转效果,一般有两种方式: 1.底层加scrollview,利用scrollview的属性实现.(推荐这种,这是我比较后发现的,手势做缩放旋转会有点弊端) 2.利 ...

  2. placement new 笔记

    之前看到 偶尔用placement new 的用法,当分配内存频繁,而且对效率要求很高的情况下,可以先申请一块大内存,然后在此内存上构建对象,关键是可以自动调用其构造函数,否则要悲剧. 但是之后要自己 ...

  3. 阿里面试的一点感受 阿里ali片式经历和面试题

    阿里面试的一点感受 <!-- [废话开始] 百度实习三个月,明天就要离职了,感觉还挺开心的,同事们都很照顾我,Boss也比较欣赏我,我很满足了.掐指一算,这大四其实也没几个月了,同事们都在感叹大 ...

  4. C语言学习笔记 (006) - 二维数组传参的三种表现形式

    # include <stdio.h> # include <stdlib.h> # define M # define N int getdate(int (*sp)[M]) ...

  5. 进阶之路（基础篇） - 021 arduino基础知识

    什么是arduino(翻译自arduino官方介绍)Arduino 是一款便捷灵活.方便上手的开源电子原型平台,包含硬件(各种型号的arduino板)和软件(arduino IDE).她适用于艺术家. ...

  6. 【Oracle】Oracle 的过程化SQL（PLSQL）中NULL值的处理

    下面是NULL的几个注意点: 1.NULL值既不是空格也不是0. 2.给表插入值的时候,如果没有给列指定列值,则默认为NULL. 3.当算术表达式里包含NULL值时,其计算结果也是NULL值. 这时候 ...

  7. Unicode和UTF的关系

    目录结构: contents structure [+] 什么是USC UCS的编码方式 Unicode的来源 为什么需要Unicode Unicode的方式 Unicode和UTF UTF和Unic ...

  8. Spring Cloud启动应用时指定IP或忽略某张网卡配置

    说明:分布式应用部署到服务上,由于服务器可能存在多张网卡,造成IP地址不准的问题. 解决方法: 1.直接添加忽略某张网卡的配置: spring.cloud.inetutils.ignored-inte ...

  9. bootstrap datepicker Uncaught TypeError: Cannot call method 'split' of undefined问题

    这个问题主要是由于date对象不是字符串,不能使用 split 函数,简单处理一下,转换成字符串就可以解决问题: ++++++++++++++++++++++++ parseDate: functio ...

  10. aaronyang的百度地图API之LBS云 笔记[开发准备]

    我的脚印 1.注册百度账号 先到163邮箱注册个邮箱(注册邮箱),用这个邮箱注册百度账号(注册百度),激活百度账号 2.登陆百度账号,进入 百度地图 申请为LBS开发者 2.1 注册申请为百度开发者( ...