传送门：https://www.cnblogs.com/qiumingcheng/p/6854933.html

ajax-formdata-upload.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

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

</head>

<body>

    <input type="file" name="" id="file">

</body>

<script>

document.getElementById('file').addEventListener('change', function(e) {

    const data  = new FormData()

    // https://www.cnblogs.com/qiumingcheng/p/6854933.html

    data.append('file', this.files[0])

    $.ajax({

        url: "http://192.168.8.89/index.php",

        type: "POST",

        data: data,

        processData: false,

        contentType: false,

        success: function(data) {

        },

        error: function(data) {

        }

    });

})

</script>

</html>

重点是这个东西

图片上传： ajax-formdata-upload的更多相关文章

  1. ASP.NET Core 简单实现七牛图片上传（FormData 和 Base64）

    ASP.NET Core 简单实现七牛图片上传(FormData 和 Base64) 七牛图片上传 SDK(.NET 版本):https://developer.qiniu.com/kodo/sdk/ ...

  2. Formdata 图片上传 Ajax

    /*图片上传*/ $("点击对象").bind("click", function(e){ $('#form-upload').remove(); $('bod ...

  3. laravel 图片上传 ajax 方式

    laravel 图片上传 //后台轮播图上传 $("#img-upload").on('submit',function(e){ e.preventDefault(); var f ...

  4. ASP.NET 图片上传工具类 upload image简单好用功能齐全

    使用方法: UploadImage ui = new UploadImage(); /***可选参数***/ ui.SetWordWater = "哈哈";//文字水印 // ui ...

  5. 富文本编辑器TInyMCE,本地图片上传（Image Upload）

    TinyMCE 官网 (类似:百度的富文本web编辑器UEditor) 第一步 下载 TinyMCE,解压后放入工程,在需要的HTML页面引入tinymce.min.js. 第二步 下载tinyMCE ...

  6. 图片上传 new FormData() ,new FileReader()

    多图片和单图片取决于 multiple属性,下面来介绍下 new FileReader() reader.readAsDataUrl(file[0]) 可以看到文件是Base64的, let fd = ...

  7. 图片上传至/target/upload目录下后，通过ip:port/upload/无法访问

    做以下配置即可 @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { try { registry ...

  8. 图片上传之FileAPI与NodeJs

    HTML5之fileAPI HTML5之fileAPI使得我们处理图片上传更加简单. 实例 html代码 <div class="form-group"> <la ...

  9. html + js 实现图片上传，压缩，预览及图片压缩后得到Blob对象继续上传问题

    先上效果 上传图片后(设置了最多上传3张图片,三张后上传按钮消失) 点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正) html ...

  10. .net mvc + layui做图片上传（一）

    图片上传和展示是互联网应用中比较常见的一个功能,最近做的一个门户网站项目就有多个需要上传图片的功能模块.关于这部分内容,本来功能不复杂,但后面做起来却还是出现了一些波折.因为缺乏经验,对几种图片上传的 ...

随机推荐

  1. Java DbUtils 操作数据库

    示例 1.新建项目,把数据库驱动.DbUtils的jar包添加到项目中 2.新建文件夹resource,标识为资源根目录,下面新建数据库连接的配置文件mysql.properties driver=c ...

  2. Linux more与less命令

    1.命令简介 more (more) 该命令一次显示一屏文本,满屏后停下来,并且在屏幕的底部出现一个提示信息,给出至今己显示的该文件的百分比,方便逐页阅读(file perusal filter fo ...

  3. Django之DRF源码分析（四）---频率认证组件

    核心源码 def check_throttles(self, request): """ Check if request should be throttled. Ra ...

  4. Odoo graph视图

    转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/10826175.html 一:图形视图 图形视图用来表示对模型的概述和分析,根元素是<graph> ...

  5. mysql 外键的基本使用

    外键的使用条件: 两个表必须是InnoDB表,MyISAM表暂时不支持外键外键列必须建立了索引,MySQL 4.1.2以后的版本在建立外键时会自动创建索引,但如果在较早的版本则需要显式建立:外键关系的 ...

  6. manjaro手动安装Redis

    以前都是用的Windows系统,最近有被win10搞得有点烦,就入了manjaro的坑,windows下部分软件在manjaro安装记录,留个记录. 我的系统信息 下面开始正式干活. 一.准备步骤 下 ...

  7. 看TED演讲——Why you will fail to have a great career

    讲者的名字叫Larry Smith,看起来很严肃很认真,有点黑色幽默的意思,演讲风格是非常让人喜欢的. 拿来howie老师的说法,拉老师给的你为什么没有一个great career的原因: 1. 知道 ...

  8. Linux libcurl安装及注意事项

    一.下载 官网下载地址 :  https://curl.haxx.se/download.html 选择最新的一个即可. 二.安装 1.解压 下载到的压缩包为curl-7.51.0.tar.gz,使用 ...

  9. Mysql insert on update

    数据库 Mysql INSERT INTO table (column_list) VALUES (value_list) ON DUPLICATE KEY UPDATE c1 = v1, c2 = ...

  10. Spring Cloud 之 Feign 知识点：封装了 REST 调用

    Feign Client 会在底层根据你的注解,跟你指定的服务建立连接.构造请求.发起请求.获取响应.解析响应,等等. Feign 的一个关键机制就是使用了动态代理. 首先,如果你对某个接口定义了 @ ...