这个是一个提交页面，内有缩略图和图片二两个图片字段，用了两次当然如果你有一次的话直接删除就好了，点击上传后自动上传并传递地址到表单的字段里- -~我习惯这么写，修改的时候可以通过直接删除单元格文字进行删除。
首先下载最新版的Uploadify并放到网站根目录里，下载好后什么都不用改直接放根目录就可以了，当然如果你知道每个文件的作用可以删除，很多文章有讲这里就不做解答了
放好后是这样的，这里我手动创建了一个Uploads文件夹用来存放图片
接下来进入视图里的添加页面
引用Uploadify插件的CSS,JS以及初始化脚本JQ库自己下载也引用进来，这里我需要用到两次所以写了两个JS，只有一个缩略图的话图二可去掉，注意路径引用对，可以预览下通过谷歌的F12查看下是否引用对路径了，JS参数里的'uploader' : '{:U("News/uploadify")}', 实际是一个地址，上传后直接跳转到News控制器里的uploadify方法，接下来会给出这个方法。onUploadSuccess的目的是上传完毕后更新预览图像为新上传的图像并赋值给表单里的单元格用来插入数据库。
<link rel="stylesheet" href="__ROOT__/uploadify/uploadify.css">
<js file='__ROOT__/uploadify/jquery-1.7.1.js'/>
<js file='__ROOT__/uploadify/jquery.uploadify.min.js'/>
<script type="text/javascript">
//上传插件
$(function() {
$('#file_upload').uploadify({
'swf' : '__ROOT__/uploadify/uploadify.swf',
'uploader' : '{:U("News/uploadify")}',
'buttonText' : '缩略图上传',
'onUploadSuccess' : function(file, data, response) {
$('#img').attr('src','__ROOT__/Uploads/'+ data);
$('#images').val(data);
},
});
//图二
$('#file_upload2').uploadify({
'swf' : '__ROOT__/uploadify/uploadify.swf',
'uploader' : '{:U("News/uploadify")}',
'buttonText' : '图片二上传',
'onUploadSuccess' : function(file, data, response) {
$('#img2').attr('src','__ROOT__/Uploads/'+ data);
$('#images2').val(data);
},
});
});
</script>接下来在BODY下边插入以下代码用来展示图像以及上传按钮可以设置下默认图我直接用的官方的LOGO- -~<!---->
<img id="img" src="http://www.thinkphp.cn/Public/new/img/header_logo.png" width="130" height="130" border="0" />
<input id="file_upload" name="file_upload" type="file" multiple="true" value="" />
<img id="img2" src="http://www.thinkphp.cn/Public/new/img/header_logo.png" width="130" height="130" border="0" />
<input id="file_upload2" name="file_upload2" type="file" multiple="true" value="" />
<!---->下边是控制器里的代码我用的是TP自带的上传所以就不多说了直接上了//图像上传
public function uploadify()
{
if (!empty($_FILES)) {
//图片上传设置
$config = array(
'maxSize' => 3145728,
'savePath' => '',
'saveName' => array('uniqid',''),
'exts' => array('jpg', 'gif', 'png', 'jpeg'),
'autoSub' => true,
'subName' => array('date','Ymd'),
);
$upload = new \Think\Upload($config);// 实例化上传类
$images = $upload->upload();
//判断是否有图
if($images){
$info=$images['Filedata']['savepath'].$images['Filedata']['savename'];
//返回文件地址和名给JS作回调用
echo $info;
}
else{
//$this->error($upload->getError());//获取失败信息
}
}
}OK到此为止应该就能实现了通过扩展其实还可以用作前台的头像上传只不过这里没有做图片裁剪有兴趣的朋友可以研究下。第一次发贴，不知道有没有遗漏的地方如果做的时候有什么不明白的可以百度搜索若水印象找我的Q或直接留言我会经常看的。虽然图片上传不算什么但是估计还是有很多像我一样的新手有疑问，希望能帮到你。写的很详细了就不放出来demo了。上传成功后记得删除下插件目录里没用的文件。
来一张最终效果图
上传时候进度条效果
最后来一张uploadify目录删减后的图
END...
看到很多朋友求打包，那我就打包下的吧，项目是我以前做的半成品，主要代码都在数据库就不给了凑合看吧，主要代码路径
添加页面和修改页面的代码，如果你实在上传不了一定要F12看下源代码里JS的路径是否正确
http://localhost/thinkCMS/index.php/Admin/News/addNews
http://localhost/thinkCMS/index.php/Admin/News/update/id/125
uploadify 目录在根目录里
附件上传总失败- -不知道咋回事，算了确实需要的话百度搜索若水印象找我Q吧，建议还是自己摸索
xia
最佳答案
