自动压缩图片限制格式大小显示缩略图兼容GB2312的JS插件

本文介绍了2024年更新的JS文件上传插件,新增功能包括文件名长度限制、非法图片检测、AJAX调用、一键清空、批量上传和图片压缩。同时修复了部分兼容性和安全问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

《志执必行JS文件与图片上传插件》
功能说明:
在选择文件的时候:
1、可限制最大上传文件数、允许上传的后缀、允许上传的最大MB
2、读取所选的文件信息,并且输出到指定区域,也可以不显示
3、如果读取的是图片,可将图片的缩略图显示到指定区域,并且可以限制缩略图最大尺寸,也设置为可以不显示
点击上传文件按钮后:
1、如果上传的是图片,可自动压缩图标到指定的大小(尺寸)
2、如果上传的是非法图片(比如其他文件改成图片的后缀)则会被拦截,不会上传
3、可以在上传后自动跳转到指定页面,也可以不跳转,如果不跳转的,可以在指定区域输出后端的返回内容
4、上传成功后,可以通过AJAX自动get一个页面,并且把返回信息输出到指定的区域
其他说明:
1、如果把所有的<input>、<selete>标签的内容都一并POST过去
2、如果文件名、<input>、<selete>含有中文,会自动转成URL码再POST过去
3、如果一个页面有多个上传窗口,可以通过给<div>、<form>、<file>设置不同的ID用于区分,互不干扰

一个JS上传插件,版本修正如下:
2024年3月19日
1、增加一个函数“ToUrlMaLeft20ZhongWen”,控制文件名转码后字符的长度,目前设置的是225个字符,如果超过225个字符,就只取签名得到225个URL码

2024年3月7日
1、修正非法图片判断,如果上传的文件的含有非法图片,则都不上传,并且输出提示
2、增加两个参数,一个是AJAX 要Get的地址,第二个是输出在哪个位置的ID,当上传成功后,会执行AJAX 来GET这个地址,并获取返回值输出到指定位置,如果地址留空,那就不执行AJAX 

2024年3月6日
1、增加一个选择完文件未上传前一键清空的按钮
2、增加一个上传成功后,执行某个函数的功能

2024年3月3日
1、修正了<select>标签无法传输value的问题

2024年2月29日
1、修正了只会传指定<from>标签里面的input值和file文件(原来是会传整个页面的所有值)
2、为了适用于GB2312,文件名、input的值全部转URL码,后端再自己解码还原
3、修正了原来的每个文件都是逐个上传的,现在改为一次上传所有文件

2024年2月28日
1、可批量上传文件
2、选择文件后显示文件名、大小、后缀
3、选择文件的时候增加判断和限制,判断和限制的内容为:最大上传文件个数、最大上传文件大小MB、文件后缀

2024年2月27日
1、上传文件为图片时会自动压缩
2、可以设置限制压缩后的最大宽度和最大长度
3、可以设置压缩率是多少
4、如果上传的是假图片,而是其他文件改为图片后缀名的,会提示这个不是图片文件。

前端调用实例:

     

<div id="diva">
			<form id="uploadForm" enctype="multipart/form-data">
				<input type="text" name="name1">
				<span id="xianshi"></span>
				<span id="sxpic"></span>
				<%'最大上传文件数、允许上传的后缀、允许上传的最大MB、选择input的ID、显示位置的ID,显示图片缩略图位置的ID,缩略图最大宽度%>
				<input type="file" name="file" id="fileID" onchange="UpXuanWenJianPD(3,'jpg|pdf|docx|psd|png',10,'fileID','xianshi','sxpic',500)" multiple>
				<%'1上传区域的Div的ID、2Form的ID、3选择input的ID、4上传完跳转的页面,留空就是不跳转、5接收端的页面、6图片压缩后最大长、7宽,8上传成功过POST的地址,9POST输出位置的ID%>
				<input type="submit" value="上传" onclick="ZhangZhiUpPost('diva','uploadForm','fileID','','up.asp',1440,1440,'','aaa');">
				<input type="button" value="清空" onclick="document.getElementById('bbbb').value='';document.getElementById('xianshi').innerHTML='';document.getElementById('sxpic').innerHTML=''">
			</form>
		</div>

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值