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 相关文章推荐
JS模拟面向对象全解(二、类型与赋值)
Jul 13 Javascript
js函数的引用, 关于内存的开销
Sep 17 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
Dec 03 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
第一次接触神奇的Bootstrap表单
Jul 27 Javascript
jQuery Ajax全解析
Feb 13 Javascript
vue使用drag与drop实现拖拽的示例代码
Sep 07 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 Javascript
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
Oct 26 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
php记录日志的实现代码
2011/08/08 PHP
smarty中post用法实例
2014/11/28 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
用JS提交参数创建form表单在FireFox中遇到的问题
2013/01/16 Javascript
js遍历、动态的添加数据的小例子
2013/06/22 Javascript
如何使用Javascript获取距今n天前的日期
2013/07/08 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
jQuery菜单插件用法实例
2015/07/25 Javascript
JavaScript核心语法总结(推荐)
2016/06/02 Javascript
jQuery选择器中的特殊符号处理方法
2017/09/08 jQuery
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
vue-router重定向不刷新问题的解决
2018/06/25 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
微信小程序实现星级评价效果
2018/12/28 Javascript
自定义Vue中的v-module双向绑定的实现
2019/04/17 Javascript
使用异步组件优化Vue应用程序的性能
2019/04/28 Javascript
微信小程序8种数据通信的方式小结
2020/02/03 Javascript
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
[57:28]2018DOTA2亚洲邀请赛 4.6 淘汰赛 TNC vs Liquid 第一场
2018/04/10 DOTA
Python命名空间详解
2014/08/18 Python
python中的hashlib和base64加密模块使用实例
2014/09/02 Python
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
用Python实现随机森林算法的示例
2017/08/24 Python
python爬虫系列Selenium定向爬取虎扑篮球图片详解
2017/11/15 Python
Python如何处理大数据?3个技巧效率提升攻略(推荐)
2019/04/15 Python
Python 利用高德地图api实现经纬度与地址的批量转换
2019/08/14 Python
python实现猜数游戏
2020/03/27 Python
台湾演唱会订票网站:StubHub台湾
2019/06/11 全球购物
Omio英国:搜索并比较便宜的巴士、火车和飞机
2019/08/27 全球购物
Android interview questions
2016/12/25 面试题
校园安全教育广播稿
2014/02/17 职场文书
经济贸易系毕业生求职信
2014/05/31 职场文书
司考复习计划
2015/01/19 职场文书
七年级作文之环保作文
2019/10/17 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers