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开发技术大全-第3章 js数据类型
Jul 03 Javascript
js二级地域选择的实现方法
Jun 17 Javascript
JavaScript 学习笔记之操作符(续)
Jan 14 Javascript
详细分析JavaScript变量类型
Jul 08 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
AngularJS基础 ng-submit 指令简单示例
Aug 03 Javascript
Jquery组件easyUi实现选项卡切换示例
Aug 23 Javascript
AngularJs bootstrap详解及示例代码
Sep 01 Javascript
JS实现百度搜索接口及链接功能实例代码
Feb 02 Javascript
React中的refs的使用教程
Feb 13 Javascript
原生JS实现九宫格抽奖
Sep 13 Javascript
利用js实现简单开关灯代码
Nov 23 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页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
PHP中对数组的一些常用的增、删、插操作函数总结
2015/11/27 PHP
php版微信开发之接收消息,自动判断及回复相应消息的方法
2016/09/23 PHP
highchart数据源纵轴json内的值必须是int(详解)
2017/02/20 PHP
Html中JS脚本执行顺序简单举例说明
2010/06/19 Javascript
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
Javascript动态绑定事件的简单实现代码
2010/12/25 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
2011/09/01 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
2012/08/14 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
JS实现简单的天数计算器完整实例
2017/04/28 Javascript
javascript回调函数的概念理解与用法分析
2017/05/27 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
详解vue-admin和后端(flask)分离结合的例子
2018/02/12 Javascript
详解vue组件基础
2018/05/04 Javascript
基于axios 解决跨域cookie丢失的问题
2018/09/26 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
javascript实现切割轮播效果
2019/11/28 Javascript
JS实现进度条动态加载特效
2020/03/25 Javascript
JavaScript异步操作的几种常见处理方法实例总结
2020/05/11 Javascript
[29:10]Ti4 冒泡赛第二天 NEWBEE vs Titan 3
2014/07/15 DOTA
python处理RSTP视频流过程解析
2020/01/11 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
英国现代市场:ARKET
2019/04/10 全球购物
abstract是什么意思
2012/02/12 面试题
2014年两会学习心得范例
2014/03/17 职场文书
大学生应聘导游自荐信
2014/06/02 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书
法人代表证明书格式
2014/10/01 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle