uploadify上传图片(限制最多五张)

项目中遇到图片上传的情况,好多都是使用服务器上传控件进行上传的,很是不爽.

然后在网上找到了uploadify的方法,自己总结和修改后分享给大家.

 项目文档预览:

 

 

1.引用原有css和js

1   <link href= " ../css/bootstrap.min.css " rel= " stylesheet " />
2     <link href= " ../css/bootstrap-responsive.min.css " rel= " stylesheet " />
3     <script src= " ../uploadify/jquery-1.4.1.min.js "></script>
4     <link href= " ../uploadify/uploadify.css " rel= " stylesheet " />

5     <script src="../uploadify/jquery.uploadify.min.js"></script> 

 

 2.HTML代码:

1 <div  class= " img_setting ">
2             <div  class= " pic_demo ">
3             </div>
4             <div  class= " upload_style ">
5                 <input type= " file " name= " upload_file " id= " upload_file " />
6             </div>

7         </div> 

 3.为HTML代码添加样式

 1  <style>
 2         .uploadify-queue {
 3             display: none;
 4         }
 5 
 6         .img_setting {
 7             margin:  0 auto;
 8             padding: 2px;
 9         }
10 
11         .pic_demo {
12             margin:  0 auto;
13             padding: 10px;
14              float: left;
15         }
16 
17         .upload_style {
18             padding: 10px;
19             margin:  0;
20         }
21 
22         .imgBox {
23             display: inline;
24             display: inline-block;
25             padding:  0;
26             position: relative;
27             margin:  0 10px 10px  0;
28             line-height: 120px;
29             background-color: #c2c2c2;
30         }
31 
32             .imgBox p {
33                 height: auto;
34                 display: none;
35                 position: absolute;
36                 left:  0;
37                 bottom:  0;
38             }
39 
40             .imgBox input {
41                 line-height: 14px;
42                  float: left;
43                 font-size: 12px;
44                 width: 20px;
45             }
46 
47             .imgBox img {
48                 width: 130px;
49                 max-height: 130px;
50                 vertical-align: middle;
51             }
52 
53             .imgBox .editImg {
54                 position: absolute;
55                 left:  0;
56                 top:  0;
57                 width: 30px;
58                 height: 30px;
59                 line-height: 30px;
60                 text-align: center;
61                 display: none;
62                 border: 1px solid #c2c2c2;
63                 background-color: #fff;
64                 font-size: 20px;
65             }
66 
67             .imgBox .delImg {
68                 position: absolute;
69                 right:  0;
70                 top:  0;
71                 width: 30px;
72                 height: 30px;
73                 line-height: 30px;
74                 text-align: center;
75                 display: none;
76                 border: 1px solid #c2c2c2;
77                 background-color: #fff;
78                 font-size: 20px;
79             }

