发布于 2017-03-21 02:48:45 | 204 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的jQuery示例,程序狗速度看过来!

jQuery javascript框架

jQuery是一个兼容多浏览器的javascript框架,核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave Methvin率领团队进行开发。


这篇文章主要为大家详细介绍了jquery插件uploadify多图上传功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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>

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



最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务