传送门：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. JVM 入门指南

    一.什么是JVM? JVM: JVM是Java Virtual Machine的缩写,中文翻译为Java虚拟机.JVM 可以看作一台抽象的计算机,如同真实的计算机一样,它有自己的指令集和各种运行时区域 ...

  2. python 验证码识别示例（三） 简单验证码识别

    今天介绍一个简单验证的识别. 主要是标准的格式,没有扭曲和变现.就用 pytesseract 去识别一下. 验证码地址:https://user.www.gov.cn/sso/verifyimg_ed ...

  3. 拖拽插件SortableJS

    在项目中,经常会遇到一些涉及到拖拽的需求,github上面有一个开源的SortableJS的插件,支持Vue,React,Angular等多种框架,实现效果很好,基本可以满足大部分的需求,下面就第一次 ...

  4. 高小兰 201671010414 实验十四 团队项目评审&课程学习总结

    项目 内容 软件工程 https://www.cnblogs.com/nwnu-daizh/ 作业要求 https://www.cnblogs.com/sunmiaokun/p/11095027.ht ...

  5. ssm上传文件

    ssm上传文件(上传到本地磁盘) (1)先要导入所需要的jar包或者pom文件中添加依赖 <!-- 上传 --> <dependency> <groupId>com ...

  6. try catch 小结 ， node的回调callback里不能捕获异常 ， 不能被v8优化（现在能了），

    <深入浅出Nodejs>时,在第四章 - 异步编程中作者朴灵曾提到,异步编程的难点之一是异常处理,书中描述"尝试对异步方法进行try/catch操作只能捕获当次事件循环内的异常, ...

  7. Go语言 - 结构体 | 方法

    自定义类型和类型别名 自定义类型 在Go语言中有一些基本的数据类型,如string.整型.浮点型.布尔等数据类型, Go语言中可以使用type关键字来定义自定义类型. 自定义类型是定义了一个全新的类型 ...

  8. [Algorithm] 206. Reverse Linked List

    Reverse a singly linked list. Example: Input: 1->2->3->4->5->NULL Output: 5->4-> ...

  9. linux学习10 Linux目录结构和根文件系统全面讲解

    一.回顾 1.如何获取使用帮助 help,--help,man,info 官方文档,自带文档(README,CHANGELOG,INSTALL),官方文档 发行版的文档 Google Linux Ke ...

  10. ArrayList ：货物库存管理（遍历）

        package com.oracle.demo01; import java.util.ArrayList; import java.util.Scanner; public class De ...