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


Posted in Javascript onSeptember 30, 2019

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

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

效果图:

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

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

实现:

json数据格式如下:

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

页面代码如下:

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery ready(fn)事件使用介绍
Aug 21 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
Aug 29 Javascript
JSONP跨域的原理解析及其实现介绍
Mar 22 Javascript
javascript动态判断html元素并执行不同的操作
Jun 16 Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 Javascript
Bootstrap每天必学之折叠
Apr 12 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
Jan 06 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 Javascript
Vue生命周期示例详解
Apr 12 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 Javascript
vue中使用[provide/inject]实现页面reload的方法
Sep 30 #Javascript
JavaScript中的null和undefined用法解析
Sep 30 #Javascript
vue resource发送请求的几种方式
Sep 30 #Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
Sep 30 #Javascript
bootstrap table实现iview固定列的效果实例代码详解
Sep 30 #Javascript
JavaScript实现图片上传并预览并提交ajax
Sep 30 #Javascript
浅探express路由和中间件的实现
Sep 30 #Javascript
You might like
JQuery的ajax获取数据后的处理总结(html,xml,json)
2010/07/14 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
jquery 表格排序、实时搜索表格内容(附图)
2014/05/19 Javascript
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
jQuery树插件zTree使用方法详解
2017/05/02 jQuery
p5.js入门教程之键盘交互
2018/03/19 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
原生js实现点击按钮复制内容到剪切板
2020/11/19 Javascript
Python绘制七段数码管实例代码
2017/12/20 Python
Python实现备份MySQL数据库的方法示例
2018/01/11 Python
使用Python横向合并excel文件的实例
2018/12/11 Python
Python语言快速上手学习方法
2018/12/14 Python
深入浅析Python 中的sklearn模型选择
2019/10/12 Python
解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了
2020/04/07 Python
keras打印loss对权重的导数方式
2020/06/10 Python
python如何构建mock接口服务
2021/01/28 Python
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
商务日语毕业生自荐信范文
2013/11/14 职场文书
三年级音乐教学反思
2014/01/28 职场文书
网吧消防安全制度
2014/01/28 职场文书
中学生打架检讨书
2014/02/10 职场文书
爱护公共设施演讲稿
2014/09/13 职场文书
自习课吵闹检讨书范文
2014/09/26 职场文书
谢师宴邀请函
2015/02/02 职场文书
网络妈妈观后感
2015/06/08 职场文书
经典法律座右铭(50句)
2019/08/15 职场文书
粗暴解决CUDA out of memory的问题
2021/05/22 Python
Python Pycharm虚拟下百度飞浆PaddleX安装报错问题及处理方法(亲测100%有效)
2021/05/24 Python
MySQL非空约束(not null)案例讲解
2021/08/23 MySQL
攻略丨滑雪究竟该选哪款对讲机?
2022/02/18 无线电
Redis+AOP+自定义注解实现限流
2022/06/28 Redis