Uploadify异步上传图片效果

1、上传插件Uploadify出现Http Error 302错误

http 302是请求被重定向的意思,这就很容易理解了,如果你的uploadify处理上传脚本有session验证,就会出现此错误。

2、Uploadify异步上传图片(TP框架下的源码)

效果:
uploadify

控制器源码:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
class ImageController extends Controller
{
	public function ajaxuploadimage()
	{
		$res = D("UploadImage")->imageUpload();

		if ($res===false) {
			return show(0, '上传失败', '');
		} else{
			return show(1, '上传成功', $res);
		}
	}
}

image.js部分

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/**
 * 图片上传功能
 */
$(function() {
    $('#file_upload').uploadify({
        'swf'      : SCOPE.ajax_upload_swf,
        'uploader' : SCOPE.ajax_upload_image_url,
        'buttonText': '上传图片',
        'fileTypeDesc': 'Image Files',
        'fileObjName' : 'file',
        //允许上传的文件后缀
        'fileTypeExts': '*.gif; *.jpg; *.png',
        'onUploadSuccess' : function(file,data,response) {
            // response true ,false
            if(response) {
                var obj = JSON.parse(data); //由JSON字符串转换为JSON对象
                
                $('#' + file.id).find('.data').html(' 上传完毕');

                $("#upload_org_code_img").attr("src",obj.data);
                $("#file_upload_image").attr('value',obj.data);
                $("#upload_org_code_img").show();
            }else{
                alert('上传失败');
            }
        },
    });
});

上传图片Model类:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/**
 * 上传图片类
 * @author  singwa
 */
class UploadImageModel extends Model {
    private $_uploadObj = '';
    private $_uploadImageData = '';

    const UPLOAD = 'upload';

    public function __construct() {
        $this->_uploadObj = new \Think\Upload();

        $this->_uploadObj->rootPath = './'.self::UPLOAD.'/';
        $this->_uploadObj->subName = date(Y) . '/' . date(m) .'/' . date(d);
    }

    public function imageUpload() {
        $res = $this->_uploadObj->upload();
        // print_r($res);die;

        if($res) {
            return '/02/' .self::UPLOAD . '/' . $res['file']['savepath'] . $res['file']['savename'];
        }else{
            return false;
        }
    }
}

图文解析JavaScript如何实现弹弹球效果的过程

弹弹球的最终效果:
03

本文将用图文的方式,解析实现弹弹球效果的关键代码部分。

如表格所示:
弹弹球效果

参数说明:
box.style.top: 小球距离顶部的距离
speed: 表示小球的速度。(speed += 5) 表示小球每次执行操作的时候,速度加5。这从小球每次的speed值可以很直观的看出,不难理解。

关键在于:这里小球距离地面的高度为100px;所以当box.style.top值为100px时,表名小球触地了,这个时候,speed速度值应该反向。

Select Code
1
2
3
4
if(tmp >= 100) {
	speed = -speed;
	tmp = 100;
}

02

举例:小球下落,每次速度加5,到达地面速度为20。这时速度speed值反向,变成-20;然后speed+=5,此时的速度值为-15(负数表示球的运行方向是:向上)。

向上,直到速度变为0,球在上升到最高后,speed值再变为正数,球下落。

01

JS代码如下:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var box = document.getElementById('box');
var timer;
function start()
{
	var speed = 0;
	if (!timer){
		timer = setInterval(function(){
			speed += 5;
			var tmp = parseInt(box.style.top) + speed;
			if(tmp >= 100) {
				speed = -speed;
				tmp = 100;
			}
			box.style.top = tmp + 'px';
			console.log(box.style.top);
			console.log(timer);
		},100);
	}
}

function stop()
{
	clearInterval(timer);
	timer = undefined;
	console.log(timer);
}

完整源代码:https://github.com/webjust/case-study/blob/master/Javascript/002/jump_ball_javascript.html

JavaScript的setInterval()函数写一个来回移动的小球剖析

小球来回移动实现步骤:

小球来回移动1

原理:通过绝对定位,定位小球相对文档的位置,使用left值定位。所以控制小球来回移动,就是(不停的)改变left值的大小。

