<!DOCTYPE html>

 <html>

 <head>

     <title></title>

 </head>

 <body>

 <input type="file" multiple name="image[]" /> <br>

 <input type="file" multiple name="image[]" /> <br>

 <input type="file" multiple name="image[]" /> <br>

 <input type="button" value="提交">

 </body>

 <script src="jquery.min.js"></script>

 <script type="text/javascript">

     $(':button').click(function() {

     　　//formdata储存异步上传数据

         var formData = new FormData();

         formData.append('image[]',$(':file')[0].files[0]);

         formData.append('image[]',$(':file')[1].files[0]);

         formData.append('image[]',$(':file')[2].files[0]);

         $.ajax({

             url:"upload.php",

             type: 'POST',

             data: formData,

             //这两个设置项必填

             contentType: false,

             processData: false,

             success:function(data){

             }

         })

     });

 </script>

 </html>

FormData使用详解

ajax多图片上传demo的更多相关文章

  1. SpringBoot实现图片上传demo&Nginx进行代理显示

    公司项目需要一个图片上传的功能,就图片能上传到服务器(公司用的windows服务器),然后nginx能进行代理访问到就行了,先简单介绍一下nginx,然后再来实现功能. 一.nginx简介 Nginx ...

  2. ajax(form)图片上传（spring）

    第一步:spring-web.xml <!--配置上传下载--> <bean id="multipartResolver" class="org.spr ...

  3. python - django 使用ajax将图片上传到服务器并渲染到前端

    一.前端代码 <!doctype html> <html lang="en"> <head> <meta charset="UT ...

  4. 一般处理程序、Ajax多图片上传带进度条

    <!DOCTYPE html><html><head>    <meta charset="utf-8" />    <tit ...

  5. ajax实现图片上传

    1.创建formData表单,模拟表单传递数据(formData有兼容性问题) var formData = new FormData();2.获取到相应的元素 var jobName = $(&qu ...

  6. jquery Ajax 实现图片上传的功能。

    $('#image').on('change', function () {         var url = "";         var form = new FormDa ...

  7. jquery php ajax多图片上传.上传进度,生成缩略图

    本例用到其他2个php class.upload.php和 functions.php还有css和js以及img文件 下载地址为www.freejs.net/demo/91/down.zip 演示 J ...

  8. struts2 使用ajax进行图片上传

    第一步:引入一个插件    jquery.form.js /*! * jQuery Form Plugin * version: 3.36.0-2013.06.16 * @requires jQuer ...

  9. ajax实现图片上传与进度条

    这里使用的是bootstract的一个插件来实现 详情请查看文档中的进度条 https://v3.bootcss.com/components/ 引入必要的文件 <link href=" ...

随机推荐

  1. nfs 原理详解

    一.NFS介绍 1)什么是NFS 它的主要功能是通过网络让不同的机器系统之间可以彼此共享文件和目录.NFS服务器可以允许NFS客户端将远端NFS服务器端的共享目录挂载到本地的NFS客户端中.在本地的N ...

  2. 修改linux命令行的提示符PS1

    # If not running interactively, don't do anything [ -z "$PS1" ] && return # check ...

  3. RN 开发工具及发布release版本

    2.1.开发工具推荐visual studio code https://code.visualstudio.com/docs/?dv=win 选择安装react native tool 就可以了 2 ...

  4. dubbo入门学习(六)-----dubbo原理

    RPC原理 一次完整的RPC调用流程(同步调用,异步另说)如下: 1)服务消费方(client)调用以本地调用方式调用服务: 2)client stub接收到调用后负责将方法.参数等组装成能够进行网络 ...

  5. name和value的简单js用法

    name和value: 例如: <input type="text" name="txt"/> name用于定义这个input收到的值的变量名,在上 ...

  6. 学习mysql数据库

    1.数据库是怎么回事 数据库是存储数据的永久空间,通过一种特殊的方式存储到硬盘中 数据库分为关系型数据库和非关系型数据库 mysql查看数据的方式为:结构化查询语言(SQL语句) 访问mysql数据库 ...

  7. 【DM8168学习笔记5】EZSDK目录结构

    EZSDK5.02的目录结构与之前的版本不同,之前的版本各个组件都放在/ezsdk目录下,5.02做了整合. 之前版本:(图片摘自:3.DM816x_1-day_Workshop-Getting_St ...

  8. 2018-8-14-Resharper-如何把类里的类移动到其他文件

    title author date CreateTime categories Resharper 如何把类里的类移动到其他文件 lindexi 2018-08-14 17:34:39 +0800 2 ...

  9. 2019-8-31-C++-驱动开发-error-LNK2019-unresolved-external-symbol-__CheckForDebuggerJustMyCode-referenced-...

    title author date CreateTime categories C++ 驱动开发 error LNK2019 unresolved external symbol __CheckFor ...

  10. javascript基础：事件

    事件: 概念:某些组件被执行了某些操作后,触发某些代码的执行 *  事件:某些操作,如:单击,双击,键盘按下了,鼠标移动了 *  事件源:组件.如:按钮   文本输入框.... *  监听器:代码 * ...