jquery插件uploadify多图上传功能实现代码


Posted in Javascript onAugust 12, 2016

本文实例为大家分享了uploadify多图上传具体实现代码,可动态添加上传框,供大家参考,具体内容如下

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>UploadiFive Test</title>
<script src="jquery2.js" type="text/javascript"></script>
<script src="jquery.uploadify.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="uploadify.css">
<style type="text/css">
body {
 font: 13px Arial, Helvetica, Sans-serif;
}
 
</style>
</head>
 
<body>
 <h1>Uploadify Demo</h1>
 <div class='upload'>
  
  <form>
   <div class='form_file'>
    
    <div class='file'>
     
     <input id="file_upload1" name="file_upload" type="file" multiple="true">
     
    </div>
   </div>
  </form>
  
 </div>
  
  
 <a href="javascript:;" class="clickUpload"> 点击 </a>
  
  
 
 <script type="text/javascript">
  
  
   
  <?php $timestamp = time();?>
  $(function() {
    
   var i=2;
   $('.clickUpload').click(function(){
    var html='';
    html+='<div class="file"><input id="file_upload'+i+'" name="file_upload" type="file" multiple="true"></div>';
     
    $('.form_file').append(html);
       
     $('#file_upload'+i).uploadify({
       
      'formData'  : {
       'timestamp' : '<?php echo $timestamp;?>',
       'token'  : '<?php echo md5('unique_salt' . $timestamp);?>'
      },
       
      'swf'  : 'uploadify.swf', 
      'uploader' : 'uploadify.php', 
      'width'   : '120',
       
       
      'fileTypeExts': '*.gif; *.jpg; *.png',
      'buttonText': '上传图片',
       
      'removeCompleted' : false,
       
      'multi' : true, //允许多图上传
       
       
       
      //上传成功后执行
      'onUploadSuccess': function (file, data, response) {
       $('#' + file.id).find('.data').html(' 上传完毕');
      }
      
      
     });
    i++;
   })
    
    
    
   $('#file_upload1').uploadify({
     
    'formData'  : {
     'timestamp' : '<?php echo $timestamp;?>',
     'token'  : '<?php echo md5('unique_salt' . $timestamp);?>'
    },
     
    'swf'  : 'uploadify.swf', 
    'uploader' : 'uploadify.php', 
    'width'   : '120',
     
     
    'fileTypeExts': '*.gif; *.jpg; *.png',
    'buttonText': '上传图片',
     
    'removeCompleted' : false,
     
    'multi' : true, //允许多图上传
     
     
     
    //上传成功后执行
    'onUploadSuccess': function (file, data, response) {
     $('#' + file.id).find('.data').html(' 上传完毕');
    }
     
     
   });
 
    
  });
   
 
   
 </script>
</body>
</html>

更多精彩内容,请点击《jQuery上传操作汇总》,进行深入学习和研究。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于Web标准的UI组件 — 树状菜单(2)
Sep 18 Javascript
javascript字典探测用户名工具
Oct 05 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
Jan 10 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
Jan 17 Javascript
js添加table的行和列 具体实现方法
Jul 22 Javascript
js 3种归并操作的实例代码
Oct 30 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
Aug 12 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
Aug 28 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
Jan 18 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
Feb 18 Javascript
深入理解js中this的用法
May 28 Javascript
LayUI表格批量删除方法
Aug 15 Javascript
Javascript中的对象和原型(二)
Aug 12 #Javascript
JavaScript中的对象和原型(一)
Aug 12 #Javascript
JavaScript中对象的不同创建方法
Aug 12 #Javascript
酷! 不同风格页面布局幻灯片特效js实现
Feb 19 #Javascript
JS+CSS3模拟溢出滚动效果
Aug 12 #Javascript
JS中script标签defer和async属性的区别详解
Aug 12 #Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 #Javascript
You might like
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
PHP 图片上传代码
2011/09/13 PHP
PHP json_decode函数详细解析
2014/02/17 PHP
php 根据自增id创建唯一编号类
2017/04/06 PHP
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
2007/03/06 Javascript
jQuery 入门讲解1
2009/04/15 Javascript
jquery pagination插件实现无刷新分页代码
2009/10/13 Javascript
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
用jquery实现等比例缩放图片效果插件
2010/07/24 Javascript
nodejs实用示例 缩址还原
2010/12/28 NodeJs
基于jquery的分页控件(C#)
2011/01/06 Javascript
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
2020/09/12 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
plupload+artdialog实现多平台上传文件
2016/07/19 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
2020/10/27 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
对python3 urllib包与http包的使用详解
2018/05/10 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
写一个方法,输入一个文件名和一个字符串,统计这个字符串在这个文件中出现的次数
2016/04/13 面试题
开办化妆品公司创业计划书
2013/12/26 职场文书
反腐倡廉演讲稿
2014/05/22 职场文书
模范班主任事迹材料
2014/12/17 职场文书
2015年中学图书馆工作总结
2015/07/22 职场文书
庆祝教师节主题班会
2015/08/17 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL
Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案
2022/04/20 Python
Python使用openpyxl模块处理Excel文件
2022/06/05 Python