返回顶部
首页 > 资讯 > 前端开发 > JavaScript >基于jquery实现的上传图片及图片大小验证、图片预览效果代码
  • 780
分享到

基于jquery实现的上传图片及图片大小验证、图片预览效果代码

上传图片图片大小验证预览 2022-11-21 22:11:48 780人浏览 独家记忆
摘要

Jquery实现上传图片及图片大小验证、图片预览效果代码 上传图片验证 */ function submit_upload_picture(){ var file = $('fil

Jquery实现上传图片及图片大小验证、图片预览效果代码
上传图片验证

*/
function submit_upload_picture(){
var file = $('file_c').value;
if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file)){
alert("图片类型必须是.gif,jpeg,jpg,png中的一种")
}else{
$('both_fORM').action="file!upload.action";
$('both_form').submit();
$('insert_img').sethtml('<img src="/file/imgs/upload/202211/21/0i0uxn02nxa.jpg"/>');
$('display_div').setstyle('display', 'block');
$('upload_div').setstyle('display', 'none');
}
}

图片类型与大小的验证

//实例二
function validate_edit_loGo(a){
var file = $('file').value;
if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file)){
alert("图片类型必须是.gif,jpeg,jpg,png中的一种")
if(a==1){
return false;
}
}else{
var image = new image();
image.src = file;
var height = image.height;
var width = image.width;
var filesize = image.filesize;
$('beforeend').src=file;
$('div_regi_right').setstyle('display', 'block');
if(width>80 && height>80 && filesize>102400){
alert('请上传80*80像素 或者大小小于100k的图片');
if(a==1){
return false;
}
}
if(a==1){
return true;
}
}
}

图片预览

//实例三
function viewimg(index) {
var name = 'uploadimg' + index;
var imgup = $(name);
var imgpath = getpath(imgup);
var local = imgup.value;
var point = local.lastindexof(".");
//判断上传文件大小
var img = document.createelement("img");
img.src = local;
var filesize = img.filesize;
img.onload = function(){filesize=this.filesize;}
if(img.filesize>5242880){
alert("图片文件过大!");
return false;
}
//判断是否是图片格式
var imgname = imgup.value.substring(imgup.value.lastindexof("."), imgup.value.length);
imgname = imgname.tolowercase();
if ((imgname != ".jpg") && (imgname != ".gif") && (imgname != ".jpeg") && (imgname != ".png") && (imgname != ".bmp")) {
alert("u8bf7u9009u62e9u56feu7247u6587u4ef6uff0cu8c22u8c22!");
imgup.focus();
//清空file里面的值www.3ppt.com
imgup.select();
document.selection.clear();
} else {
//显示图片
document.getelementbyid("sig_preview"+index).innerhtml = "<img src='" + imgpath + "' border=0 width=200 height=150><img src='images/u51.png' width='16' height='14' onclick='delimage(" + index + ");' />";
}
if (index >=3){
var cnt = index + 1;
$("img" + cnt).style.display = "";
}
}

--结束END--

本文标题: 基于jquery实现的上传图片及图片大小验证、图片预览效果代码

