`

js控制图片上传

 
阅读更多
<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>
分享到:
评论

相关推荐

    JS控制图片上传大小

    本文将深入探讨如何使用JavaScript(JS)来控制图片上传的大小,确保用户上传的图片符合预设的标准。 一、图片上传前的前端验证 在用户提交图片之前,前端验证是最直接的控制方式。可以使用HTML5的`FileReader API...

    js控制图片上传预览

    ### js控制图片上传预览知识点解析 #### 一、知识点概览 在现代Web开发中,用户交互体验至关重要。为了提升用户体验,很多网站都实现了图片即时预览功能,即当用户选择图片文件后,页面立即显示出该图片的缩略图。...

    CKEditor 控制图片上传

    总结起来,实现CKEditor自主控制图片上传并记录到数据库的过程包括以下步骤: 1. 设置CKEditor配置,指定图片上传URL。 2. 创建后端处理页面(如`upimg.aspx`),处理图片上传请求,保存图片到服务器并返回URL。 3. ...

    JS+asp.net+图片上传+预览+支持多上传+上传前预览

    在本文中,我们将深入探讨如何使用JavaScript(JS)与ASP.NET技术实现图片上传、预览以及支持多文件上传和上传前预览的功能。这个技术组合是现代Web应用中常见的需求,尤其是在用户交互丰富的网站和应用中。 首先,...

    js控制图片大小

    js控制图片大小,并验证图片类型,兼容各浏览器,测试可用

    js验证上传图片 大小 格式

    通过正则表达式、DOM操作以及`Image`对象,我们可以有效地控制和优化用户的图片上传体验,确保只有符合条件的图片才能成功上传至服务器,从而避免了不必要的资源浪费和错误处理。这一系列的技术应用不仅体现了...

    js控制上传图片的大小

    ### JS控制上传图片的大小 在现代Web应用中,对用户上传的图片进行尺寸限制是一项常见且实用的功能。本文将详细介绍如何使用JavaScript来实现这一功能,包括如何检测上传图片的大小,并在不符合要求时给予提示。 #...

    js图片上传并预览图片

    在JavaScript中实现图片上传并预览功能是一项常见的前端任务,主要涉及到HTML5的...以上是实现“js图片上传并预览图片”的主要技术点和步骤,理解并掌握这些知识点,可以构建出稳定且用户体验良好的图片上传预览功能。

    javascript实现图片上传

    JavaScript 图片上传预览功能是网页开发中常见的一种交互设计,允许用户在正式提交文件之前先查看所选图片的效果。这种功能通常用于提高用户体验,确保用户上传的图片符合预期的格式和尺寸。以下是对给定代码的详细...

    js上传图片预览

    在JavaScript中,实现图片上传前的本地预览是一项常见的需求,尤其在网页表单或社交媒体应用中。这个功能允许用户在正式提交之前查看所选图片的效果,提高用户体验。本篇文章将详细探讨如何利用JavaScript实现这一...

    js批量上传图片

    在处理大量图片上传时,需要考虑网络带宽和服务器资源的限制。因此,实现合理的并发控制和错误处理机制非常重要。例如,可以限制同时上传的文件数量,使用队列管理上传任务,并提供进度条显示上传状态。 #### 5. ...

    纯 js 实现得 图片上传预览插件

    【纯 js 实现得 图片上传预览插件】 在前端开发中,图片上传和预览功能是非常常见且重要的一个部分。本项目采用原生JavaScript实现了这样一个图片上传预览插件,无需依赖jQuery或其他第三方库,使代码更加轻量级且...

    js图片压缩上传

    在JavaScript的世界里,图片压缩和上传是Web应用中常见的需求,尤其在用户需要上传大量或大尺寸图片时,为了提高加载速度和节省服务器存储空间,压缩图片变得至关重要。本项目提供的"localResizeIMG3-3.0.20"是一个...

    图片批量上传插件(js)

    1. **JavaScript**:JavaScript是一种广泛使用的客户端脚本语言,它在浏览器环境中运行,可以动态更新网页内容,处理用户交互,如本例中的图片上传。JavaScript是Web开发不可或缺的一部分,它与HTML和CSS一起构成了...

    图片上传js

    本篇文章将深入探讨“图片上传js”的相关知识点,包括其原理、实现方式以及如何利用JavaScript进行优化。 首先,我们需要理解图片上传的基本流程。在用户端,用户选择图片后,JavaScript通常会通过HTML5的File API...

    plupload-2.1.2 js、html压缩图片上传图片神器,手机微信网页上传图片必备神器

    Plupload 是一个强大的多浏览器、多模式的文件上传组件,版本2.1.2尤其针对JavaScript和HTML页面的图片上传进行了优化,特别适用于手机微信网页环境。它支持多种浏览器技术,如Flash, Silverlight, Gears, ...

    oss实现js上传

    在这种场景下,"oss实现js上传"指的是利用JavaScript实现向OSS服务批量上传文件的功能。这种方法能有效减轻服务器压力,提高上传效率,尤其适合处理大流量、高并发的文件上传需求。 一、OSS服务简介 OSS是云计算的...

    好用的js异步上传图片插件,带压缩功能

    在IT行业中,JavaScript(简称js)作为一种广泛应用于前端开发的语言,常常被用来处理与用户交互相关的任务,其中包括图片上传功能。随着互联网应用的发展,用户对上传图片的质量、速度和便捷性有了更高的要求,因此...

    MultiPhotoUpload多图片上传

    综上所述,"MultiPhotoUpload"多图片上传功能涉及到了用户界面设计、图片处理、网络通信、服务器存储、权限控制等多个技术领域,是商户平台提升用户体验的关键一环。理解并掌握这些知识点,对于开发者来说,无论是...

Global site tag (gtag.js) - Google Analytics