官网demo链接:http://www.uploadify.com/demos/
html:
<div class="dp_jtxx"> <span class="bq_lf bq_sc">形象照</span>
<span class="input-file sc1">
<input type="file" id="shop_image" multiple="true" />
</span>
</div>
需要引入的js、css:
<link type="text/css" rel="stylesheet" href="/public/uploadify/uploadify.css"><script type="text/javascript" src="/public/uploadify/jquery-1.8.2.min.js"></script><script type="text/javascript" src="/public/uploadify/jquery.uploadify.min.js"></script>
JS代码处理:
$(function(){ $('#shop_image').uploadify({ 'formData': { '<?php echo session_name();?>': '<?php echo session_id();?>' }, 'fileTypeDesc': '上传文件', //上传描述 'fileTypeExts': '{$set[' filetype ']}', 'swf': "__HOME__/uploadify/uploadify.swf", 'uploader': "{:U('auth_image')}", //后台处理图片路径 'buttonText': '', 'buttonClass':'Hui-iconfont', 'fileSizeLimit': '20000000KB', 'uploadLimit': 5, //文件允许上传数量 'width': 120, 'height': 40, 'marginLeft':150, 'multi': true, //false不允许上传多张图片 'auto': true, 'buttonCursor': 'hand', 'uploadLimit' : 3, //允许上传文件个数 'queueID' : 'some_file_queue', 'successTimeout': 10, //等待服务器响应时间 'removeTimeout': 0.2, //成功显示时间 'onFallback':function(){ alert("您未安装FLASH控件,无法上传图片!请安装FLASH控件后再试。"); }, 'onUploadSuccess': function(file, data, response) { //alert(data) data = $.parseJSON(data); var Image = "<img src='" + data.thumbpath + "' class='img' style='width:200px;height:150px;'/>\ <input type='hidden' name='auth_image[]' id='' value='" + data.imgpath + "' />\ <a style='position:absolute;top:50px;right:100px;' thumbpath='" + data.thumbpath + "' imgpath='" + data.imgpath + "' href='javascript:;' class='del'>X</a>"; if($("a[class=del]").length>=3){ alert("暂不支持3条以上!"); }else{ $(".sc1").append(Image); } } });})//删除图片 $(function () { $(".del").live('click',function () { var path = $(this).attr('imgpath'); var thumbpath = $(this).attr('thumbpath'); var del = $(this); del.parent().find("img").remove(); del.parent().find("input").remove(); del.remove(); }) })
php后台处理图片返回JSON数据:
public function auth_image(){ $upload = new \Think\Upload(); $upload->exts = array('jpg', 'gif', 'png', 'jpeg'); $upload->rootPath = './Uploads/'; $upload->savePath = '/image/auth/'; if (!is_dir($upload->savePath)) { mkdir($upload->savePath,0777,TRUE); } $info = $upload->upload(); if(!$info) { echo json_encode($upload->getError()); }else{ // 上传成功 $info['Filedata']['savepath'] = str_replace('image', 'Uploads/image', $info['Filedata']['savepath']); $path = $info['Filedata']['savepath'] . $info['Filedata']['savename']; $image = new \Think\Image(); $image->open('.'.$path); $thumbpath = '.'.$info['Filedata']['savepath'] . $info['Filedata']['savename']; $image->thumb(140, 84)->save($thumbpath); $path = ltrim($path,'.'); $thumbpath = ltrim($thumbpath,'.'); $data = array( 'imgpath' =>$path, 'thumbpath' => $thumbpath ); echo json_encode($data); }}