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

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

项目文档预览:

1.引用原有css和js

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

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

2.HTML代码:

 <div class="img_setting">
             <div class="pic_demo">
             </div>
             <div class="upload_style">
                 <input type="file" name="upload_file" id="upload_file" />
             </div>

7         </div>

3.为HTML代码添加样式

 1  <style>
 2         .uploadify-queue {
 3             display: none;
 4         }
 5 
 6         .img_setting {
 7             margin:  auto;
 8             padding: 2px;
 9         }
 
         .pic_demo {
             margin:  auto;
             padding: 10px;
             float: left;
         }
 
         .upload_style {
             padding: 10px;
             margin: ;
         }
 
         .imgBox {
             display: inline;
             display: inline-block;
             padding: ;
             position: relative;
             margin:  10px 10px ;
             line-height: 120px;
             background-color: #c2c2c2;
         }
 
             .imgBox p {
                 height: auto;
                 display: none;
                 position: absolute;
                 left: ;
                 bottom: ;
             }
 
             .imgBox input {
                 line-height: 14px;
                 float: left;
                 font-size: 12px;
                 width: 20px;
             }
 
             .imgBox img {
                 width: 130px;
                 max-height: 130px;
                 vertical-align: middle;
             }
 
             .imgBox .editImg {
                 position: absolute;
                 left: ;
                 top: ;
                 width: 30px;
                 height: 30px;
                 line-height: 30px;
                 text-align: center;
                 display: none;
                 border: 1px solid #c2c2c2;
                 background-color: #fff;
                 font-size: 20px;
             }
 
             .imgBox .delImg {
                 position: absolute;
                 right: ;
                 top: ;
                 width: 30px;
                 height: 30px;
                 line-height: 30px;
                 text-align: center;
                 display: none;
                 border: 1px solid #c2c2c2;
                 background-color: #fff;
                 font-size: 20px;
             }

80     </style>

4.配置js:

 1 <script>
 2     $(function () {
 3         var file_count = ;
 4         var num = ;
 5         $("#upload_file").uploadify({
 6             'swf': '../uploadify/uploadify.swf',//指定swf文件
 7             'uploader': '../uploadify/uploadifyUpload.ashx',//调取后台处理方法
 8             'folder': '../UploadFiles/images',//图片保存路径
 9             'fileTypeExts': '*.gif; *.jpg; *.png',//文件上传类型后缀,不符合时有提醒
             'fileSizeLimit': "2MB",//上传文件大小限制数
             'auto': true,//选择后自动上传,默认值为true                
             'multi': false,//设置上传时是否可以选择多个,true可以,false禁止选中多个
             'method': 'post',//提交方式(get或者post),默认是post
             //'buttonText': '选择文件',
             'buttonImage': '../uploadify/image/add.png',
             'width': '128px',
             'height': '128px',
             'removeCompleted': true,
             'removeTimeout': ,
             'uploadLimit': ,//允许连续上传的次数,超过会提示
             'onUploadSuccess': function (file, data, respone) {
                 var arr = data.split('|');
                 var chgDisplay = $('.pic_demo');//div类名
                 picDispaly({
                     div: chgDisplay,
                     url: arr[]
                 });
                 function picDispaly(obj) {
                     var img = new Image();
                     img.src = "../UploadFiles/images/" + obj.url;
                     $(img).attr("data-url", obj.url);
 
                     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>');
                     num += ;
                     file_count += ;
                     imgList.append(img);
                     $(obj.div).append(imgList);
 
                 }
                 chgDisplay.find('.imgBox').mouseenter(function (e) {
                     $(this).find('.delImg,.editImg').show();
                 }).mouseleave(function (e) {
                     $(this).find('.delImg,.editImg,.imgInfo').hide();
                 });
                 chgDisplay.find('.editImg').click(function (e) {
                     $(this).parent().find('.imgInfo').show();
                 });
                 chgDisplay.find('.delImg').click(function (e) {
                     $(this).parent().remove();
                     file_count -= ;
                     if (file_count <= ) {
                         $('#upload_file').show();
                     }
                 });
                 if (file_count > ) {
                     $('#upload_file').hide();
                 }
             },
             'onCancel': function (event, queueId, fileObj, data) {
 
             },
             'onUploadError': function (file, errorCode, errorMsg, errorString) {
 
             }
         });
     });

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"+"\\");
         if (file != null)
         {
             try
             {
 
                 if (!System.IO.Directory.Exists(uploadPath))
                 {
                     System.IO.Directory.CreateDirectory(uploadPath);
                 }
                 DateTime dtnow = System.DateTime.Now;
                 string filename = dtnow.Year.ToString() + dtnow.Month.ToString() + dtnow.Day.ToString() + dtnow.Hour.ToString() + dtnow.Minute.ToString() + dtnow.Second.ToString() + dtnow.Millisecond.ToString();
                 string ExtName = getFileExt(file[].FileName).ToUpper();
                 filename += "." + ExtName;
                 file[].SaveAs(uploadPath + filename);
                 result = "1|" + filename + "";
             }
             catch
             {
                 result = "0|";
             }
         }
         else
         {
             result = "0|";
         }
         context.Response.Write(result); //标志位1标识上传成功,后面的可以返回前台的参数,比如上传后的路径等,中间使用|隔开
     }
     private string getFileExt(string fileName)
     {
         if (fileName.IndexOf(".") == -)
             return "";
         string[] temp = fileName.Split('.');
         return temp[temp.Length - ].ToLower();
     }
  
     public bool IsReusable {
         get {
             return false;
         }
     }
 