本文链接: https://lsjlt.com/news/173164.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 基于jquery实现的上传图片及图片大小验证、图片预览效果代码
    jquery实现上传图片及图片大小验证、图片预览效果代码 上传图片验证 复制代码 代码如下: */ function submit_upload_picture(){ var fil...
    99+
    2022-11-21
    上传图片 图片大小验证 预览
  • javascript实现上传图片并预览的效果实现代码
    今天用alphaimageloader滤镜的src属就是其中的主角它将使用绝对或相对url地址指定背景图像。假如忽略此参数,滤镜将不会作用。复制代码 代码如下: <!docty...
    99+
    2022-11-21
    上传图片 预览
  • Vue+SSM实现图片上传预览效果
    现在的需求是:有一个上传文件按钮,当我们点击按钮时,可以选择需要上传的文件,确定后图片显示在界面上。 说明:本项目前端使用的Vue,后台用的SSM搭建的,服务器是Tomcat,数据库...
    99+
    2024-04-02
  • 基于SpringBoot实现图片上传及图片回显
    目录数据库脚本框架搭建pom.xml 依赖配置文件实体类DAOService文件上传添加页面控制器列表页面运行测试问题全局异常处理1. @ControllerAdvice + @Ex...
    99+
    2024-04-02
  • jQuery实现图片放大预览实现原理及代码
    对于一些比较小的图片,通过鼠标移动到图片上进行放大显示,原理很简单,就是将图片显示的尺寸变大后放在浏览器的一个指定位置,从而实现图片的放大预览。以下是代码: 复制代码 代码如下: &...
    99+
    2022-11-15
    jQuery 图片放大预览
  • jQuery如何实现上传图片前预览效果功能
    这篇文章将为大家详细讲解有关jQuery如何实现上传图片前预览效果功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。效果如图:代码如下:<!doctype ...
    99+
    2024-04-02
  • jQuery如何实现鼠标滑过预览图片大图效果
    这篇文章将为大家详细讲解有关jQuery如何实现鼠标滑过预览图片大图效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。需求是这样的:  鼠标移动的图片上,同时显...
    99+
    2024-04-02
  • JS+HTML5如何实现上传图片预览效果
    这篇文章给大家分享的是有关JS+HTML5如何实现上传图片预览效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。示例代码如下:<!DOCTYPE HTML>...
    99+
    2024-04-02
  • vue.js如何实现图片上传预览及图片更换功能
    这篇文章将为大家详细讲解有关vue.js如何实现图片上传预览及图片更换功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。效果图:样式以及效果图一并展示1.HTML<...
    99+
    2024-04-02
  • 基于Flutter实现图片选择和图片上传
    目录内容简介图片选择插件权限申请UI 改造图片上传内容简介 本篇将介绍 Flutter 中如何完成图片上传,以及上传成功后的表单提交。涉及的知识点如下: 图片选择插件wechat_a...
    99+
    2024-04-02
  • vue.js如何实现图片转Base64上传图片并预览
    这篇文章主要为大家展示了“vue.js如何实现图片转Base64上传图片并预览”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue.js如何实现图片转Base6...
    99+
    2024-04-02
  • thinkphp5加layui实现图片上传功能(带图片预览)
    目录1、引入文件2、HTML部分3、功能实现4、后台处理图片上传保存内容网站中很多表单都会用到上传图片,logo,照片,用户也会上传图片,这个时候网站就需要一个上传图片的功能,而且在...
    99+
    2023-03-11
    thinkphp5加layui实现图片上传功能 layui图片上传 thinkphp5图片上传
  • html5以及jQuery如何实现本地图片上传前的预览代码
    这篇文章主要为大家展示了html5以及jQuery如何实现本地图片上传前的预览代码,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“html5以及jQuery如何实现本地图片上传前的预览代码”这篇文章...
    99+
    2023-06-06
  • vue如何实现图片预览放大以及缩小效果
    这篇文章主要介绍了vue如何实现图片预览放大以及缩小效果的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue如何实现图片预览放大以及缩小效果文章都会有所收获,下面我们一起来看看吧。vue图片预览放大以及缩小在v...
    99+
    2023-07-05
  • jquery如何实现图片上传前本地预览
    这篇文章主要为大家展示了“jquery如何实现图片上传前本地预览”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jquery如何实现图片上传前本地预览”这篇文章吧...
    99+
    2024-04-02
  • nodejs 图片预览和上传的示例代码
    本文介绍了nodejs 图片预览和上传的示例代码,分享给大家,具体如下: 效果如下: 前言 一般在上传图片之前需要暂存在本地预览一下。 前端图片预览用的是 FileReader的readAsDataUR...
    99+
    2022-06-04
    示例 上传 代码
  • html5怎么实现图片上传预览
    这篇文章主要介绍“html5怎么实现图片上传预览”,在日常操作中,相信很多人在html5怎么实现图片上传预览问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”html5怎么实现图...
    99+
    2024-04-02
  • java实现上传图片并压缩图片大小功能
    Thumbnailator 是一个优秀的图片处理的Google开源Java类库。处理效果远比Java API的好。从API提供现有的图像文件和图像对象的类中简化了处理过程,两三行代码就能够从现有图片生成处理后的图片,且允许微调图片的生成方式...
    99+
    2023-05-31
    java 上传图片 压缩图片
  • Vue实现图片预览效果实例(放大、缩小、拖拽)
    前言 这张图是显示的图片放大的一个预览情况,这里是参考预览操作实现的一个背景为黑色的部分,上层的图片可实现滚轮放大或者点击上部的放大镜图标进行放大,代码是基于Ant Design V...
    99+
    2024-04-02
  • 基于jquery实现滚轮放大缩小图片的函数代码
    以下是一份基本的jquery实现滚轮放大缩小图片的函数代码 (1)滚轮控制放大缩小图片效果如图: 实现代码如下: <!DOCTYPE html> <html>...
    99+
    2023-05-18
    js滚轮放大缩小图片 jquery滚轮放大缩小
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作