uploadify插件实现多个图片上传并预览
更新时间：2019年09月30日 10:02:08 作者：啦啦噜啦啦
这篇文章主要为大家详细介绍了uploadify插件实现多个图片上传并预览，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用uploadify插件可方便实现图片上传功能。兼容ie6、ie7。
上传成功之后使用插件的回调函数读取json数据，根据url实现图片预览。
效果图：
点击浏览文件上传图片，图片依次在右侧显示预览效果。
实现：
json数据格式如下：
页面代码如下：
注：需要引用jQuery.js、uploadify.js、uploadify文件。。uploadify文件下载地址
<html>
<head>
<script type="text/javascript" src="static/js/jquery.js">"></script>
<script type="text/javascript" src="static/js/jquery.select.js">"></script>
</head>
<body>
<div class="file-box">
<div id="divPreview">
<span style="float:left">（最多可上传五张图片）</span>
</div>
<input type="file" name="file" class="file" id="fileField" />
<input type="hidden" name="hash" id="hash" value="xoxo"/>
</div>
<script>
$(function() {
$("#fileField").uploadify({
'height' : 30,
'swf' : '<?php echoYii::app()->request->baseUrl ?>/static/uploadify/uploadify.swf?var='+(newDate()).getTime(),
'uploader' :'index.php?r=upload/uploadimage',
'width' : 120,
'onUploadSuccess' : function(file, data, response) {
var info = eval("("+data+")");
if(info.err==1){alert(info.msg);} //如果图片过大或者格式错误弹出错误信息
else{
$("#divPreview").append($("<img src='" + info.img + "'/>"));
$("#divPreview").append($("<input type='hidden' name='imgId[]' value='" + info.imgId + "'/>"));
}
},
'buttonText' : '浏览文件',
'uploadLimit' : 5, //上传最多图片张数
'removeTimeout' : 1,
'preventCaching': true, //不允许缓存
'fileSizeLimit' : 4100, //文件最大
'formData' : { '<?php echosession_name();?>' : '<?php echosession_id();?>','hash':$("#hash").val() } //hash
});
$("#SWFUpload_0").css({ //设置按钮样式，根据插件文档进行修改
'position' :'absolute',
'top': 20,
'left': 35,
'z-index' : 1
});
});
</script>
</body>
</html>
曾遇到问题：
ie、360浏览器中对json数据检查比较严格，不允许最后一个“，”存在。其它浏览器不会报错，需要注意。
阅读插件文档能力有待提高
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Immerjs 是一个用于管理 JavaScript 不可变数据结构的库，它可以帮助我们更轻松地处理状态的变化，并减少冗余代码。本文就来带大家揭秘如何利用Immerjs实现不可变数据，感兴趣的可以了解一下2023-04-04
这篇文章主要介绍了JavaScript实现沿五角星形线摆动的小圆实例详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要介绍了javascript实现简单的全选和反选功能的相关资料,需要的朋友可以参考下2016-01-01
url里的参数内容包含&符合，我有两种方法解决一是：在页面用JS转码;二是：在后端处理，另外还有网络分享的一些方法，感兴趣的朋友可以参考下哈2013-04-04
这篇文章主要介绍了JS实现的找零张数最小问题,涉及javascript数学运算相关操作技巧,需要的朋友可以参考下2017-11-11
这篇文章主要为大家详细介绍了JS实现进度条动态加载特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
下面小编就为大家带来一篇js 创建对象 经典模式全面了解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要介绍了微信小程序项目实践之验证码倒计时功能,当用户点击发送验证码按钮，按钮背景变色，不可点击，显示倒计时文字，需要的朋友可以参考下2018-07-07
这篇文章介绍了javascript与cookie 的问题，有需要的朋友可以参考一下2013-11-11
详解addEventListener的三个参数之useCapture
本文主要给大家介绍的是addEventListener的三个参数之中的useCapture参数的使用及示例分享，有需要的小伙伴参考下2015-03-03
最新评论