今天需要做图片上传与生成缩略图的功能,把代码进行记录如下:

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>
View Code

相关文章: