实例介绍
【实例简介】
【实例截图】
【核心代码】
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="upload.aspx.cs" Inherits="upload" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>html5上传多个文件并添加水印</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script> <script src="js/jquery-form.js"></script> <style> body{font-size:12px;} a{text-decoration:none;} a,a:after{-webkit-transition:all 0.3s;-moz-transition:all 0.3s;transition:all 0.3s;} a.btn i{display:block;width:100%;height:100%;position:relative;z-index:1;cursor:pointer;} a.btn:after,input.btn:after{content:" ";position:absolute;z-index:0;display:block;width:0;left:50%;top:0;display:block;height:100%;} a.btn:hover:after,input.btn:hover:after{width:100%;left:0;} a.bg40b450,.bg40b450{background:#40b450;position:relative;} a.bg40b450:hover:after{background:#63d072;} .pac0{filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;} .uploadimg span{color:#999;margin-left:15px;} .uploadimg span i{color:#fe8625;} .uploadimg a{width:100px;height:36px;line-height:36px;display:inline-block;position:relative;overflow:hidden;text-align:center;vertical-align:middle;} .uploadimg a i{color:#fff;font-style:normal;} .uploadimg a input{font-size:100px;height:130%;width:200%;position:absolute;right:0;top:0;z-index:1;} .uploadimg p img{margin-bottom:10px;width:80px;} #pic div{height:98px;width:98px;line-height:98px;border:1px solid #e6e6e6;text-align:center;margin-top:10px;} #pic p{float:left;position:relative;margin:10px 10px 10px 0;width:98px;height:98px;border:1px solid #e6e6e6;} #pic p img{margin:0;width:98px;height:98px;} #pic p a{position:absolute;left:0;bottom:0;width:100%;height:20px;line-height:20px;background:rgba(0,0,0,0.5);color:#fff;z-index:2;} #pic p b{background:#fe8625;color:#fff;padding:0 5px;position:absolute;left:0;top:0;display:none;} </style> </head> <body> <form id="aspnetForm" runat="server"> <div class="uploadimg mt40 ml25"> <div> <a href="javascript:;" class="bg40b450 cfff btn"><i id="haspic">选择图片</i><input type="file" id="uploadfile" name="uploadfile" multiple="multiple" class="pac0" /></a> <label>最大上传1M的图片(格式png,gif,jpg)</label><span id="filelength"></span> </div> <div id="pic" class="clearfix"></div> </div> </form> <script type="text/javascript"> function bindclick() { //删除图片事件 $("#pic a.del").unbind(); $("#pic a.del").click(function () { $(this).parent().remove(); }); } // 每次上传总数 var uploadcount = 0; $(function () { //图片上传 $("#uploadfile").change(function () { if($(this).val()!="") upload($(this).attr("name"),1024,"Y"); }); }); //图片上传方法 //obj1传上传控件的name属性,maxlength上传图片大小kb单位,watermark上传的图片是否加水印 function upload(obj1,maxlength,watermark,w,h) { $("#aspnetForm").ajaxSubmit({ url: 'uploadall.ashx?index=' obj1 '&maxlength=' maxlength '&watermark=' watermark '&_=' Math.random(), beforeSubmit: function () { }, success: function (data) { var imglist = data.split("|"); var imghtml = ""; var cren = ""; var hascrent = $("#pic p.crently").length > 0 ? 1 : 0; for (var i = 0; i < imglist.length; i ) { if (imglist[i].indexOf("Upload/Images") != -1) imghtml = '<p ' cren '><b>默认图</b><a href="javascript:;" class="del">删除图片</a><img src="' imglist[i] '"></p>'; } //上传总数统计 if($("#pic p").length==0) uploadcount = $("#pic p").length $("#uploadfile")[0].files.length; else uploadcount = $("#uploadfile")[0].files.length; $("#pic").append(imghtml); //上传成功个数 crentcount = $("#pic p").length; //上传失败个数 var failcount = uploadcount != crentcount ? "," parseInt(uploadcount - crentcount) "个文件上传失败" : ""; $("#filelength").html("选择了" uploadcount "文件,成功上传了" crentcount "文件" failcount); bindclick();//绑定删除事件 } }); } </script> </body> </html>
好例子网口号:伸出你的我的手 — 分享!
相关软件
小贴士
感谢您为本站写下的评论,您的评论对其它用户来说具有重要的参考价值,所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字,对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙,所以请不要反馈意义不大的重复字符,也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明,或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦,又没人会搭理,于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享,对搜索内容的合法性不具有预见性、识别性、控制性,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论平台是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定,若资源存在侵权或相关问题请联系本站客服人员,点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论