80     </style> 

 4.配置js:

 

 1 <script>
 2     $(function () {
 3          var file_count =  1;
 4          var num =  1;
 5         $( " #upload_file ").uploadify({
 6              ' swf ':  ' ../uploadify/uploadify.swf ', // 指定swf文件
 7              ' uploader ':  ' ../uploadify/uploadifyUpload.ashx ', // 调取后台处理方法
 8              ' folder ':  ' ../UploadFiles/images ', // 图片保存路径
 9              ' fileTypeExts ':  ' *.gif; *.jpg; *.png ', // 文件上传类型后缀,不符合时有提醒
10              ' fileSizeLimit ':  " 2MB ", // 上传文件大小限制数
11              ' auto ':  true, // 选择后自动上传,默认值为true                
12              ' multi ':  false, // 设置上传时是否可以选择多个,true可以,false禁止选中多个
13              ' method ':  ' post ', // 提交方式(get或者post),默认是post
14               // 'buttonText': '选择文件',
15              ' buttonImage ':  ' ../uploadify/image/add.png ',
16              ' width ':  ' 128px ',
17              ' height ':  ' 128px ',
18              ' removeCompleted ':  true,
19              ' removeTimeout ':  1,
20              ' uploadLimit ':  999, // 允许连续上传的次数,超过会提示
21              ' onUploadSuccess ': function (file, data, respone) {
22                  var arr = data.split( ' | ');
23                  var chgDisplay = $( ' .pic_demo '); // div类名
24                 picDispaly({
25                     div: chgDisplay,
26                     url: arr[ 1]
27                 });
28                 function picDispaly(obj) {
29                      var img =  new Image();
30                     img.src =  " ../UploadFiles/images/ " + obj.url;
31                     $(img).attr( " data-url ", obj.url);
32 
33                      var imgList = $( ' <div class="imgBox"><span class="editImg"><i class="icon icon-edit"></i></span><span class="delImg">×</span><p class="imgInfo"><input type="text" name="imgIndex" class="imgIndex" value=" ' + num +  ' " /></p></div> ');
34                     num +=  1;
35                     file_count +=  1;
36                     imgList.append(img);
37                     $(obj.div).append(imgList);
38 
39                 }
40                 chgDisplay.find( ' .imgBox ').mouseenter(function (e) {
41                     $( this).find( ' .delImg,.editImg ').show();
42                 }).mouseleave(function (e) {
43                     $( this).find( ' .delImg,.editImg,.imgInfo ').hide();
44                 });
45                 chgDisplay.find( ' .editImg ').click(function (e) {
46                     $( this).parent().find( ' .imgInfo ').show();
47                 });
48                 chgDisplay.find( ' .delImg ').click(function (e) {
49                     $( this).parent().remove();
50                     file_count -=  1;
51                      if (file_count <=  5) {
52                         $( ' #upload_file ').show();
53                     }
54                 });
55                  if (file_count >  5) {
56                     $( ' #upload_file ').hide();
57                 }
58             },
59              ' onCancel ': function ( event, queueId, fileObj, data) {
60 
61             },
62              ' onUploadError ': function (file, errorCode, errorMsg, errorString) {
63 
64             }
65         });
66     });

67 </script> 

 5.原有的jquery.uploadify.min.js中略微有些修改:

 

 

 6.一般处理程序uploadifyUpload.ashx:

 1  public  class uploadifyUpload : IHttpHandler {
 2 
 3      public  void ProcessRequest(HttpContext context)
 4     {
 5         context.Response.ContentType =  " text/plain ";
 6         context.Response.Charset =  " utf-8 ";
 7         HttpFileCollection file = HttpContext.Current.Request.Files;
 8          string result =  "";
 9          string uploadPath = context.Server.MapPath( " ../UploadFiles/images "+ " \\ ");
10          if (file !=  null)
11         {
12              try
13             {
14 
15                  if (!System.IO.Directory.Exists(uploadPath))
16                 {
17                     System.IO.Directory.CreateDirectory(uploadPath);
18                 }
19                 DateTime dtnow = System.DateTime.Now;
20                  string filename = dtnow.Year.ToString() + dtnow.Month.ToString() + dtnow.Day.ToString() + dtnow.Hour.ToString() + dtnow.Minute.ToString() + dtnow.Second.ToString() + dtnow.Millisecond.ToString();
21                  string ExtName = getFileExt(file[ 0].FileName).ToUpper();
22                 filename +=  " . " + ExtName;
23                 file[ 0].SaveAs(uploadPath + filename);
24                 result =  " 1| " + filename +  "";
25             }
26              catch
27             {
28                 result =  " 0| ";
29             }
30         }
31          else
32         {
33             result =  " 0| ";
34         }
35         context.Response.Write(result);  // 标志位1标识上传成功，后面的可以返回前台的参数，比如上传后的路径等，中间使用|隔开
36     }
37      private  string getFileExt( string fileName)
38     {
39          if (fileName.IndexOf( " . ") == - 1)
40              return  "";
41          string[] temp = fileName.Split( ' . ');
42          return temp[temp.Length -  1].ToLower();
43     }
44  
45      public  bool IsReusable {
46          get {
47              return  false;
48         }
49     }
50 

51 }

 

 6成果: