php 上传图片预览多张,uploadify插件实现多个图片上传并预览

使用uploadify插件可方便实现图片上传功能。兼容ie6、ie7。

上传成功之后使用插件的回调函数读取json数据，根据url实现图片预览。

效果图：

点击浏览文件上传图片，图片依次在右侧显示预览效果。

实现：

json数据格式如下：

页面代码如下：

注：需要引用jQuery.js、uploadify.js、uploadify文件。。uploadify文件下载地址

(最多可上传五张图片)

$(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($(""));

}

'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

});

曾遇到问题：

ie、360浏览器中对json数据检查比较严格，不允许最后一个“，”存在。其它浏览器不会报错，需要注意。

阅读插件文档能力有待提高

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

php 上传图片预览多张,uploadify插件实现多个图片上传并预览相关推荐

ajax上传图片并显示,Ajax实现图片上传并预览
效果见尾部. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图片上传需要一个input:file表单 ...
图片上传本地预览(回显)插件
图片上传本地预览插件,本示例只是静态页面,请下载完整的示例查看请下载完整的js和css样式,以及Demo <html><title>文件上传</title>< ...
html ie8上传图片,图片上传本地预览兼容ie8
工作中遇到的,总结下来了,图片上传本地预览限制图片最大为2M 图片上传本地预览 #preview1{width:260px;height:190px;border:1px solid #000;ove ...
layui上传图片列表展示_ThinkPHP5+Layui实现图片上传加预览功能
html代码上传封面 js代码 var uploadInst = upload.render({ elem:'#cover' ,url:'addCourse' ,accept:'file' // 允 ...
XX健康:预约管理-套餐管理图片上传与预览Redis实现定时清理垃圾图片
1. 新增套餐 1.1 需求分析套餐其实就是检查组的集合,例如有一个套餐为"入职体检套餐",这个体检套餐可以包括多个检查组:一般检查.血常规.尿常规.肝功三项等.所以在添加套餐时 ...
html ajax 图片上传,Ajax实现图片上传并预览功能
先给大家展示下效果图,大家感觉不错,请参考实现代码. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图 ...
uni-app知识点整理（5）- 网络请求、数据缓存、图片上传和预览
目录一.网络请求 1.1 发送get请求二.数据缓存 2.1 uni.setStorage(OBJECT) 2.2 uni.setStorageSync(KEY,DATA) 2.3 uni.get ...
alert()的功能_前端实现简单的图片上传小图预览功能
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
DevExpress控件使用系列--ASPxUploadControl（图片上传及预览）
1.控件功能列表控件展示数据.弹框控件执行编辑操作.Tab控件实现多标签编辑操官方说明 2.官方示例 2.1 ASPxImage http:// ...

php 上传图片预览多张,uploadify插件实现多个图片上传并预览

php 上传图片预览多张,uploadify插件实现多个图片上传并预览相关推荐

最新文章

热门文章

php 上传图片 预览 多张,uploadify插件实现多个图片上传并预览

php 上传图片 预览 多张,uploadify插件实现多个图片上传并预览相关推荐

最新文章

热门文章

php 上传图片预览多张,uploadify插件实现多个图片上传并预览

php 上传图片预览多张,uploadify插件实现多个图片上传并预览相关推荐