Dreamweaver PHP 图片上传
在 Dreamweaver 中,上传图片到数据可以比较容易的实现,但是上传到一个目录,需要借助于 PHP 代码来实现。我的学生大多没有 PHP 的编程经验,所以很多能用几句 PHP 实现的功能,我也尽量想办法通过 Dreamweaver 来实现。这是一个简单的教程,只是用于演示,附件的代码在实际应用中还需要进一步完善。
本教程在 Dreamweaver 8.0.2 下完成,IE 6+ 测试通过,Firefox 不支持预览本地图片,未做测试。
数据表结构
CREATE TABLE IF NOT EXISTS `product` ( `id` int(11) NOT NULL, `title` varchar(50) NOT NULL, `type` varchar(30) DEFAULT NULL, `price` decimal(7,2) NOT NULL, `pic` varchar(50) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8;
演示
适用
我的学生
网页制作的初学者
缺乏 PHP 和 Mysql 编程基础
目的
练习 Dreamweaver 服务器行为应用
了解 PHP 文件上传
了解 Javascript 表单验证和 Dom 操作
==== 12月13日 修正在 IE7 下图片预览问题 ====
在 IE6 中,可以通过更改 img 的 src 属性实现本地图片预览,但是 IE7 也限制了本地图片的预览,这种办法已无法显示图片。不过 IE7 下可以用 AlphaImageLoader 来实现图片的预览。AlphaImageLoader 可以在对象容器边界内,在对象的背景和内容之间显示一张图片。
需要修改的内容:
1. 在HTML 的 head 区域加入 CSS 代码:
#imgview { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); width:160px; height:160px; background:url(upload/none.jpg) no-repeat; }
如不需要显示默认图片,可。删除 “background:url(upload/none.jpg) no-repeat;” 一行。
2. 把 “<img id=”imgview” src=”upload/none.jpg” />” 修改为 “<div id=”imgview”></div>”
3. Javascript 代码中的 “y.src = x.value;” 修改为 “y.filters.item(“DXImageTransform.Microsoft.AlphaImageLoader”).src = x.value;”
相册 – 产品图库演示 一文有详细视频演示。