<?php

Currently browsing javascript

如何用javascript判断即将上传的图片大小

在文件上传中一个十分令人烦恼的问题就是如何用javascript获取图片大小,对于BS结构的网站怎样才能在不使用第三方控件的前提下告知用户上传的图片大小是否合适?
首先说第一想法:
在IE下利用内置控件”Scripting.FileSystemObject”,可惜大部分情况下这个操作是不被允许的。因此还是放弃吧。
第二个方法:
利用IMG标签,在IMG标签中有一个属性也是我们很少用到的一个属性:dynsrc
用法是:可以用来插入各种多媒体,格式可以是Wav、Avi、AIFF、AU、MP3、 Ra、Ram等等。url为音频或视频文件及其路径,可以是相对路径或绝对路径
另外要用到的一个属性是fileSize
下面看一下具体的代码:

<html>
<
head>
<
script type=text/javascript>
function getFileSize(filePath)
{
var image=new Image();
image.dynsrc=filePath;
alert(image.fileSize);
}
<
/script>
<
/head>
<
body>
<
input type=file name=file onchange=getFileSize(this.value) />
<
/body>
<
/html>

执行之后可能还有一点点失望。。 ie6正常,ie7+待测。。那就是FF不支持IMG的fileSize属性 - -
美中不足吧,能照顾一部分用户的体验总好过没有吧。

flash与javascript交互注意事项

网上大多都是帮助文档,其实as和js的交互有很多注意事项,来总结一下:
一.flash到javascript

1. getURL方法
getURL(”javascript:s2j_call(’参数’)”,”_self”);

这个是很古老的了,不过发布成player7或之前的版本都可以支持到它,所以几年来一直用它.
不过只能传递字符串参数,只能做些简单的调用.最致命的是,执行这条语句会导致页面正在加载的异步js进程被阻断,所以如果一个页面渲染了一般flash就发出这个事件,那就等着空白页面吧.
所以现在不要再用这条方法了!

2.ExternalInterface接口
ExternalInterface.call(”s2j_call”,参数);

发布成8或更高的版本的flash支持该接口,优点是参数可以为json,object,数组,布尔,字符串等,所以和js交互就很方便了.
而且不会阻碍页面异步js进程.目前都使用该方法.

注意:
当flash和页面跨域时候,页面需要允许flash操控其函数,所以在插入flash时,需要加入
<param name=allowScriptAccess value=always />

二.javascript到flash

这个才是重点,简单的来说,就是在flash里绑定js事件
flash里:
ExternalInterface.addCallback(”j2s_callback”,this, j2s_callback);

function j2s_callback(_p)
{

trace(_p);
}

js里,首先要获得对flash元素的引用,考虑到不同浏览器,需要对object和embed标签都赋予不同的id,然后判断浏览器类型,通过getElementById来获取ref.然后通过ref.j2s_callback来调用flash内方法.

注意:
1.当flash和页面跨域时候,flash里需要加入允许js添加callback的安全许可:
System.security.allowDomain(”域”);

System.security.allowInsecureDomain();

2.由于各个浏览器的缓存机制和页面加载机制都不同,所以不要指望flash在addCallback执行的时候确实相应的js程序已经定义了,如果没有的话,addCallback是不会成功的.
所以,可以设个轮循来检测页面是否初始完成.随便用1.0的语法写一下:
this.onEnterFrame = function()

{
if (ExternalInterface.call(”s2j_check”) == “ok”)

{
ExternalInterface.addCallback(”j2s_callback”,this, j2s_callback);

this.onEnterFrame = null;
}

};

页面:
function s2j_check()

{
return “ok”;

};
function j2s_callback()

{
//to do 调用flash;
};

javascript版本的parse_url函数

在很多时候我们需要通过javascript在页面中获取GET方式传递的各个参数,很可惜javascript没有源生的支持。在PHP中可以通过parse_url函数来获取一个URL中所包含的各个参数及其他信息。以前我写过一个类似parse_url的js函数,不过只是提取参数,其他信息就直接抛弃了。今天看到另外一个比较完全的版本,一起放出来跟大家分享一下吧:)

首先是以前我的版本:

/*
 * @author zhys9
 * @date 20071010
 * @param String string URL
 * @return Object oRs
 * e.g. input: 'http://so.56.com/index?type=video&key=aaa'
 * 		ouput: {'type':video, 'key':'aaa'}
 */
function parse_str(string){
	var a = [];
	var oRs = {};
	var query = string.substr(string.indexOf('?')+1);
	var tmp = query.split('&');
	var k;
	for(var i=0;i<tmp.length;i++){
		a = tmp[i].split('=');
		oRs[a[0]] = a[1];
	}
	return oRs;
}

欠缺的地方就是单纯的字符串解析,没有获取协议、端口、域名、锚点等信息
下面再看一下比较完整的版本:

// This function creates a new anchor element and uses location
// properties (inherent) to get the desired URL data. Some String
// operations are used (to normalize results across browsers).

function parseURL(url) {
    var a =  document.createElement('a');
    a.href = url;
    return {
        source: url,
        protocol: a.protocol.replace(':',''),
        host: a.hostname,
        port: a.port,
        query: a.search,
        params: (function(){
            var ret = {},
                seg = a.search.replace(/^\?/,'').split('&'),
                len = seg.length, i = 0, s;
            for (;i<len;i++) {
                if (!seg[i]) { continue; }
                s = seg[i].split('=');
                ret[s[0]] = s[1];
            }
            return ret;
        })(),
        file: (a.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1],
        hash: a.hash.replace('#',''),
        path: a.pathname.replace(/^([^\/])/,'/$1'),
        relative: (a.href.match(/tp:\/\/[^\/]+(.+)/) || [,''])[1],
        segments: a.pathname.replace(/^\//,'').split('/')
    };
}

比较巧妙的是利用了A标签的DOM属性来获取更多的信息。不过,在document.location对象中包含了所有的信息,只是用这种方法只能获取document.location的信息,不具有更好的通用性。
用法:

var myURL = parseURL('http://zhys9.com:8080/blog/index.php?id=255&m=hello#top');

myURL.file;     // = 'index.php'
myURL.hash;     // = 'top'
myURL.host;     // = 'zhys9.com'
myURL.query;    // = '?id=255&m=hello'
myURL.params;   // = Object = { id: 255, m: hello }
myURL.path;     // = '/blog/index.php'
myURL.segments; // = Array = ['dir', 'index.php']
myURL.port;     // = '8080'
myURL.protocol; // = 'http'
myURL.source;   // = 'http://zhys9.com:8080/blog/index.php?id=255&m=hello#top'

比较完整的这个版本的代码取自:http://james.padolsey.com/javascript/parsing-urls-with-the-dom/