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中不等于的代码是什么怎么写
Dec 29 Javascript
js实现屏幕自适应局部代码分享
Jan 30 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
Apr 29 Javascript
深入分析下javascript中的[]()+!
Jul 07 Javascript
JavaScript实现的多个图片广告交替显示效果代码
Sep 04 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
May 26 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
Aug 17 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
React实践之Tree组件的使用方法
Sep 30 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
React冒泡和阻止冒泡的应用详解
Aug 18 Javascript
react+antd 递归实现树状目录操作
Nov 02 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使用者状态管理功能的应用
2006/10/09 PHP
COM in PHP (winows only)
2006/10/09 PHP
收藏的PHP常用函数 推荐收藏保存
2010/02/21 PHP
基于php下载文件的详解
2013/06/02 PHP
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
php中删除、清空session的方式总结
2015/10/09 PHP
JS获取URL中的参数数据
2013/12/05 Javascript
JavaScript学习笔记之JS对象
2015/01/22 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
JavaScript入门系列之知识点总结
2016/03/24 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
Angularjs上传图片实例详解
2017/08/06 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
layer.open关闭父窗口 以及调用父页面的方法
2018/08/17 Javascript
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
总结4个方面优化Vue项目
2019/02/11 Javascript
uniapp实现可以左右滑动导航栏
2020/10/21 Javascript
[03:10]超级美酒第四天 fy拉比克秀 大合集
2018/06/05 DOTA
[01:04:08]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第一场 12.16
2020/12/18 DOTA
使用Python的Django框架实现事务交易管理的教程
2015/04/20 Python
打包发布Python模块的方法详解
2016/09/18 Python
Python三级目录展示的实现方法
2016/09/28 Python
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
Python实现返回数组中第i小元素的方法示例
2017/12/04 Python
Python3简单实例计算同花的概率代码
2017/12/06 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
Python基于Opencv来快速实现人脸识别过程详解(完整版)
2019/07/11 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
保安自我鉴定范文
2013/12/08 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
莫言诺贝尔获奖感言(全文)
2015/07/31 职场文书
MySQL如何使用使用Xtrabackup进行备份和恢复
2021/06/21 MySQL