传送门：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. Python 序列、列表（List）、元组（Tuple）

    序列 序列是Python中最基本的数据结构,包括字符串.列表.元组. 序列,顾名思义,是有序的,序列都有索引,都能进行索引.切片(截取).加(连接).乘(倍增).检查成员的操作. 因为序列有序,可通过 ...

  2. 使用composer命令加载vendor中的第三方类库

    1.首先下载需要的第三方类库,放在TP框架下的vendor文件夹下 2.给第三方类库SDK写上命名空间,命名空间为该类库的文件夹对应的名字 3.在composer.json文件中添加需要加载的第三方类 ...

  3. 目标检测论文解读5——YOLO v1

    背景 之前热门的目标检测方法都是two stage的,即分为region proposal和classification两个阶段,本文是对one stage方法的初次探索. 方法 首先看一下模型的网络 ...

  4. php工厂方法模式(factory method pattern)

    继续练 <?php /* The factory method pattern deals with the problem of creating objects without having ...

  5. PHP操作MYSQL--PDO

    感觉比直接弄SQL语句高级,但还不到ORM的封装. 一步一步进化. app.json { "db": { "user": "root", & ...

  6. 重构之字段改名 UML行为图 用例图 时序图&协作图 状态图&活动图 依恋情结

    简单的使用一下字段改名 为什么使用字段改名: ​ 你在一个软件上做的工作越多,对这个软件的数据的理解就越深刻,你需要把这些理解融入到代码中.利用名字的解释作用,让代码更容易被理解. 如何找到该变量的所 ...

  7. 项目（二） esp32-cam 网页图像人脸

    https://randomnerdtutorials.com/esp32-cam-video-streaming-face-recognition-arduino-ide/ ESP32-CAM Pi ...

  8. EFK收集nginx日志

    准备三台centos7的服务器 两核两G的 关闭防火墙和SELinux systemctl stop firewalld setenforce 0 1.每一台都安装jdk rpm -ivh jdk-8 ...

  9. [RN] React Native 删除第三方开源组件依赖包 后 还要做的 （以 删除 react-native-video为例）

    近期测试使用了下  react-native-video 使用一直不成功,后来想着删除掉, 使用命令: npm uninstall react-native-video 重新编译后,还是一直报错 后来 ...

  10. 【JZOJ6213】【20190613】String

    题目 \(n \le 10^{18} \ , \ |T| \le 10^5\) 题解 显然,最少的操作次数一定是贪心地能匹配就匹配 我们可以建出\(T\)的SAM,把SAM不能走的边补到根的后继节点 ...