DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> jquery插件uploadify多圖上傳功能實現代碼
jquery插件uploadify多圖上傳功能實現代碼
編輯:關於JavaScript     

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

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved