ajax 利用formdata对象 实现多文件上传

<!doctype html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <title>多文件上传</title>
  <script src="jquery.js"></script>
  <script>
   $(function(){
         $("#btn").click(function(){
               var formData = new FormData();
               for(var i=0; i<$(‘#file‘)[0].files.length;i++){
                   formData.append(‘file[]‘, $(‘#file‘)[0].files[i]);
               }
               $.ajax({
                  url: "test.php",
                  type: "POST",
                  processData: false,
                  contentType: false,
                  data: formData,
                  success: function(d){

                  }
               });

          });

   })

  </script>
</head>
<body>
    <form>
     <input  type="file" multiple id="file" name="file[]" >
     <input  type="button" id="btn" value="提交"/>
    </form>
</body>

  

直接上代码:

html代码



原文地址:https://www.cnblogs.com/xiaogou/p/11659920.html

时间: 2024-11-11 00:54:39

ajax 利用formdata对象 实现多文件上传的相关文章

.Net之使用Jquery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径

前言: 首先对于图片上传而言,在我们的项目开发中可以说出现的频率是相当的高的.这篇文章中,我将要描述的是在我们.Net中如何使用Jquery Ajax通过FormData对象异步提交图片文件到后台保存,并返回保存的图片路径展示出图片,实现一个无刷新的异步图片上传的过程,当然这里我讲解的是单张图片的保存过程,对于多图片上传的话其实我们只需要在type='file'文本框中加上一个multiple可多选,然后获取input中的文件数组遍历向后台提交感兴趣的话可以尝试,不过下一篇博客将会讲解如何使用L

利用spring的MultipartFile实现文件上传【原】

利用spring的MultipartFile实现文件上传 主要依赖jar包 spring-web-3.0.6.RELEASE.jar 用到 (org.springframework.web.multipart.MultipartFile)commons-fileupload-1.3.1.jarcommons-logging-1.0.4.jar 前台 <!DOCTYPE html> <html lang="en"> <head> <meta ch

利用Socketserver实现简单的文件上传

利用Socketserver实现简单的文件上传 server.py #!/usr/bin/env python #coding:utf-8 import SocketServer import os class MyServer(SocketServer.BaseRequestHandler):     def handle(self):         base_path = 'C:/temp'         conn = self.request                 print

利用html5的FormData对象实现多图上传

有两种实现方式: 1.可以使用form的方式实现. html代码如下: <body> <form enctype="multipart/form-data" id="inputForm1" modelAttribute="bankAdminist" action="" method="post" class="form-horizontal"> <div c

ajax实现带进度条的文件上传

jsp部分:设计一个表单,form的属性添加 enctype="multipart/form-data",设计一个iframe,设为隐藏.form的target等于iframe的name; servlet部分:文件上传用的Commons-FileupLoad,需要两个Jar,commons-fileupload和commons-io,少了第二个会报出找不到类的异常: 第一个servlet处理上传,及把上传进度保存到session,第二个servlet处理ajax请求,回传session

使用PHP和HTML5 FormData实现无刷新文件上传教程

无刷新文件上传是一个常见而又有点复杂的问题,常见的解决方案是构造 iframe 方式实现. 在 HTML5 中提供了一个 FormData 对象 API,通过 FormData 可以方便地构造一个表单请求,并通过 XMLHttpRequest 来发送.通过 FormData 对象发送文件也是可以的,如此则无刷新上传就变的非常简单了. 那么 FormData 怎么使用呢?下面phpstudy对此进行简单的介绍. 1. 构造 FormData 对象 想得到一个FormData对象,很简单: var

Ajax技术——带进度条的文件上传

1.概述 在实际的Web应该开发或网站开发过程中,经常需要实现文件上传的功能.在文件上传过程中,经常需要用户进行长时间的等待,为了让用户及时了解上传进度, 可以在上传文件的同时,显示文件的上传进度条.运行本实例,如图1所示,访问文件上传页面,单击“浏览”按钮选择要上传的文件,注意文件不能超过 50MB,否则系统将给出错误提示.选择完要上传的文件后,单击“提交”按钮,将会上传文件并显示上传进度. 2.技术要点 主要是应用开源的Common-FileUpload组件来实现分段文件上传,从而实现在上传

AJAX提交form表单带文件上传

过了三天才想要写博客,这样不好,要改正 在做毕设的时候,用户发帖涉及到了文件上传的问题,在这里记录一下 背景: 在用户发帖的时候,用户只想发表文字postText,还有些用户想在发表postText的同时还发表一些图片,如何做? 上代码 不写的太细了,和流水账似的,挑重点记录一下. 1.前台的文件上传 本来想用form表单直接上传了,但是form提交时会刷新整个页面,但这不是我想要的,所以使用了ajax提交form表单. 利用ajax提交表单需要用到jquery.form.js这个包,网上有很多

在Servlet中利用Apache开源类库实现文件上传

本文结合具体的范例,介绍如何通过Apache开源类库提供的软件包,在Servlet中进行文件上传.本文的参考书籍是<Tomcat与Java Web开发技术详解>第三版,作者:孙卫琴. 本文所用的软件版本为:Window10,JDK10,Tomcat9.本文所涉及的源代码的下载网址为:http://www.javathinker.net/javaweb/upload-app.rar Apache开源软件组织提供了与文件上传有关的两个软件包:? fileupload软件包(commons-file