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实现DIV的一些简单控制
Jun 04 Javascript
window.addeventjs事件驱动函数集合addEvent等
Feb 19 Javascript
基于jQuery实现点击同时更改两个iframe的网址
Jul 01 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
Mar 29 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
Mar 04 Javascript
jquery $.each()使用探讨
Sep 23 Javascript
探讨js中的双感叹号判断
Nov 11 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 Javascript
设置点击文本框或图片弹出日历控件的实现代码
May 12 Javascript
vue基础之模板和过滤器用法实例分析
Mar 12 Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 Javascript
微信小程序 下拉刷新及上拉加载原理解析
Nov 06 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
Drupal 添加模块出现莫名其妙的错误的解决方法(往往出现在模块较多时)
2011/04/18 PHP
PHP中strtr与str_replace函数运行性能简单测试示例
2019/06/22 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
动态为事件添加js代码示例
2009/02/15 Javascript
js window.print实现打印特定控件或内容
2013/09/16 Javascript
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
jQuery仿京东商城楼梯式导航定位菜单
2016/07/25 Javascript
老生常谈combobox和combotree模糊查询
2017/04/17 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
2018/05/27 Javascript
详解angular部署到iis出现404解决方案
2018/08/14 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
2020/08/19 Javascript
Python的类实例属性访问规则探讨
2015/01/30 Python
Python简单调用MySQL存储过程并获得返回值的方法
2015/07/20 Python
python 上下文管理器使用方法小结
2017/10/10 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
python交互模式下输入换行/输入多行命令的方法
2019/07/02 Python
python Django框架实现web端分页呈现数据
2019/10/31 Python
使用Python开发个京东上抢口罩的小实例(仅作技术研究学习使用)
2020/03/10 Python
基于pytorch中的Sequential用法说明
2020/06/24 Python
python 如何用urllib与服务端交互(发送和接收数据)
2021/03/04 Python
Agoda西班牙:全球特价酒店预订
2017/06/03 全球购物
房地产融资计划书
2014/01/10 职场文书
公司会议策划方案
2014/05/17 职场文书
售后客服工作职责
2014/06/16 职场文书
三八节标语
2014/06/27 职场文书
创先争优活动个人总结
2015/03/04 职场文书
工作失职检讨书范文
2015/05/05 职场文书
四大名著读书笔记
2015/06/25 职场文书
2015教师节通讯稿
2015/07/20 职场文书
python中的被动信息搜集
2021/04/29 Python
深入解析MySQL索引数据结构
2021/10/16 MySQL