图片批量上传js插件 imgFileupload.js
插件Demo展示
插件功能介绍
1、批量选择图片，限制图片的类型 (通过限制file的accept)，只能选择图片
默认:accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
2、可以自定义限制选择图片的数量，默认5张
3、可以自定义限制图片的最大宽度和最大高度，默认都是10000px
4、可以自定义限制图片的单文件大小，默认是4MB
5、使用简单引用css和js ，并且在页面加上标签 即可使用
【相关课程推荐：JavaScript视频教程】
代码Demo
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>轻量级图片批量上传JS插件imgFileupload</title>
<meta charset="utf-8" />
<link href="Content/css/imgFileupload.css" rel="stylesheet" />
<script src="Content/js/jquery-1.8.3.min.js"></script>
<script src="Content/js/imgFileupload.js"></script>
</head>
<body>
<!--这里加载上传图片插件-->
<div class="review_img">
</div>
<input id="parameter1" type="text" value="" /><br />
<input id="parameter2" type="text" value="" /><br />
<input id="parameter3" type="text" value="" /><br />
<input id="parameter4" type="text" value="" /><br />
<input id="parameter5" type="text" value="" /><br />
<input type="button" id="sub" value="提交" οnclick="submit()">
</body>
</html>
<script type="text/javascript">
var imgFile;
$(function () {
imgFile = new ImgUploadeFiles('.review_img', function (e) {
this.init({
MAX: 6, //Limit the number of images
FileSize: 1024 * 1024 * 4,//单文件限制4MB(注意：单位KB)
callback: function (arr) {
console.log(arr)
}
});
});
});
function submit()
{
var formData = new FormData();
$(".review_img li").each(function (i, item) {
formData.append("file", $(item).data("file"));
});
formData.append("parameter1", $("#parameter1").val());
formData.append("parameter2", $("#parameter2").val());
formData.append("parameter3", $("#parameter3").val());
formData.append("parameter4", $("#parameter4").val());
formData.append("parameter5", $("#parameter5").val());
$.ajax({
url: "/Index/Write",
type: "POST",
dataType: "json",
data: formData,
async: true,
cache: false,
contentType: false,
processData: false,
beforeSend: function () {
},
success: function (data) {
alert("ok");
},
error: function () {
alert("Sorry");
}
});
}
</script>多次选择文件的情况，File元素中的filedata内容始终是当前选择的文件，上一次选择的文件则被替换掉
并且由于浏览器安全问题,JavaScript无法操作File文件上传中的filedata中的文件，无法把多次选择的文件赋值到File元素的filedata中，由此造成无法直接用form表单直接提交File元素中的文件
所以这里我们使用formData来提交文件和参数，没有使用form表单提交
本文来自 js教程 栏目，欢迎学习！
以上是图片批量上传js插件 imgFileupload.js的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
微信小程序实现图片上传功能
Nov 21, 2023 am 09:08 AM
微信小程序实现图片上传功能随着移动互联网的发展，微信小程序已经成为了人们生活中不可或缺的一部分。微信小程序不仅提供了丰富的应用场景，还支持开发者自定义功能，其中包括图片上传功能。本文将介绍如何在微信小程序中实现图片上传功能，并提供具体的代码示例。一、前期准备工作在开始编写代码之前，我们需要先下载并安装微信开发者工具，并注册成为微信开发者。同时，还需要了解微信
使用CakePHP框架实现图片上传和显示的步骤
Jul 29, 2023 pm 04:21 PM
使用CakePHP框架实现图片上传和显示的步骤引言：在现代Web应用程序中，图片上传和显示是常见的功能需求。CakePHP框架为开发者提供了强大的功能和便捷的工具，使得实现图片上传和显示变得简单高效。本文将向您介绍如何使用CakePHP框架来实现图片上传和显示。步骤1：创建文件上传表单首先，我们需要在视图文件中创建一个表单，用于用户上传图片。以下是一个示例的
Vue技术开发中如何处理图片上传和压缩
Oct 08, 2023 am 10:58 AM
Vue技术开发中如何处理图片上传和压缩在现代web应用中，图片上传是一个非常常见的需求。然而，由于网络传输和存储等方面的原因，直接上传原始的高分辨率图片可能会导致上传速度慢和存储空间的大量浪费。因此，对于图片的上传和压缩是非常重要的。在Vue技术开发中，我们可以使用一些现成的解决方案来处理图片上传和压缩。下面将介绍如何使用vue-upload-compone
如何使用PHP和Vue实现图片上传功能
Sep 25, 2023 pm 03:17 PM
如何使用PHP和Vue实现图片上传功能在现代网页开发中，图片上传功能是非常常见的需求。本文将详细介绍如何使用PHP和Vue来实现图片上传功能，并提供具体的代码示例。一、前端部分（Vue）首先需要在前端创建一个用于上传图片的表单。具体代码如下：<template><div><inputtype="fil
如何使用ThinkPHP6实现图片上传
Jun 20, 2023 pm 09:25 PM
随着互联网的发展，图片上传已经成为了网站和应用程序开发中的一个必不可少的功能。而在PHP领域，ThinkPHP6已经成为了一款非常流行的开发框架。在本文中，我们将介绍如何使用ThinkPHP6实现图片上传。一、创建项目和控制器首先，我们需要创建一个新的ThinkPHP6项目。可以使用Composer进行安装，也可以在官网下载最新版。安装完成后，在控制台中进入
Vue技术开发中如何实现图片上传和裁剪
Oct 10, 2023 pm 12:46 PM
Vue技术开发中如何实现图片上传和裁剪，需要具体代码示例在现代Web开发中，图片上传和图片裁剪是常见的需求之一。Vue.js作为一个流行的前端框架，提供了丰富的工具和插件来帮助我们实现这些功能。本文将介绍如何在Vue技术开发中实现图片上传和裁剪，并提供具体的代码示例。图片上传的实现可以分为两个步骤：选择图片和上传图片。在Vue中，可以使用第三方插件来简化这个
如何使用PHP实现一个简单的在线图片上传和展示系统
Sep 25, 2023 am 09:21 AM
如何使用PHP实现一个简单的在线图片上传和展示系统图片上传和展示系统是现代网站常用的功能之一，在开发过程中使用PHP可以快速实现这个功能。本篇文章将介绍如何使用PHP编写一个简单的在线图片上传和展示系统，并提供具体的代码示例。一、创建数据库和表格首先，我们需要创建一个数据库和表格来存储上传的图片信息。使用以下SQL语句创建一个名为"images"的表格，并设
Vue开发中如何解决图片上传预览模态框显示问题
Jul 01, 2023 pm 01:13 PM
Vue开发中如何解决图片上传预览模态框显示问题在Vue开发中，经常会遇到需要上传图片并预览的需求。在这种情况下，一个常见的问题是如何在上传图片之后，在模态框中显示预览图片。本文将介绍一种解决这个问题的方法。首先，我们需要在Vue的组件中添加一个文件上传的input元素，用于选择要上传的图片文件。通过监听文件上传的change事件，我们可以获取到用户选择的图片
