写在前面：后端选择你项目中使用的语言接收并处理图片。
由于上传图片都是以jQuery插件，为了纯js的崛起，遂选择ajax上传的方式，但在查找相关实例的时候着实困难重重，仅这个上传功能来回测试不下于2天的时间，最终还是执着战胜了困境。
以下3种方式都经多次测试通过。
重要说明：
第一种：切记：form -> enctype="multipart/form-data"
第二种：阻止默认submit：event.preventDefault();
第三种：var formData = new FormData();
formData.append('photos', file);
xhr.send(formData);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax文件上传</title>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
<h1>1、纯HTML上传文件</h1>
<input type="file" name="pic" accept="image/*">
<input type="submit">
</form>
<form id="file-form">
<h1>2、JS post form file</h1>
<input type="file" name="images" multiple accept="image/*"/>
<button type="submit" name="btn">上传文件</button>
</form>
<div>
<h1>3、JS Ajax post file</h1>
<input type="file" id="files" name="photos" multiple accept="image/*"/>
<button type="submit" id="upload">上传文件</button>
</div>
<script>
// JS post form file
var form = document.getElementById('file-form');
form.onsubmit = function(event) {
event.preventDefault();
var files = form.images.files;
var file = files[0];
var formData = new FormData();
formData.append('images', file);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onload = function () {
if (xhr.status === 200) {
// File(s) uploaded.
form.btn.innerText = '上传成功！';
console.log('Upload Finished!!!!!!!!!!');
} else {
alert('An error occurred!');
}
};
xhr.send(formData);
};
var files = document.getElementById('files');
var uploadBtn = document.getElementById('upload');
uploadBtn.onclick = function() {
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onload = function () {
if (xhr.status === 200) {
// File(s) uploaded.
uploadBtn.innerHTML = 'Upload Finished';
} else {
alert('An error occurred!');
}
};
var file = files.files[0];
var formData = new FormData();
formData.append('photos', file);
xhr.send(formData);
}
</script>
</body>
</html>
更多实例应用扫码体验：
相关推荐
在Web开发中，批量上传图片是一项常见的功能，尤其是在社交媒体、电商平台和内容管理系统中。本教程将深入探讨如何使用PHP和AJAX技术实现这一功能。PHP作为服务器端脚本语言，处理文件上传，而AJAX则负责异步通信，...
在现代Web应用中，批量上传图片是一项常见的需求，特别是在社交媒体、博客平台以及各种内容管理系统中。PHP结合AJAX（Asynchronous JavaScript and XML）技术可以很好地实现这一功能，为用户提供无刷新的交互体验，...
在这个批量上传的案例中，我们可以通过JavaScript监听文件选择事件，然后使用XMLHttpRequest对象创建异步请求，将选中的文件信息发送给服务器。当用户按Ctrl键选择多个文件时，可以在JavaScript中实现遍历和合并这些...
在实现Ajax批量上传文件时，首先需要创建一个表单，让用户选择文件。然后，通过JavaScript获取用户选择的文件列表，使用FormData对象存储这些文件。FormData对象可以方便地将文件数据打包成适合发送到服务器的形式。...
总结来说，实现Ajax批量上传图片主要涉及HTML5 File API、Ajax技术、jQuery或原生XMLHttpRequest对象的使用，以及服务器端的文件接收处理。通过合理的设计和优化，可以提供快速、流畅的批量图片上传功能。
在传统的HTML4中，文件上传通常只能单个进行，而HTML5引入了新的API和特性，使得批量上传成为可能。 批量图片上传的核心是`<input type="file">`元素的改进。在HTML5中，这个元素允许用户选择多个文件，通过设置`...
ASP.NET AJAX 多文件上传是一种在Web应用中实现高效、用户友好的文件上传方式，它结合了ASP.NET技术和AJAX（Asynchronous JavaScript and XML）的优势，提供了异步上传功能，使得用户无需等待整个页面刷新就能完成...
在IT行业中，Web开发是不可或缺的一部分，而Servlet、图片批量上传和Ajax异步技术则是构建高效、用户友好的Web应用的关键技术。以下是对这些知识点的详细说明： **Servlet上传** Servlet是Java EE平台中用于扩展...
**Ajax异步批量上传文件技术详解** 在现代Web开发中，用户经常需要上传大量文件，传统的表单提交方式由于其同步特性，会导致页面刷新，用户体验不佳。为了解决这一问题，Ajax异步上传文件应运而生。本教程将通过一...
最近项目需要批量上传附件，查了下资料，网上很多但看着一脸懵，只贴部分代码，介绍也不详细，这里记录一下自己的采坑与多种实现，以免以后忘记。 这里先介绍下FormData对象，以下内容摘自地址 XMLHttpRequest Level...
可以使用jQuery的AjaxForm插件或纯JavaScript的XMLHttpRequest对象来实现异步提交。 5. **分块上传**：对于大文件，可以使用分块上传技术，将大文件切割成小块逐个上传，然后在服务器端重新组合。这种方式可以提高...
ASP.NET批量上传组件是开发Web应用时经常遇到的需求，尤其在处理用户需要一次性上传多份文件的场景下，这样的组件显得尤为重要。此组件允许用户通过浏览器界面一次性选择多个文件进行上传，大大提高了用户体验并减轻...
综上所述，实现“PHP + jQuery 批量图片上传”涉及前端的HTML、CSS、JavaScript（jQuery）以及后端的PHP技术，还包括了文件上传、错误处理、进度显示、安全性和性能优化等多个方面的知识点。理解并掌握这些要点，...
**Ajax 实现文件上传** Ajax（Asynchronous JavaScript and XML）技术允许我们在不刷新整个页面的情况下与...在实际开发中，我们可能还需要考虑兼容性、性能优化以及更复杂的业务需求，如断点续传、多文件批量上传等。
本主题将深入探讨如何使用HTML5和Ajax技术来实现一个无刷新的多图上传功能，这是一个常见且实用的功能，尤其适用于社交媒体、电商网站等需要大量图片上传的场景。 首先，HTML5引入了`<input type="file">`的新特性...
在Java编程环境中，批量上传文件是一项常见的任务，尤其在Web应用程序中，如处理用户上传的大量图片、文档或数据。本实例将详细讲解如何在Java中实现这一功能，结合使用jar包和JSP来构建一个完整的解决方案。 首先...
本文将详细讲解如何在JSP中实现无刷新批量上传的功能，结合AJAX（Asynchronous JavaScript and XML）技术，使得用户在上传文件时无需等待页面刷新，提供更流畅的操作体验。 首先，我们需要理解批量上传的概念。批量...
在本文中，我们将深入探讨如何使用SpringMVC框架在JavaWeb应用中实现图片文件上传到腾讯云的对象存储服务（COS）。首先，我们需要了解SpringMVC的基本概念，它是一个基于Spring框架的MVC（Model-View-Controller）...
【diyUploadjQuery多张图片批量上传插件】是一个基于jQuery的前端组件，主要用于实现用户在Web应用中一次性上传多张图片的功能。这个插件极大地简化了图片上传的流程，提高了用户体验，尤其适用于需要大量图片交互的...
10. **批量上传优化**：对于大量图片的上传，可以考虑分批上传、断点续传、进度存储等策略，以减少网络负担和提高成功率。 在"上传文件demo"这个项目中，开发者可能已经实现了上述部分或全部功能，通过解压文件并...