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 相关文章推荐
仿163填写邮件地址自动显示下拉(无优化)
Nov 05 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
May 08 Javascript
jqueryUI里拖拽排序示例分析
Feb 26 Javascript
jquery ztree实现模糊搜索功能
Feb 25 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
Mar 30 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
Apr 29 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 Javascript
详解Angular2组件之间如何通信
Jun 22 Javascript
JS使用tofixed与round处理数据四舍五入的区别
Oct 25 Javascript
详解node child_process模块学习笔记
Jan 24 Javascript
vue-router 起步步骤详解
Mar 26 Javascript
微信小程序文字显示换行问题
Jul 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
ThinkPHP php 框架学习笔记
2009/10/30 PHP
PHP中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
2010/07/09 PHP
PHP不使用内置函数实现字符串转整型的方法示例
2017/07/03 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
js url传值中文乱码之解决之道
2009/11/20 Javascript
jquery中对表单的基本操作代码
2010/07/29 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
2014/06/14 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
vue element-ui table表格滚动加载方法
2018/03/02 Javascript
vue2.0 路由不显示router-view的解决方法
2018/03/06 Javascript
vue axios 简单封装以及思考
2018/10/09 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
在vue中使用jsx语法的使用方法
2019/09/30 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
vue.js实现简单的计算器功能
2020/02/22 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
python变量不能以数字打头详解
2016/07/06 Python
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
python实现的读取网页并分词功能示例
2019/10/29 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
Python容器类型公共方法总结
2020/08/19 Python
python实现自动打卡的示例代码
2020/10/10 Python
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
课程改革实施方案
2014/03/16 职场文书
真诚的求职信
2014/07/04 职场文书
竞选班干部演讲稿300字
2014/08/20 职场文书
苏州园林导游词
2015/02/03 职场文书
2015年采购部工作总结
2015/04/23 职场文书
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python
DjangoRestFramework 使用 simpleJWT 登陆认证完整记录
2021/06/22 Python