今天需要做图片上传与生成缩略图的功能,把代码进行记录如下:
html 视图 ($pic_action_url = $this->createAbsoluteUrl('home/upload');)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="<{$front_public}>js/plugins/ajaxupload/jquery.1.8.js"></script> 7 <script type="text/javascript" src="<{$front_public}>js/plugins/ajaxupload/ajaxupload.js"></script> 8 </head> 9 <body> 10 <div id="content"> 11 <p class="author"></p> 12 <p class="blog"><a href="#">Blog</a></p> 13 </div> 14 15 16 <!-- 图像上传start --> 17 <div class="divMain"> 18 <button id="upload" action_url="<{$pic_action_url}>">文件上传</button> 19 <div class="content"></div> 20 </div> 21 <!-- 图像上传end --> 22 23 <script type="text/javascript"> 24 /* 25 ajaxupload上传 26 */ 27 $(document).ready(function(){ 28 var button = $('#upload'), interval; 29 var fileType = "all",fileNum = "one"; 30 new AjaxUpload(button,{ 31 action: $('#upload').attr('action_url'), 32 name: 'userfile', 33 onSubmit : function(file, ext){ 34 if(fileType == "pic") 35 { 36 if (ext && /^(jpg|png|jpeg|gif)$/.test(ext)){ 37 this.setData({ 38 'info': '文件类型为图片' 39 }); 40 } else { 41 $('<li></li>').appendTo('.files').text('非图片类型文件,请重传'); 42 return false; 43 } 44 } 45 button.text('文件上传中'); 46 if(fileNum == 'one') 47 this.disable(); 48 interval = window.setInterval(function(){ 49 var text = button.text(); 50 if (text.length < 14){ 51 button.text(text + '.'); 52 } else { 53 button.text('文件上传中'); 54 } 55 }, 200); 56 }, 57 onComplete: function(file, response){//上传成功的函数;response代表服务器返回的数据 58 //清楚按钮的状态 59 button.text('文件上传'); 60 window.clearInterval(interval); 61 this.enable(); 62 //修改下方div的显示文字 63 console.log(response); 64 if('success'==response){ 65 $(".content").text("上传成功"); 66 }else{ 67 $(".content").text("上传失败"); 68 } 69 } 70 }); 71 }); 72 </script> 73 </body> 74 75 </html>