<script language=javascript>
//建立一个图像对象
var ImgObj = new Image();
//全部图片格式类型
var AllImgExt = ".jpg|.jpeg|.gif|.bmp|.png|"
//全局变量 图片相关属性
var FileObj, ImgFileSize, ImgWidth, ImgHeight, FileExt, ErrMsg, FileMsg, HasCheked, IsImg
//以下为限制变量
//允许上传的文件类型 ?为无限制 每个扩展名后边要加一个"|" 小写字母表示
var AllowExt = ".jpg|.gif|.doc|.txt|.png|"
//var AllowExt=0
var AllowImgFileSize = 1024; //允许上传图片文件的大小 0为无限制 单位:KB
var AllowImgWidth = 2000; //允许上传的图片的宽度 ?为无限制 单位:px(像素)
var AllowImgHeight = 2000; //允许上传的图片的高度 ?为无限制 单位:px(像素)
HasChecked = false;
function CheckProperty(obj) //检测图像属性
{
FileObj = obj;
if (ErrMsg != "") //检测是否为正确的图像文件 返回出错信息并重置
{
ShowMsg(ErrMsg, false);
return false; //返回
}
if (ImgObj.readyState != "complete") //如果图像是未加载完成进行循环检测
{
setTimeout("CheckProperty(FileObj)", 500);
return false;
}
//取得图片文件的大小
ImgFileSize = Math.round(ImgObj.fileSize / 1024 * 100) / 100;
ImgWidth = ImgObj.width //取得图片的宽度
ImgHeight = ImgObj.height; //取得图片的高度
document.getElementById('picWidth').value = ImgWidth;
document.getElementById('picHeight').value = ImgHeight;
document.getElementById('picSize').value = ImgFileSize;
document.getElementById('picType').value = FileExt;
FileMsg = "\n图片大小:" + ImgWidth + "*" + ImgHeight + "px";
FileMsg = FileMsg + " 图片文件大小:" + ImgFileSize + "Kb";
FileMsg = FileMsg + " 图片文件扩展名:" + FileExt;
if (AllowImgWidth != 0 && AllowImgWidth < ImgWidth)
ErrMsg = ErrMsg + "\n图片宽度超过限制。请上传宽度小于" + AllowImgWidth
+ "px的文件,当前图片宽度为" + ImgWidth + "px";
if (AllowImgHeight != 0 && AllowImgHeight < ImgHeight)
ErrMsg = ErrMsg + "\n图片高度超过限制。请上传高度小于" + AllowImgHeight
+ "px的文件,当前图片高度为" + ImgHeight + "px";
if (AllowImgFileSize != 0 && AllowImgFileSize < ImgFileSize)
ErrMsg = ErrMsg + "\n图片文件大小超过限制。请上传小于" + AllowImgFileSize
+ "KB的文件,当前文件大小为" + ImgFileSize + "KB";
if (ErrMsg != "")
ShowMsg(ErrMsg, false);
else
ShowMsg(FileMsg, true);
}
ImgObj.onerror = function() {
ErrMsg = '\n图片格式不正确或者图片已损坏!'
}
//显示提示信息 tf=true 显示文件信息 tf=false 显示错误信息 msg-信息内容
function ShowMsg(msg, tf) {
msg = msg.replace("\n", "<li>");
msg = msg.replace(/\n/gi, "<li>");
if (!tf) {
document.all.UploadButton.disabled = true;
FileObj.outerHTML = FileObj.outerHTML;
MsgList.innerHTML = msg;
HasChecked = false;
} else {
document.all.UploadButton.disabled = false;
if (IsImg)
PreviewImg.innerHTML = "<img src='"+ImgObj.src+"' >"
else
PreviewImg.innerHTML = "非图片文件";
MsgList.innerHTML = msg;
HasChecked = true;
}
}
function CheckExt(obj) {
ErrMsg = "";
FileMsg = "";
FileObj = obj;
IsImg = false;
HasChecked = false;
document.getElementById('PreviewImg').innerHTML = "预览区";
if (obj.value == "")
return false;
document.getElementById('MsgList').innerHTML = "文件信息处理中...";
document.all.UploadButton.disabled = true;
FileExt = obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();
//判断文件类型是否允许上传
if (AllowExt != 0 && AllowExt.indexOf(FileExt + "|") == -1) {
ErrMsg = "\n该文件类型不允许上传。请上传 " + AllowExt + " 类型的文件,当前文件类型为"
+ FileExt;
ShowMsg(ErrMsg, false);
return false;
}
if (AllImgExt.indexOf(FileExt + "|") != -1) //如果图片文件,则进行图片信息处理
{
IsImg = true;
ImgObj.src = obj.value;
CheckProperty(obj);
return false;
} else {
FileMsg = "\n文件扩展名:" + FileExt;
ShowMsg(FileMsg, true);
}
}
function SwitchUpType(tf) {
if (tf)
str = '<input type="file" name="file1" onchange="CheckExt(this)" style="width:180px;">'
else
str = '<input type="text" name="file1" onblur="CheckExt(this)" style="width:180px;">'
document.all.file1.outerHTML = str;
document.all.UploadButton.disabled = true;
MsgList.innerHTML = "";
}
</script>
分享到:
相关推荐
本文将深入探讨如何使用JavaScript(JS)来控制图片上传的大小,确保用户上传的图片符合预设的标准。 一、图片上传前的前端验证 在用户提交图片之前,前端验证是最直接的控制方式。可以使用HTML5的`FileReader API...
### js控制图片上传预览知识点解析 #### 一、知识点概览 在现代Web开发中,用户交互体验至关重要。为了提升用户体验,很多网站都实现了图片即时预览功能,即当用户选择图片文件后,页面立即显示出该图片的缩略图。...
总结起来,实现CKEditor自主控制图片上传并记录到数据库的过程包括以下步骤: 1. 设置CKEditor配置,指定图片上传URL。 2. 创建后端处理页面(如`upimg.aspx`),处理图片上传请求,保存图片到服务器并返回URL。 3. ...
在本文中,我们将深入探讨如何使用JavaScript(JS)与ASP.NET技术实现图片上传、预览以及支持多文件上传和上传前预览的功能。这个技术组合是现代Web应用中常见的需求,尤其是在用户交互丰富的网站和应用中。 首先,...
js控制图片大小,并验证图片类型,兼容各浏览器,测试可用
通过正则表达式、DOM操作以及`Image`对象,我们可以有效地控制和优化用户的图片上传体验,确保只有符合条件的图片才能成功上传至服务器,从而避免了不必要的资源浪费和错误处理。这一系列的技术应用不仅体现了...
### JS控制上传图片的大小 在现代Web应用中,对用户上传的图片进行尺寸限制是一项常见且实用的功能。本文将详细介绍如何使用JavaScript来实现这一功能,包括如何检测上传图片的大小,并在不符合要求时给予提示。 #...
在JavaScript中实现图片上传并预览功能是一项常见的前端任务,主要涉及到HTML5的...以上是实现“js图片上传并预览图片”的主要技术点和步骤,理解并掌握这些知识点,可以构建出稳定且用户体验良好的图片上传预览功能。
JavaScript 图片上传预览功能是网页开发中常见的一种交互设计,允许用户在正式提交文件之前先查看所选图片的效果。这种功能通常用于提高用户体验,确保用户上传的图片符合预期的格式和尺寸。以下是对给定代码的详细...
在JavaScript中,实现图片上传前的本地预览是一项常见的需求,尤其在网页表单或社交媒体应用中。这个功能允许用户在正式提交之前查看所选图片的效果,提高用户体验。本篇文章将详细探讨如何利用JavaScript实现这一...
在处理大量图片上传时,需要考虑网络带宽和服务器资源的限制。因此,实现合理的并发控制和错误处理机制非常重要。例如,可以限制同时上传的文件数量,使用队列管理上传任务,并提供进度条显示上传状态。 #### 5. ...
【纯 js 实现得 图片上传预览插件】 在前端开发中,图片上传和预览功能是非常常见且重要的一个部分。本项目采用原生JavaScript实现了这样一个图片上传预览插件,无需依赖jQuery或其他第三方库,使代码更加轻量级且...
在JavaScript的世界里,图片压缩和上传是Web应用中常见的需求,尤其在用户需要上传大量或大尺寸图片时,为了提高加载速度和节省服务器存储空间,压缩图片变得至关重要。本项目提供的"localResizeIMG3-3.0.20"是一个...
1. **JavaScript**:JavaScript是一种广泛使用的客户端脚本语言,它在浏览器环境中运行,可以动态更新网页内容,处理用户交互,如本例中的图片上传。JavaScript是Web开发不可或缺的一部分,它与HTML和CSS一起构成了...
本篇文章将深入探讨“图片上传js”的相关知识点,包括其原理、实现方式以及如何利用JavaScript进行优化。 首先,我们需要理解图片上传的基本流程。在用户端,用户选择图片后,JavaScript通常会通过HTML5的File API...
Plupload 是一个强大的多浏览器、多模式的文件上传组件,版本2.1.2尤其针对JavaScript和HTML页面的图片上传进行了优化,特别适用于手机微信网页环境。它支持多种浏览器技术,如Flash, Silverlight, Gears, ...
在这种场景下,"oss实现js上传"指的是利用JavaScript实现向OSS服务批量上传文件的功能。这种方法能有效减轻服务器压力,提高上传效率,尤其适合处理大流量、高并发的文件上传需求。 一、OSS服务简介 OSS是云计算的...
在IT行业中,JavaScript(简称js)作为一种广泛应用于前端开发的语言,常常被用来处理与用户交互相关的任务,其中包括图片上传功能。随着互联网应用的发展,用户对上传图片的质量、速度和便捷性有了更高的要求,因此...
综上所述,"MultiPhotoUpload"多图片上传功能涉及到了用户界面设计、图片处理、网络通信、服务器存储、权限控制等多个技术领域,是商户平台提升用户体验的关键一环。理解并掌握这些知识点,对于开发者来说,无论是...