依次复制文档里面的内容即可运行..
第一步:引入文档所需的css和js文件
js文件
<script src="__PUBLIC__/uploadify3.1/jquery.js" type="text/javascript"></script>
<script src="__PUBLIC__/uploadify3.1/jquery.uploadify.min.js" type="text/javascript"></script>
css文件
<link rel="stylesheet" type="text/css" href="__PUBLIC__/uploadify3.1/uploadify.css">
本文档的地址只是例子,具体按需要修改。
第二步:放入html文件
<!--上传文件位置-->
<input type="file" name="file_upload" id="file_upload" class="filemove"/>
<!--插入图片位置-->
<!--多图片上传-->
<div class="row img_box" id="img_box"></div>
<!--插入图片位置-->
<!--单图片上传-->
<img id="image" src="" width="130" height="130" border="0" />
第三步:放入js操作文件
<script type="text/javascript">
$(function() {
//选择file文件上传表单
$("#file_upload").uploadify({
//上传字样
'buttonText':'选择上传文件...',
//是否自动上传
'auto':true,
//最大上传数量
'uploadLimit':4,
//设置上传进度显示方式,percentage显示上传百分比
'progressData':'percentage',
//是否开启debug
//'debug':true,
//uploadify.swf 文件的相对路径。
'swf':'__PUBLIC__/uploadify3.1/uploadify.swf',
//后台处理程序的相对路径
'uploader':'{:U("Admin/Article/upload")}',
//当文件上传成功时触发
'onUploadSuccess' : function(file, data, response) {
//单图片上传--给img标签的src属性设置图片路径
//$('#image').attr('src',data);
//多图片上传函数--插入内容
put_img(data);
//单图片上传用函数
put_name(data.substr(29));
},
});
//单图片上传用
//将文件的名字放入id为name的隐藏表单
function put_name(yname){
$("#name").attr("value",yname);
}
//添加图片到img_box
function put_img(savepath){
//var img_url="__ROOT__"+savepath+savename;
//文件路径+文件名字,(从第一位开始)
var img_url=savepath.substr(1);
//文件路径
var img_path = savepath.substr(0,25);
//文件名字,从第一位开始
var img_name = savepath.substr(25);
//插入html内容
var new_img='<div class="col-md-3" style="float:left;width:140;">';
new_img+='<img src="'+img_url+'" alt="test" class="img">';
//删除链接
new_img+='<div class="img_ctrl">';
new_img+='<span class="glyphicon glyphicon-trasha btn" data-toggle="tooltip" data-placement="bottom" title="删除文件" aria-hidden="true" style="width:140;><a id="del">删除</a></span>';
new_img+='</div>';
new_img+='</div>';
$('.img_box').append(new_img);
}
$(".glyphicon-trasha").live("click", function(event) {
//取消事件
event.preventDefault();
//选择本对象的父亲div.col-md-3
var div=$(this).parents('div.col-md-3');
//寻找里面是img类的src属性--即路径信息
var img_url=div.find('.img').attr('src');
$.ajax({
url: '{:U("Admin/Article/delUp",null,false)}',
type: 'POST',
//传送数据数据地址
data: {url: img_url},
//成功返回后执行的函数
success:function(data){
if (!data['status']) {
alert(data['info']);
return false;
}else{
alert(data['info']);
div.fadeOut(2000);
div.remove();
};
}
});
});
});
</script>
第四步:放入后台文件
public function upload(){
if (!empty($_FILES)) {
//引入UploadFile类
import('ORG.Net.UploadFile');
//实例化UploadFile类
$upload = new UploadFile();
$upload->maxSize = 2048000;
$upload->allowExts = array('jpg','jpeg','gif','png');
$upload->savePath = "./Public/uploadifyimages/";
$upload->thumb = true; //设置缩略图
// $upload->imageClassPath = "@.ORG.Image";
$upload->thumbPrefix = "130_"; //生成多张缩略图
$upload->thumbMaxWidth = "130";
$upload->thumbMaxHeight = "130";
$upload->saveRule = uniqid; //上传规则
$upload->thumbRemoveOrigin = true; //删除原图
if(!$upload->upload()){
$this->error($upload->getErrorMsg());//获取失败信息
} else {
$info = $upload->getUploadFileInfo();//获取成功信息
}
echo $info[0]['savepath'].'130_'.$info[0]['savename']; //返回文件名给JS作回调用
}
}