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

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

效果图：

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

实现：

json数据格式如下：

页面代码如下：

注：需要引用jQuery.js、uploadify.js、uploadify文件。。uploadify文件下载地址：http://www.uploadify.com/download/

<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数据检查比较严格，不允许最后一个“，”存在。其它浏览器不会报错，需要注意。

uploadify插件实现多个图片上传并预览的更多相关文章

  1. uploadPreview 兼容多浏览器图片上传及预览插件使用

    uploadPreview兼容多浏览器图片上传及预览插件 http://www.jq22.com/jquery-info2757 Html 代码 <div class="form-gr ...

  2. JQuery插件：图片上传本地预览插件，改进案例一则。

    /* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari *插 ...

  3. 图片上传本地预览。兼容IE7+

    基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...

  4. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  5. ASP.NET MVC图片上传前预览

    回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...

  6. DevExpress控件使用系列--ASPxUploadControl（图片上传及预览）

        1.控件功能     列表控件展示数据.弹框控件执行编辑操作.Tab控件实现多标签编辑操官方说明 2.官方示例       2.1 ASPxImage                http: ...

  7. js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌

    <head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> & ...

  8. file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  9. JS兼容各个浏览器的本地图片上传即时预览效果

    JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

随机推荐

  1. Start of Something New

    Hi Guys This will be the blog of SCaffrey for some time before he creates his own site:) Have a nice ...

  2. js performance

    http://hqman.me/2012/js-module.html http://www.cnblogs.com/snandy/archive/2012/06/06/2536969.html ht ...

  3. document.styleSheets

    伪元素是不能选中的,如果非要改他的样式,两个方法. 静态方法: addClass的时候,新add的class带有新的伪元素. 动态方法: 如果知道它在document.styleSheets对象中的位 ...

  4. Hidden Password

    zoj1729:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=729 题意:就是求字符串的最小表示,模板题. 题解:直接贴模板. ...

  5. MySQL的备份与恢复

    Linux下的mysql的备份与恢复 备份: 比如我们要备份mysql中已经存在的名为linux的数据库,要用到命令mysqldump 命令格式如下: [root@linuxsir01 root]# ...

  6. YII model模型和登陆详解

    模型是 CModel 或其子类的实例.模型用于保持数据以及与其相关的业务逻辑. 模型是单独的数据对象.它可以是数据表中的一行,或者一个用户输入的表单. 数据对象的每个字段对应模型中的一个属性.每个属性 ...

  7. 坑爹的Android Ble 问题记录日志

    开发Ble(公司项目,防丢器)已经有一段时间,由于是第一次接触Ble而网上资料又不多,且android平台自身的差异性,遇到了很多问题.为了将来方便查阅,在此做下记录.1.中兴手机,蓝牙手动断开后,无 ...

  8. 【HDOJ】2389 Rain on your Parade

    读题显然是二分图匹配,看成guest与umbrella的匹配.匈牙利果断TLE了,其实时间卡的相当紧.HK过的,750ms. /* 2389 */ #include <iostream> ...

  9. Linux Kernel 多个本地拒绝服务漏洞

    漏洞名称: Linux Kernel 多个本地拒绝服务漏洞 CNNVD编号: CNNVD-201308-154 发布时间: 2013-08-12 更新时间: 2013-08-12 危害等级:    漏 ...

  10. lemon OA 下阶段工作安排

    lemon OA 下阶段工作安排 经验总结 lemon OA系统作为一个中型的java web系统,在架构上还是有着很好地可学习的地方.但是由于经验不足,过程比较迂回.如果真的有经验的话,应该可以做到 ...