Dreamweaver PHP 图片上传:

                  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;”

 

源码下载

相册 – 产品图库演示 一文有详细视频演示。