Document:
http://www.uploadify.com/documentation/
Usage:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<?php for($i = 1; $i <= 6; $i++): $file_name = 'file' . $i; ?> <div class="file-wrap"> <button class="button bt-delete" type="button" data-project-id="<?=val($project, 'id')?>" data-index="<?=$i-1?>">Delete</button> <input id="file_upload<?=$i?>" name="file_upload" type="file" multiple="true" class="bt-select uploadifive"> <span class="file_name"></span> <?php if(isset($files[$i-1]) == false || $files[$i-1] == false){ $class = 'off'; $url = '#'; $name = ''; }else{ $class = ''; $url = $files[$i-1]; $name = basename($url); } ?> <a href="<?=$url?>" class="file-link <?=$class?>" target="_blank"><?=$name?></a> <div id="queue<?=$i?>" class="queue"></div> </div> <?php endfor; ?> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
var upload_app = function(){ function init(){ init_uploadfive(); $('.file-wrap').each(function(index){ var $wrap = $(this); var $link = $wrap.find('.file-link'); //console.log($link.hasClass('off')); if($link.hasClass('off') == true){//no uploaded file upload_switch('on', $wrap); }else{ upload_switch('off', $wrap); } }); $('.bt-delete').on('click', function(e){ var $this = $(this); if(confirm('Are you sure?')){ delete_file($this.data('project-id'), $this.data('index')); } }); } function init_uploadfive(){ <?php $timestamp = time();?> $('.file-wrap').each(function(index){ var $wrap = $(this); $wrap.find('.uploadifive').uploadifive({ 'auto' : true, 'buttonClass': 'button', 'height': 50, 'width': 165, 'queueID' : $wrap.find('.queue').attr('id'), 'buttonText': 'Select', 'checkScript' : false, 'formData' : { 'timestamp' : '<?php echo $timestamp;?>', 'token' : "<?php echo md5('unique_salt' . $timestamp);?>", 'pid': '<?=$project->id?>', 'index': index }, 'uploadScript' : '<?=BASE_URL?>api/members_f/upload_ex_files/', 'onAddQueueItem' : function(file) { $wrap.find('.file_name').show().html(file.name); }, 'onUploadComplete' : function(file, data) { //console.log(file);//File info //console.log(data);//From server data = $.parseJSON(data); if(data == null){ alert(data); return false; } if(data.status == 'fail'){ alert(data.message); return false; } var res = data.response; $wrap.find('.uploadifive').uploadifive('clearQueue'); $wrap.find('.file_name').hide(); $wrap.find('.file-link').show().html(file.name).attr('href', res.file_url); $wrap.find('.uploadifive-button').hide(); $wrap.find('.bt-delete').show(); } }); }); } function upload_switch(mode, $wrap){ if(mode == 'on'){ $wrap.find('.uploadifive-button').show(); $wrap.find('.bt-delete').hide(); $wrap.find('.file-link').hide(); }else{ $wrap.find('.uploadifive-button').hide(); $wrap.find('.bt-delete').show(); $wrap.find('.file-link').show(); } } function delete_file(pid, index){ var params = { pid: pid, index: index } $.post(base_url + 'api/members_f/delete_ex_files', params, function(data){ //console.log(data); if(typeof data.status == 'undefined'){ alert(data); return; } if(data.status == 'fail'){ alert(data.message); return; } var $bt = $('.bt-delete[data-index="' + index + '"]'); var $wrap = $('.file-wrap').has($bt); upload_switch('on', $wrap); }); } return { init: init } }(); |