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 相关文章推荐
用js实现下载远程文件并保存在本地的脚本
May 06 Javascript
jquery图片延迟加载 前端开发技能必备系列
Jun 18 Javascript
js 控制下拉菜单刷新的方法
Mar 03 Javascript
Javasipt:操作radio标签详解
Dec 30 Javascript
js验证IP及子网掩码的合法性有效性示例
Apr 30 Javascript
js操作iframe父子窗体示例
May 22 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
Jan 03 Javascript
微信小程序 WebSocket详解及应用
Jan 21 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
Jul 24 Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 Javascript
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
Jul 19 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编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
ThinkPHP3.2.2实现持久登录(记住我)功能的方法
2016/05/16 PHP
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
JavaScript中的Math.LOG2E属性使用详解
2015/06/14 Javascript
JavaScript中字面量与函数的基本使用知识
2015/10/20 Javascript
JavaScript解八皇后问题的方法总结
2016/06/12 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
详解用webpack把我们的业务模块分开打包的方法
2017/07/20 Javascript
使用cookie绕过验证码登录的实现代码
2017/10/12 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
2017/12/08 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
vue接入腾讯防水墙代码
2019/05/07 Javascript
vue渲染方式render和template的区别
2020/06/05 Javascript
python实现字符串和日期相互转换的方法
2015/05/13 Python
TensorFlow变量管理详解
2018/03/10 Python
numpy使用fromstring创建矩阵的实例
2018/06/15 Python
Python3.5局部变量与全局变量作用域实例分析
2019/04/30 Python
关于Tensorflow 模型持久化详解
2020/02/12 Python
pandas apply多线程实现代码
2020/08/17 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
澳大利亚家具和家居用品购物网站:Zanui
2018/12/29 全球购物
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
英语老师推荐信
2014/02/26 职场文书
西安导游词
2015/02/12 职场文书
大学生求职简历自我评价
2015/03/02 职场文书
劳动争议仲裁代理词
2015/05/25 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
感恩教师节主题班会
2015/08/12 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
创业计划书之寿司
2019/07/19 职场文书
python3实现Dijkstra算法最短路径的实现
2021/05/12 Python