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 读取图片文件的大小
Jun 25 Javascript
javascript 简练的几个函数
Aug 29 Javascript
Jquery 插件开发笔记整理
Jan 17 Javascript
Javascript获取当前日期的农历日期代码
Oct 08 Javascript
常用的jQuery前端技巧收集
Dec 24 Javascript
js跨域请求的5中解决方式
Jul 02 Javascript
微信小程序图片宽100%显示并且不变形
Jun 21 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
Jul 11 Javascript
浅谈Node Inspector 代理实现
Oct 19 Javascript
vue 组件中添加样式不生效的解决方法
Jul 06 Javascript
微信小程序实现订单倒计时
Nov 01 Javascript
uniapp 微信小程序 自定义tabBar 导航
Apr 22 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
global.php
2006/12/09 PHP
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
php接口和抽象类使用示例详解
2014/03/02 PHP
简单谈谈PHP中的include、include_once、require以及require_once语句
2016/04/23 PHP
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
JS求平均值的小例子
2013/11/29 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
jQuery切换所有复选框选中状态的方法
2015/07/02 Javascript
Javascript日期格式化format函数的使用方法
2016/08/30 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
2016/12/28 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
2017/02/20 Javascript
Vue制作Todo List网页
2017/04/26 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
JavaScript中arguments和this对象用法分析
2018/08/08 Javascript
Web安全之XSS攻击与防御小结
2018/12/13 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
解决vue打包报错Unexpected token: punc的问题
2020/10/24 Javascript
详解Vue3.0 + TypeScript + Vite初体验
2021/02/22 Vue.js
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
python实现输入任意一个大写字母生成金字塔的示例
2019/10/27 Python
使用CSS3来绘制一个月食图案
2015/07/18 HTML / CSS
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
Servlet方面面试题
2016/09/28 面试题
公司出纳岗位职责
2013/12/07 职场文书
致标枪运动员加油稿
2014/02/15 职场文书
小摄影师教学反思
2014/04/27 职场文书
护士实习求职信
2014/06/22 职场文书
商场周年庆活动方案
2014/08/19 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
导游词之岳阳楼
2019/09/25 职场文书
CSS 新特性 contain控制页面的重绘与重排问题
2021/04/30 HTML / CSS
如何利用pygame实现打飞机小游戏
2021/05/30 Python
git stash(储藏)的用法总结
2022/06/25 Servers