基本信息
源码名称：html5上传多个文件并添加水印 实例源码
源码大小：0.02M
文件格式：.7z
开发语言：C#
更新时间：2016-12-28
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：78630559

本次赞助数额为： 2 元　
   源码介绍 

<%@ 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>