圖片批次上傳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事件，我們可以取得到使用者選擇的圖片
