<!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. MySQL模拟Oracle序列使用

    https://www.runoob.com/mysql/mysql-using-sequences.html   一篇笔记开始看 注意:创建序列表时一定要有 主键id自增,否则为只读状态不能修改递增 ...

  2. Foundation框架系列-NSString

    NSString OC字符串与C语言字符串转换 NSString *str = @"Hello world ! !"; // OC字符串 --> C语言字符串 char *c ...

  3. Android Studio && NDK开发

    Android Studio下载安装网址:http://www.android-studio.org/index.php/download/hisversion 在下载界面可以查看安装包内是否包含SD ...

  4. webpack打包less与sass

    less 1.安装 less-loader 与 less npm install less-loader less --save-dev 2.配置webpack.config.js module.ex ...

  5. 转：linux驱动开发的经典书籍

    源地址:http://www.cnblogs.com/xmphoenix/archive/2012/03/27/2420044.html Linux驱动学习的最大困惑在于书籍的缺乏,市面上最常见的书为 ...

  6. IO流19（完） --- RandomAccessFile实现数据的插入 --- 技术搬运工（尚硅谷）

    原hello.txt文件中的内容:abcdefghijklmn 想要实现的效果是,将xyz插入到abc后面,将文件内容变成:abcxyzdefghijklmn @Test public void te ...

  7. webServices学习一（了解基础和作用。）

    一.第一部分 1.         带着几个问题学习: l    什么是WebService? l    它能做什么? l    为什么要学习WebService? l    学习WebService ...

  8. springcloud注册中心eureka

    1.前提 springcloud的注册中心是以springboot为基础搭建起来的. 开发工具:IDEA 项目管理工具:maven 2.搭建步骤 创建一个web项目(建议使用IDEA工具构建项目) 修 ...

  9. 读取复杂结构的yml配置项

    1.yml配置项示例:(List的集合在第一项前面加 “-”) rabbitmqsetting: exchangeList: - name: e1 type: topic bindingList: - ...

  10. Django项目：CRM(客户关系管理系统)--19--11PerfectCRM实现King_admin分页显示条数

    登陆密码设置参考 http://www.cnblogs.com/ujq3/p/8553784.html list_per_page = 2 #分页条数 list_per_page = 2 #分页条数 ...