jquery多文件上传插件

news/2024/12/18 17:37:31/文章来源:https://www.cnblogs.com/zzggqq/p/18615523

jquery.imageuploader.js是一款jquery多文件上传插件。该jquery多文件上传插件主要用于上传图片,它允许你选择多个图片文件,也可以直接拖拽图片到指定区域,然后显示图片的预览图和信息,最后通过Ajax一次性上传选择的图片到服务器上。

在线预览  下载

 

该jquery多文件上传插件的特点有:

  • 允许指定上传图片文件的格式。
  • 可以生成上传图片的缩略图预览。
  • 允许通过选择或拖拽进行图片选择。
  • 通过ajax请求上传图片到服务器。
  • 上传文件的界面样式可以完全自定义。

 使用方法

在页面中引入jquery,jquery.imageuploader.js和样式文件imageuploader.css。

< script src="path/to/jquery.min.js">
< script src="path/to/jquery.imageuploader.js">
< link href="imageuploader.css" rel="stylesheet">  
 HTML结构

上传文件的表单需要用一个块级元素包裹起来,类似下面的样子。

< div class="uploader__box js-uploader__box l-center-box">< form action="后台提交的地址" method="POST">< div class="uploader__contents">< label class="button button--secondary" for="fileinput">选择文件< input id="fileinput" class="uploader__file-input" type="file" multiple value="Select Files">< input class="button button--big-bottom" type="submit" value="Upload Selected Files">              
 初始化插件

在页面DOM元素加载完毕之后,通过uploader()来初始化该jquery多文件上传插件。

$( '.js-uploader__box' ).uploader({//配置参数
});

 配置参数

该jquery多文件上传插件的可用配置参数有:

参数 默认值 描述
submitButtonCopy 'Upload Selected Files' 提交按钮上显示文本
instructionsCopy 'Drag and Drop, or' 一级选择的标签文本
furtherInstructionsCopy 'You can also drop more files, or' 二级选择的标签文本
selectButtonCopy 'Select Files' 一级选择按钮上的文本
secondarySelectButtonCopy 'Select More Files' 二级选择按钮上的文本
dropZone $('body') 拖拽文件的区域,一个jquery对象。
fileTypeWhiteList ['jpg', 'png', 'jpeg', 'gif', 'pdf'] 允许选择的图片或文件格式
badFileTypeMessage 'Sorry, we're unable to accept this type of file.' 发生上传错误时的提示文本
ajaxUrl /ajax/upload 文件上传的ajax地址

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/854894.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

VLM中的适配器adapter起什么作用

An Introduction to VLMs: The Future of Computer Vision Models | by Ro Isachenko | Nov, 2024 | Towards Data Science

模型参数量计算(以transformer为例)

前言 模型中常见的可训练层包括卷积层和线性层,这里将给出计算公式并在pytorch下进行验证。 计算模型的参数: import torch.nn as nndef cal_params(model: nn.Module):num_learnable_params = sum(p.numel() for p in model.parameters() if p.requires_grad)num_non_learna…

文献解读:采用波浪前缘的风电机组翼型后缘降噪实验研究

在半消声室内进行了仿生正弦波形前缘控制风力机翼型尾缘自噪声的实验研究,基于声波束形成结果,展示了波浪前缘的噪声控制效果,波浪形前缘振幅越大、波长越小,对翼型后缘降噪效果越好。最大声压级降低可达33.9dB。题目:采用波浪前缘的风电机组翼型后缘降噪实验研究 关键词:…

活动策划还能这样做,效率提升看得见!

文档协同如何助力电商团队降本增效? 电商行业以快著称,活动运营的每一秒都可能决定销量的成败。然而,在紧张的时间表下,如何确保团队成员高效协同,是很多电商运营者面临的难题。文档协同成为破解这一问题的关键手段。 打破信息差,构建透明化流程 在大型电商活动中,信息孤…

用WPF实现桌面锁屏壁纸的应用

用WPF实现桌面锁屏壁纸的应用 目录用WPF实现桌面锁屏壁纸的应用需求分析需求方案实现App.xamlApp.xaml.csMainWindow.xamlMainWindow.xaml.csImportImageHelper.csKeyboardHookLib.cs壁纸 需求分析 需求存取数据库二进制文件轮播图片显示系统时间滑动解锁禁用键盘添加托盘图标开…

GaussDB技术解读高性能——分布式优化器

GaussDB技术解读高性能——分布式优化器 分布式数据库场景下表分布在各个节点上,数据的本地性Data Locality是分布式优化器中生成执行计划时重点考虑的因素,基于Share Nothing的分布式数据库中有一个很关键概念就是“移动数据不如移动计算”,之所以有数据本地性就是因为数据…

15隐藏元素-文本溢出-盒子模型的四个部分

一、元素隐藏方法 在HTML开发过程当中存在一些元素我们想要将一些元素隐藏起来,元素如果想要隐藏有哪些方式: (1)将display设置为none页面上不显示,但是HTML仍然存在 并且也不占据位置和空间了,后面的元素就会跑上来。 (2)visibility设置为hidden visibility这个单词是…

manim边学边做--突出显示

本篇介绍Manim中用于突出显示某些内容的动画类,主要包括:ApplyWave:让图形或文字产生连续波浪式变形的动画类,用于展示波动效果,参数可调节 Circumscribe:用于在几何场景中展示图形与其外接图形的关系,动画围绕对象生成外接图形 Flash:通过快速改变对象视觉属性产生闪烁…

今天是周三?

符合题墓的标题,朴实无华[WUSTCTF2020]朴实无华 首先打开页面,发现无信息含泪扫墓路,发现robots.txt访问其中的链接,此时发现http头中藏有一个路径直接访问,得到以下代码,有一点点乱码,用抓包软件打开即可发现代码分为三关,我们一关一关看 第一关:intval绕过 //level …

《刚刚问世》系列初窥篇-Java+Playwright自动化测试-7-元素基础定位方式-下篇 (详细教程)

1.简介 上一篇主要是讲解我们日常工作中在使用Playwright进行元素定位的一些比较常用的基础定位方式的理论基础知识以及在什么情况下推荐使用。今天这一篇讲解和分享一下剩下部分的基础定位方式。 2.过滤器定位 例如以下 DOM 结构,我们要在其中单击第二个产品卡的购买按钮。我…