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

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" />

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>

 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             }

 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     });

 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