uploadify上传图片(限制最多五张)
项目中遇到图片上传的情况,好多都是使用服务器上传控件进行上传的,很是不爽.
然后在网上找到了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上传图片(限制最多五张)的更多相关文章
- 调试台自动多出现一个'' ,我 用uploadify上传图片时,在给页面写入一个返回值为图片名称的变量的值的时候值的前面始终多出现一个''
对你有助请点赞,请顶,不好请踩------送人玫瑰,手留余香! 15:54 2016/3/12用uploadify上传图片时,在给页面写入一个返回值为图片名称的变量的值的时候值的前面始终多出现一个' ...
- MVC中使用jquery uploadify上传图片报302错误
使用jquery uploadify上传图片报302错误研究了半天,发现我上传的action中有根据session判断用户是否登录,如果没有登录就跳到登陆页,所以就出现了302跳转错误.原来更新了fl ...
- MVC 中使用uploadify上传图片遇到的蛋疼问题
MVC 中使用uploadify上传图片遇到的蛋疼问题 初次使用uploadify上传图片,遇到了一些比较纠结的问题,在这里和大家分享下,有不对的地方还望大神多多指教,希望对刚接触的朋友有所帮助,文采 ...
- 五张图概括 什么是 ASP 、 ASP.NET (Web Pages,Web Forms ,MVC )
当你看懂下面这五张图,我相信你对于学习.NET Web开发路线将不陌生! 来源: http://www.w3 ...
- uploadify上传图片的使用
一:引用jquery.uploadify.js 二:代码 <body> <table> <tr> <td style="width: 15%; te ...
- uploadify上传图片
1.实现源代码 <%@ page language="java" import="java.util.*" pageEncoding="UTF- ...
- ASP.NET-权限管理五张表
ASP.NET 权限管理五张表 权限管理的表(5张表) 每个表里面必有的一些信息 序号 名称 字段 类型 主键 默认值 是否为空 备注 1 用户ID ID INT 是 ...
- uploadify上传图片的类型错误的解决办法
大家在做开发的过程中,相信很多人都会使用到uploadify插件来上传图片,但是这个插件也有不完美的地方. 我曾多次遇到过这样一个问题:上传的图片类型明明是没有问题的,但是在上传的时候总是会报错:图片 ...
- 使用uploadify上传图片时返回“Cannot read property 'queueData' of undefined”
在使用uploadify插件上传图片时,遇到一个比较坑的错误:上传时提示“Cannot read property 'queueData' of undefined”. 遇到这个问题有点无语,因为这个 ...
随机推荐
- Batch file Functions
Quote from: http://ss64.com/nt/syntax-functions.html Batch file Functions Packaging up code into a d ...
- 不对称密钥密码体系之RSA
公钥密码的特性: 1.加密和解密使用不同的钥匙 2.从一个钥匙推出另一个钥匙在计算上不可行 3.每个钥匙都可以做加密和解密 RSA算法: 1978年, MIT三位数学家 R.L.Rivest,A.Sh ...
- ECMA中关于if与else的关系的一句英文,感觉比较经典
Each else for which the choice of assocated if is ambiguous shall be associated with the nearest pos ...
- 《sed的流艺术之四》-linux命令五分钟系列之二十四
本原创文章属于<Linux大棚>博客,博客地址为http://roclinux.cn.文章作者为rocrocket. 为了防止某些网站的恶性转载,特在每篇文章前加入此信息,还望读者体谅. ...
- 初识pngdrive
初识是第一次认识的意思,类似的词还有初见.初遇.初心.初愿.初恋.初吻……梦里相见如初识,很美好的感觉.同样,今天我们要认识的也是一个比较神奇美妙的东西,至少对于程序员来说. 我曾经尝试过很多文件加密 ...
- node.js操作mongoDB数据库
链接数据库: var mongo=require("mongodb"); var host="localhost"; var port=mongo.Connec ...
- 网易邮箱前端Javascript编码规范:基础规范
在多年开发邮箱webmail过程中,网易邮箱前端团队积累了不少心得体会,我们开发了很多基础js库,实现了大量前端效果组件,开发了成熟的opoa框架以及api组件,在此向大家做一些分享.今天想先和大家聊 ...
- Android定时器实现方法[转]
秒,单位毫秒Message message=new Message();message.what=1;handler.sendMessage(message);//发送消息} catch (Inter ...
- asp.net中Web使用Socket
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...
- java 容器类大集结
这个世界是程序员的世界,归根到底是数据的世界,要统治这个世界,首先要学会征服数据. 没有最好的,只有最合适的,如何在不同的环境先选择最优的存储的结构呢?且看下文分解: 以下内容部分来自网络,参考: h ...