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 相关文章推荐
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
Jun 02 Javascript
火狐下table中创建form导致两个table之间出现空白
Sep 02 Javascript
document节点对象的获取方式示例介绍
Dec 24 Javascript
checkbox勾选判断代码分析
Jun 11 Javascript
原生js页面滚动延迟加载图片
Dec 20 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
Jan 20 Javascript
JS简单验证上传文件类型的方法
Apr 17 Javascript
通过构造函数实例化对象的方法
Jun 28 Javascript
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
详解基于vue-cli配置移动端自适应
Jan 13 Javascript
浅谈Angular 观察者模式理解
Nov 01 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 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
基于文本的搜索
2006/10/09 PHP
PHP中cookies使用指南
2007/03/16 PHP
php 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
php中实现用数组妩媚地生成要执行的sql语句
2015/07/10 PHP
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
2009/08/28 Javascript
javascript showModalDialog 内跳转页面的问题
2010/11/25 Javascript
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
JS阻止用户多次提交示例代码
2014/03/26 Javascript
Javascript遍历table中的元素示例代码
2014/07/08 Javascript
jQuery中:visible选择器用法实例
2014/12/30 Javascript
js实现点击切换TAB标签实例
2015/08/21 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
javascript如何创建对象
2016/08/29 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
Angular ng-repeat 对象和数组遍历实例
2016/09/14 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
2018/09/16 Javascript
JS写滑稽笑脸运动效果
2020/05/28 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
python中bisect模块用法实例
2014/09/25 Python
在Python中操作文件之read()方法的使用教程
2015/05/24 Python
Python在线运行代码助手
2016/07/15 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
django基础学习之send_mail功能
2019/08/07 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
写出一个方法实现冒泡排序
2016/07/08 面试题
离开雷锋的日子观后感
2015/06/09 职场文书
社团招新宣传语
2015/07/13 职场文书
欢送领导祝酒词
2015/08/12 职场文书
大学生先进个人主要事迹材料
2015/11/04 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书
python 爬取豆瓣网页的示例
2021/04/13 Python
关于nginx 实现jira反向代理的问题
2021/09/25 Servers