<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
</head>
<body>
<script type="text/javascript">
var imgSize = 1024 * 100; //最大100K
function checkImgSize(){
var file = document.getElementById("img");
if(file.value != ""){
//檢測類型
var val = file.value;
if(/^.*?\.(gif|png|jpg|jpeg|bmp)$/.test(val)){
}else{
alert("只能上傳gif, png, jpg, bmp格式的圖片");
return false;
}
var img = new Image();
img.onreadystatechange = function(){
if(img.readyState == "complete"){
if(img.fileSize <=0 || img.fileSize > imgSize){
alert("當前文件大小" + img.fileSize / 1024 + "KB, 超出最大限制 " + imgSize / 1024 + "KB");
}else{
alert("OK");
return true;
}
}
}
img.src = val;
}else{
alert("請選擇上傳的文件!");
return false;
}
}
</script>
<input type="file" id="img" />
<input type="submit" value="上傳" onclick="return checkImgSize()" />
</body>
</html>
==========================
這是另一個，思路一樣，只不過綁定事件是通過 attach 上去的;
判斷上傳圖片大小:
-------------------------
<input id=inp type= "file ">
<button onclick= "ys() "> Test </button>
<script>
var img=null;
function ys()
{
if(img)img.removeNode(true);
img=document.createElement( "img ");
img.style.position= "absolute ";
img.style.visibility= "hidden ";
img.attachEvent( "onreadystatechange ",orsc);
img.attachEvent( "onerror ",oe);
document.body.insertAdjacentElement( "beforeend ",img);
img.src=inp.value;
}
function oe()
{
alert( "cant load img ");
}
function orsc()
{
if(img.readyState!= "complete ")return false;
alert( "圖片大小： "+img.offsetWidth+ "X "+img.offsetHeight);
alert( "圖片尺寸： "+img.fileSize);
}
</script>
-----------------------------
不過這代碼的缺點是還使用插件,所以如果把他防在web里面，是不好用的。文件大小一般還是在服務器端來檢測的.
*****************************
下面的程序是控制圖片顯示大小，可以把圖片等比例縮放:
-----------------------------
<script type= "text/javascript ">
// 讓圖片成比例縮小
function changeImage(ImgD){
var image=new Image();
image.src=ImgD.src;
if(image.width> 185){
ImgD.width=185;
ImgD.height=(185*image.height)/image.width;
image.width=ImgD.width;
image.height=ImgD.height;
}
if(image.height> 169){
ImgD.height=169;
ImgD.width=(169*image.width)/image.height;
image.height = ImgD.height;
image.width = ImgD.width;
}
ImgD.alt = image.width + "× " + image.height;
}
</script>
<img src= " " width= "10 " height= "70 " onload= "changeImage(this) "/>
------------------------------
這個程序需要主義的是，在加載大圖片的時候,要給圖片加載留夠充足的時間否則,會出現錯誤的.
===============================================
文件上傳之前的檢測，通常是通過文件名來判斷文件類型是否合法，但是要想檢測文件的大小很難辦到，除非在本地或者使用控件。不過在IE下img有幾個附加的屬性，如：fileCreatedDate、fileModifiedDate、fileSize、fileUpdatedDate、filters，我們可以通過這些屬性來獲取圖片文件的部分信息，如文件大小，我們用file表單同img標簽結合，就能夠在上傳之前判斷圖片文件的大小是否合法了。
還有一個小小的發現就是，IE下動畫的onload事件是在每次循環開始都觸發，這樣我們可以通過他來達到和js里setInterval()函數一樣的效果，如：
這兩個例子的源代碼如下:
第一個：
限制：
html
- <input type="text" size="4" value="10" name="fileSizeLimit" id="fileSizeLimit"/> K
- <input type="file" name="file1" id="file1" size="40" onchange="changeSrc(this)"/>
- <img src="about:blank" id="fileChecker" alt="test" height="18"/>
<input type="text" size="4" value="10" name="fileSizeLimit" id="fileSizeLimit"/> K
<input type="file" name="file1" id="file1" size="40" onchange="changeSrc(this)"/>
<img src="about:blank" id="fileChecker" alt="test" height="18"/>
js
- <script type="text/javascript">
- var oFileChecker = document.getElementById("fileChecker");
-
- function changeSrc(filePicker)
- {
- oFileChecker.src = filePicker.value;
- }
-
- oFileChecker.onreadystatechange = function ()
- {
- if (oFileChecker.readyState == "complete")
- {
- checkSize();
- }
- }
-
- function checkSize()
- {
- var limit = document.getElementById("fileSizeLimit").value * 1024;
-
- if (oFileChecker.fileSize > limit)
- {
- alert("too large");
- }
- else
- {
- alert("ok");
- }
- }
- </script>
<script type="text/javascript">
var oFileChecker = document.getElementById("fileChecker");
function changeSrc(filePicker)
{
oFileChecker.src = filePicker.value;
}
oFileChecker.onreadystatechange = function ()
{
if (oFileChecker.readyState == "complete")
{
checkSize();
}
}
function checkSize()
{
var limit = document.getElementById("fileSizeLimit").value * 1024;
if (oFileChecker.fileSize > limit)
{
alert("too large");
}
else
{
alert("ok");
}
}
</script>
第二個：
- <img src="monkey.gif" id="monkey" alt="monkey" /> loops: <span id="loopsNum"></span>
-
- <script type="text/javascript">
- var loops = 0;
- document.getElementById("monkey").onload = function ()
- {
- document.getElementById("loopsNum").innerText= loops;
- loops ++;
- }
- </script>
<img src="monkey.gif" id="monkey" alt="monkey" /> loops: <span id="loopsNum"></span>
<script type="text/javascript">
var loops = 0;
document.getElementById("monkey").onload = function ()
{
document.getElementById("loopsNum").innerText= loops;
loops ++;
}
</script>
每三個:
- <script>
- function checkSize(imgObj)
- {
- alert(imgObj.fileSize);
- }
-
- </script>
- <BODY>
- <form id="aform">
- <img id=im onload="checkSize(this)" src="http://www.google.com/logos/winter_holiday05_5res.gif">
- </form>
- </BODY>
<script>
function checkSize(imgObj)
{
alert(imgObj.fileSize);
}
</script>
<BODY>
<form id="aform">
<img id=im onload="checkSize(this)" src="http://www.google.com/logos/winter_holiday05_5res.gif">
</form>
</BODY>
限制文件類型
- function CheckFile(){
- with(document.aform){
- var filepath1 =SourceFile1.value;
- var fileextend1 = filepath1.substring(filepath1.lastIndexOf('.')+1,filepath1.length);
- if(fileextend1==""){
- alert("對不起，你必須選擇一個文件！");
- return false;
- }
- fileextend1 = fileextend1.toLowerCase();
- if(fileextend1 != "xls" && fileextend1 !="txt"){
- alert("對不起，您選擇的文件格式不對，請選擇文本文件(txt)或Excel文件。");
- return false;
- }
- if(fileextend1 == "xls"){
- if(!confirm("上傳EXCEL文件速度將會很慢，我們推薦您使用文本格式。你確定要使用這個文件嗎？")){
- return false;
- }
- }
posted on 2008-12-12 00:15
CopyHoo 閱讀(1124)
評論(0) 編輯 收藏