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 相关文章推荐
JavaScript事件委托的技术原理探讨示例
Apr 17 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
Sep 16 Javascript
深入理解angularjs过滤器
May 25 Javascript
canvas实现流星雨的背景效果
Jan 13 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
Apr 26 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
Dec 29 Javascript
vscode 开发Vue项目的方法步骤
Nov 25 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 Javascript
详解Vue依赖收集引发的问题
Apr 22 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
Sep 26 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
Feb 28 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
php中替换字符串中的空格为逗号','的方法
2014/06/09 PHP
用php守护另一个php进程的例子
2015/02/13 PHP
img标签中onerror用法
2009/08/13 Javascript
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
javascript动态修改Li节点值的方法
2015/01/20 Javascript
jQuery实现自定义checkbox和radio样式
2015/07/13 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
谈谈javascript中使用连等赋值操作带来的问题
2015/11/26 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
2016/09/06 Javascript
bootstrap日历插件datetimepicker使用方法
2016/12/14 Javascript
Bootstrap Table使用整理(四)之工具栏
2017/06/09 Javascript
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
Vue性能优化的方法
2020/07/30 Javascript
详解nginx配置vue h5 history去除#号
2020/11/09 Javascript
js实现纯前端压缩图片
2020/11/16 Javascript
python中如何使用朴素贝叶斯算法
2017/04/06 Python
python 显示数组全部元素的方法
2018/04/19 Python
Python查找第n个子串的技巧分享
2018/06/27 Python
python数据类型可变不可变知识点总结
2020/03/06 Python
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
2014/05/07 HTML / CSS
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
linux面试题参考答案(10)
2016/10/26 面试题
初二政治教学反思
2014/01/12 职场文书
中青班党性分析材料
2014/02/16 职场文书
职工代表大会主持词
2014/04/01 职场文书
党员干部廉洁承诺书
2014/05/28 职场文书
建设办主任四风问题整改思路和措施
2014/09/20 职场文书
2015年大学辅导员工作总结
2015/05/12 职场文书
MySQL注入基础练习
2021/05/30 MySQL
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android
windows系统安装配置nginx环境
2022/06/28 Servers