小编给大家分享一下如何实现Uploadify多上传图片插件，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
html:
计算
安全
数据库
网络和加速
企业服务
<div class="row cl">
<label class="form-label col-3"><span class="c-red">*</span>图片：</label>
<div class="formControls col-5">
<input id="file_upload" name="file_upload" type="file" multiple="true">
<div class="preview">
<ul id="previewImgs"></ul>
</div>
<div class="col-4"> </div>
</div>
</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代码处理：
<script type="text/javascript">
$(function() {
$('#file_upload').uploadify({
'formData': {
'<?php echo session_name();?>': '<?php echo session_id();?>'
},
'uploader' : '{:U("uploads")}'+ "?session_id=<?php echo session_id(); ?>",
'swf' : '__PUBLIC__/admin/uploadify/uploadify.swf',
'auto' : true, //是否自动开始上传
'debug' : false,// 是否开启浏览器调试
'buttonText' : '请选择图片', // 上传按钮文字
'fileTypeExts' :'*.jpg;*.gif;*.bmp;*.png;*.jpeg', //允许的图片类型
'fileSizeLimit' : '2MB', // 允许的单张图片的自大值
'multi' : false, //是否允许多张图片一起上传
'uploadLimit' :6, //允许上传数量
'successTimeout' : 10, //等待服务器响应时间
'removeTimeout' : 0.2, //成功显示时间
'onFallback':function(){
alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");
},
'onUploadSuccess' : function(file,data,response){
//alert(data);
data = $.parseJSON(data);
var Image = "<div style='display:inline-block'><img src='" + data.thumbpath + "' class='img' style='margin-top:10px;width:150px;height:150px;position: relative;'/>\
<input type='hidden' name='image[]' id='image' value='" + data.imgpath + "' />\
<a class='del' onclick=goDel(this,'"+data.thumbpath+"')>删除</a></div>";
if($("a[class=del]").length>=5){
alert("暂不支持5条以上！");
}else{
$("#previewImgs").append(Image);
}
}
});
});
// ajax 删除预览列表中的一张图片
function goDel(objdom,src){
$(objdom).parent().remove();
return false;
}
</script>php后台处理图片返回JSON数据：
public function uploads (){
$upload = new \Think\Upload();
$upload->exts = array('jpg', 'gif', 'png', 'jpeg');
$upload->rootPath = './Uploads/';
$upload->savePath = '/image/commodity/';
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(148, 84)->save($thumbpath);
$path = ltrim($path,'.');
$thumbpath = ltrim($thumbpath,'.');
$data = array(
'imgpath' =>$path,
'thumbpath' => $thumbpath
);
echo json_encode($data);
}
}注意 : 上传图片时session丢失, 只需要修改thinkphp/conf/convention.php中，将VAR_SESSION_ID前面的注释去掉，然后在客户端这样配置下：
'uploader' : '{:U("uploads")}'+ "?session_id=<?php echo session_id(); ?>",以上是“如何实现Uploadify多上传图片插件”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
