<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script src="__JS__/baidu-jquery-1.9.0.js" type="text/javascript"></script>
<script src="__JS__/jquery.uploadify.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="__CSS__/uploadify.css">
<style type="text/css">
body {
font: 13px Arial, Helvetica, Sans-serif;
}
#previewImgs{
width:350px;
height:200px;
list-style:none;
}
#previewImgs li{
max-width:350px;
height:auto;
float:left;
margin:3px;
}
uploadify-queue{ display: none;
}
</style>
</head>
<body>
<form>
<div id="queue"></div>
<input id="file_upload" name="file_upload" type="file" multiple="multiple" />
<!--<a href="javascript:$('#file_upload').uploadify('upload', '*')">开始</a>-->
<!--<a href="javascript:$('#file_upload').uploadify('cancel', '*')">取消</a>-->
<div class="preview">
<ul id="previewImgs"></ul>
</div>
<textarea name="uploadfileurl" style="display:none;" id="saveurl"></textarea>
</form>
<script type="text/javascript">
<?php $timestamp = time();?>
$(function() {
$('#file_upload').uploadify({
'formData' : {
'timestamp' : '<?php echo $timestamp;?>',
'token' : '<?php echo md5('unique_salt' . $timestamp);?>'
},
'auto':true, //是否自动开始上传
'debug' : false,// 是否开启浏览器调试
'buttonText' : '请选择图片', // 上传按钮文字
'fileTypeExts':'*.jpg;*.gif;*.bmp;*.png;*.jpeg', //允许的图片类型
'fileSizeLimit' : '2MB', // 允许的单张图片的自大值
'multi' : true, //是否允许多张图片一起上传
'uploadLimit':10,
'removeTimeout':0.5,
'swf' : '__JS__/uploadify.swf',
'uploader' : '{:U("Index/upload")}', //上传的方法,
'onUploadSuccess' : function(file,data,response){
var obj = jQuery.parseJSON(data);
var imgstr = '<li><img src="'+obj.savepath+'" alt="预览图片" width="80" height="70"><a onclick=goDel(this,"'+obj.savepath+'")>删除</a></li>';
$("#previewImgs").append(imgstr);
$("#saveurl").append(obj.savepath+'|');
}
});
});
// ajax 删除预览列表中的一张图片
function goDel(objdom,src){
//先执行ajax删除图片，删除成功之后 删除预览图片
//alert(src);
$(objdom).parent().remove();
//删除预览图片之后还要 修改 id="saveurl" 隐藏域的值，这个是写入到数据库的图片路径
return false;
}
</script>
</body>
</html>控制器<?php
namespace Home\Controller;
use Think\Controller;
class IndexController extends Controller {
public function upload() {
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 ();
$path = "/uploadifys./Uploads"; // 设置项目下上传图片的保存路径
// 判断是否有图
if ($images) {
$info = $images ['Filedata'] ['savepath'] . $images ['Filedata'] ['savename'];
$photo = M ( 'photo' );
$res = $photo->select ();
//$this->display();
// 返回文件地址和名给JS作回调用
$data = array (
'code' => 200,
'savepath' => $path . "/" . $images ['Filedata'] ['savepath'] . $images ['Filedata'] ['savename']
);
} else {
$data = array (
'code' => 201,
'errorMsg' => 'Invalid file type.'
);
}
echo json_encode ( $data );
}
}
} 最佳答案