setInterval()

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。

我们假设:小球每秒移动一次,移动到100px然后返回,那么left值的变化过程是(单位是px):

0,10,20,30,40,50,60……100 (每次移动累+10)
然后返回
100……60,50,40,30,20,10,0 (每次移动累-10)

小球来回移动2

Select Code
1
2
3
4
5
6
7
8
9
//每次移动的像素的大小
	step = 10;
	num += step;
	if(num==100 || num==0){
		step = -step;
	}

	//小球的left值
	box.style.left = num + "px";

解释:通过在当num值在最大和最小时,step变为正、负数。而变为累加、累减。

代码:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="box" style="left:0;"></div>

	var box = document.getElementById('box');
	var num=0;
	var step = 10;
	setInterval(function(){
		//在console面板输出num值
		console.log(num);
		box.style.left = num + "px";
		num += step;
		
		//在title输出num值
		document.title = box.style.left;
		
		if(num==100 || num==0){
			step = -step;
		}
	},1000);

图片跟随鼠标效果实现步骤详解(源码分享)

演示效果GIF动画:

图片跟随鼠标效果
图片跟随鼠标效果

图片跟随鼠标效果实现步骤:

1、图片绝对定位,通过修改left和top属性,来移动图片
#img{position: absolute; left: 0; top: 0;}

2、获取图片对象
var img = document.getElementById(‘img’);

3、文档的鼠标移动事件,执行函数
document.onmousemove = function(e){执行代码}

4、代码部分为修改图片的属性
img.style.left = e.clientX + ‘px’;
img.style.top = e.clientY + ‘px’;

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#img{position: absolute; left: 0; top: 0; border:1px solid #ccc;}

<img id="img" src="./123.jpg" alt="" width="200" />
<div>X:<span id="xitem">横坐标</span> / Y:<span id="yitem">纵坐标</span></div>
//script代码开始
var img = document.getElementById('img');
var x = document.getElementById('xitem');
var y = document.getElementById('yitem');

document.onmousemove = function(e)
{
img.style.left = e.clientX + 'px';
img.style.top = e.clientY + 'px';

x.innerHTML = e.clientX;
y.innerHTML = e.clientY;
}
//script代码结束

完整源码见:https://github.com/webjust/case-study/tree/master/Javascript/001

新手要掌握的JavaScript的6种调试方式汇总

console.dir() 在控制面板打印数组

1、alert() 弹窗
2、document.write() 打印,致命的问题是代码执行完毕后,会覆盖页面的内容(等同于PHP中的echo)
3、console.log() 在控制台输出内容(在Chrome浏览器中调试)。(不能解析HTML内容)
4、console.dir() 打印数组。(等同于PHP中的print_r)
5、document.title() 在网页的title标签中输出内容。
6、debugger 断点。在调试工具中,点一步执行一步。

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script>
// 1 弹窗
var num = 1;
num++;
alert(num);

// 2 输出内容
document.write(num);

// 3 在控制面板输出内容
var str = 'i love <br>javascript.'	//原样输出
var str = 'i love \njavascript.'	//换行输出
console.log(str);

// 4 在控制面板打印数组
var list = ['zhangsan', 'Guang Zhou', '1990.12.10'];
console.dir(list);

// 5 在网页标题输出
// document.title='JS的5种调试方式';
document.onmousemove = function(e){
	document.title = 'X: ' + e.clientX + ' Y: ' + e.clientY;
}
/*鼠标属性,事件*/

// 6 debugger
debugger;
</script>

学习javascript: 调试onload事件执行时间的小技巧

代码示例如下:

<!DOCTYPE html>
<html>
<head>
    <title>onload事件</title>
    <meta charset=”utf-8″ />
    <script type=”text/javascript”>
        alert(“456”);
        window.onload=function(){    
            alert(“123”);
        }
        alert(“789”);
    </script>
</head>
<body>

</body>
</html>

首先弹出:456;
其次弹出:789;
最后弹出:123;

此例可说明:onload事件是在当页面被完全加载时才执行