51 }

6成果:

uploadify上传图片(限制最多五张)的更多相关文章

  1. 调试台自动多出现一个'&#65279;' ,我 用uploadify上传图片时,在给页面写入一个返回值为图片名称的变量的值的时候值的前面始终多出现一个'&#65279;'

    对你有助请点赞,请顶,不好请踩------送人玫瑰,手留余香! 15:54 2016/3/12用uploadify上传图片时,在给页面写入一个返回值为图片名称的变量的值的时候值的前面始终多出现一个' ...

  2. MVC中使用jquery uploadify上传图片报302错误

    使用jquery uploadify上传图片报302错误研究了半天,发现我上传的action中有根据session判断用户是否登录,如果没有登录就跳到登陆页,所以就出现了302跳转错误.原来更新了fl ...

  3. MVC 中使用uploadify上传图片遇到的蛋疼问题

    MVC 中使用uploadify上传图片遇到的蛋疼问题 初次使用uploadify上传图片,遇到了一些比较纠结的问题,在这里和大家分享下,有不对的地方还望大神多多指教,希望对刚接触的朋友有所帮助,文采 ...

  4. 五张图概括 什么是 ASP 、 ASP.NET (Web Pages,Web Forms ,MVC )

    当你看懂下面这五张图,我相信你对于学习.NET Web开发路线将不陌生!                                               来源: http://www.w3 ...

  5. uploadify上传图片的使用

    一:引用jquery.uploadify.js 二:代码 <body> <table> <tr> <td style="width: 15%; te ...

  6. uploadify上传图片

    1.实现源代码 <%@ page language="java" import="java.util.*" pageEncoding="UTF- ...

  7. ASP.NET-权限管理五张表

    ASP.NET 权限管理五张表 权限管理的表(5张表) 每个表里面必有的一些信息 序号 名称  字段  类型   主键 默认值 是否为空 备注 1  用户ID  ID      INT     是   ...

  8. uploadify上传图片的类型错误的解决办法

    大家在做开发的过程中,相信很多人都会使用到uploadify插件来上传图片,但是这个插件也有不完美的地方. 我曾多次遇到过这样一个问题:上传的图片类型明明是没有问题的,但是在上传的时候总是会报错:图片 ...

  9. 使用uploadify上传图片时返回“Cannot read property 'queueData' of undefined”

    在使用uploadify插件上传图片时,遇到一个比较坑的错误:上传时提示“Cannot read property 'queueData' of undefined”. 遇到这个问题有点无语,因为这个 ...

随机推荐

  1. std::map的操作:插入、修改、删除和遍历

    using namespace std; std::map<int,int> m_map; 1.添加 for(int i=0;i<10;i++) { m_map.insert(mak ...

  2. 九度OJ 1201 二叉排序树

    题目地址:http://ac.jobdu.com/problem.php?pid=1201 题目描述: 输入一系列整数,建立二叉排序数,并进行前序,中序,后序遍历. 输入: 输入第一行包括一个整数n( ...

  3. 理解Java中的协变返回类型

    在面向对象程序设计中,协变返回类型指的是子类中的成员函数的返回值类型不必严格等同于父类中被重写的成员函数的返回值类型,而可以是更 "狭窄" 的类型. Java 5.0添加了对协变返 ...

  4. linux - 创建用户

    apt-get update apt-get upgrade root@iZ28t2p7lz9Z:~# adduser cuiAdding user `cui' ...Adding new group ...

  5. Servlet 的由来和实现过程

           Servlet 是在服务器上运行的小程序.这个词是在 Java applet的环境中创造的,Java applet 是一种当作单独文件跟网页一起发送的小程序,它通常用于在客户端运行,结果 ...

  6. STM32固件库

    一.STM32固件库开发和传统寄存器开发方式的区别 二.CMSIS标准 CMSIS标准--Cortex Microcontroller Software Interface Standard,是ARM ...

  7. arm-linux-gcc编译器测试

    1.#include <>与#include ""的区别 #include <>只在标准库中搜索头文件,而#include ""首先在用 ...

  8. WARNING L15: MULTIPLE CALL TO SEGMENT

    原网页:http://www.cnblogs.com/CuriosityWzk/archive/2011/12/25/2301090.html WARNING L15: MULTIPLE CALL T ...

  9. Centos开启FTP及用户配置

    vsftpd作为FTP服务器,在Linux系统中是非常常用的.下面我们介绍如何在centos系统上安装vsftp. 什么是vsftpd vsftpd是一款在Linux发行版中最受推崇的FTP服务器程序 ...

  10. App - 版本控制

    /**  版本判断 ***/ NSString *versionKey = @"CFBundleVersion"; // 上一次使用版本号(存储在沙盒中的版本号) NSString ...