图片批量上传js插件 imgFileupload.js-js教程-PHP中文网

首页

web前端

js教程

图片批量上传js插件 imgFileupload.js

angryTom

Nov 30, 2019 pm 03:01 PM

图片上传

插件Demo展示

插件功能介绍

1、批量选择图片，限制图片的类型 (通过限制file的accept)，只能选择图片

默认:accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"

2、可以自定义限制选择图片的数量，默认5张

3、可以自定义限制图片的最大宽度和最大高度，默认都是10000px

4、可以自定义限制图片的单文件大小，默认是4MB

5、使用简单引用css和js ，并且在页面加上标签a4cbf4695dbc537ff433147ff9b566cf16b28748ea4df4d9c2150843fecfba68 即可使用

【相关课程推荐：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(&#39;.review_img&#39;, 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中文网其他相关文章！

声明

本文转载于：CSDN。如有侵权，请联系admin@php.cn删除

微信小程序实现图片上传功能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

使用Vue开发中遇到的图片上传和裁剪问题Oct 08, 2023 pm 04:12 PM

标题：Vue开发中图片上传和裁剪问题及解决方法引言：在Vue开发中，图片上传和裁剪是常见的需求。本文将介绍在Vue开发中遇到的图片上传和裁剪问题，并给出解决方法和具体的代码示例。一、图片上传问题：选择图片上传按钮无法触发文件选择框：这个问题通常是因为没有正确绑定事件或者绑定的事件不生效。可以通过在模板中绑定点击事件，并在对应的方法中触发文件选择框。代码示例：

如何使用ThinkPHP6实现图片上传Jun 20, 2023 pm 09:25 PM

随着互联网的发展，图片上传已经成为了网站和应用程序开发中的一个必不可少的功能。而在PHP领域，ThinkPHP6已经成为了一款非常流行的开发框架。在本文中，我们将介绍如何使用ThinkPHP6实现图片上传。一、创建项目和控制器首先，我们需要创建一个新的ThinkPHP6项目。可以使用Composer进行安装，也可以在官网下载最新版。安装完成后，在控制台中进入

如何使用PHP实现一个简单的在线图片上传和展示系统Sep 25, 2023 am 09:21 AM

如何使用PHP实现一个简单的在线图片上传和展示系统图片上传和展示系统是现代网站常用的功能之一，在开发过程中使用PHP可以快速实现这个功能。本篇文章将介绍如何使用PHP编写一个简单的在线图片上传和展示系统，并提供具体的代码示例。一、创建数据库和表格首先，我们需要创建一个数据库和表格来存储上传的图片信息。使用以下SQL语句创建一个名为"images"的表格，并设

Vue技术开发中如何实现图片上传和裁剪Oct 10, 2023 pm 12:46 PM

Vue技术开发中如何实现图片上传和裁剪，需要具体代码示例在现代Web开发中，图片上传和图片裁剪是常见的需求之一。Vue.js作为一个流行的前端框架，提供了丰富的工具和插件来帮助我们实现这些功能。本文将介绍如何在Vue技术开发中实现图片上传和裁剪，并提供具体的代码示例。图片上传的实现可以分为两个步骤：选择图片和上传图片。在Vue中，可以使用第三方插件来简化这个

See all articles