当前位置:编程学习 > C#/ASP.NET >>

文件无刷新上传

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>AjaxUpload 文件无刷新上传 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/inte易做图ce.js"></script>
<style type="text/css" media="all">
*{
 margin:0;
 padding:0;
}

img{border:none;}

ul{
 list-style-type:none;
}

ul li{
 padding:2px 4px;
}

body{
 font-family: 宋体, 黑体,verdana, Arial;
 font-size:12px;
 color:#333;
 background:#DDDDDD;
 margin:30px;
 padding:0;
}

.box{
 border:1px solid #CCC;
 background:#FFF;
 padding:8px;
 margin:5px;
 clear:both;
}

.title {
 background:#F0F0F0;padding:5px;
 font-weight:bold;
}

.tooltip{
 background:#F0F0F0;
 border-color:#bbb;
}

.tooltip h1 {
    color:#A8DF00;
    font-family: 微软雅黑,黑体,宋体,verdana, Arial;
}

.titlebutton{
 float:right;
}

.uploading{
    background:#FFF;
    color:#444;
    text-align:left;
    width:500px;
    padding:4px;
}

.image{
    border:1px solid #ddd;
    margin:2px;
    padding:1px;
    display:inline;
    width:300px;
}

.uploadcontrol {
    margin:4px 0;
    border-bottom:1px solid #F0F0F0;
}
</style>
<script type="text/javascript">
 
  $(document).ready(function(){   
    for(var i=0;i<5;i++)
    {
       uploadcreate($("#uploadbox"),i);
    }
 });
  
  var hideDiv = function(idName){
   $("#"+idName).fadeOut("fast");
  };
  
  //是否显示上传后的图片
  var isshowpic = true; 
  var uploadshowpic = function(el){
      isshowpic = !(isshowpic);
      if(isshowpic)
      {
          el.html("图片显示关闭");
      }
      else
      {
          el.html("图片显示开启");
      }
  };
  
  //载入中的GIF动画
    var loadingUrl = "images/ajax-loader.gif";
   
    //选择文件后的事件,iframe里面调用的
    var uploading = function(imgsrc,itemid){
        var el = $("#uploading"+itemid);
        $("#ifUpload"+itemid).fadeOut("fast");
        el.fadeIn("fast");
     el.html("<img src='"+loadingUrl+"' align='absmiddle' /> 上传中...");
     return el;
    };
   
    //重新上传方法   
    var uploadinit = function(itemid){
        currentItemID ++;
        $("#uploading"+itemid).fadeOut("fast",function(){
             $("#ifUpload"+itemid).fadeIn("fast");
             $("#panelViewPic"+itemid).fadeOut("fast");
        });
              
    };
   
    //上传时程序发生错误时,给提示,并返回上传状态
    var uploaderror = function(itemid){
        alert("程序异常,"+itemid+"项上传未成功。");
        uploadinit();
    };
   
    //上传成功后的处理
 var uploadsuccess = function(newpath,itemid){
        $("#uploading"+itemid).html("文件上传成功. <a href='javascript:void(0);' onclick='uploadinit("+itemid+");'>[重新上传]</a>");
        if(isshowpic)
        {
            $("#panelViewPic"+itemid).html("<a href='"+newpath+"' title='点击查看大图' target='_blank'><img src='"+newpath+"' alt='' style='width:300px;' /></a>");       
            $("#panelViewPic"+itemid).fadeIn("fast");
        }
    };
   
   
    var currentItemID = 0;  //用于存放共有多少个上传控件了
    //创建一个上传控件
    var uploadcreate = function(el,itemid){
        currentItemID ++;
        if(itemid == null)
        {
            itemid = currentItemID;
        } 
        var strContent = "<div class='uploadcontrol'><iframe src=\"upload.aspx?id="+itemid+"\" id=\"ifUpload"+itemid+"\" frameborder=\"no\" scrolling=\"no\" style=\"width:400px; height:28px;\"></iframe>";
     strContent += "<div class=\"uploading\" id=\"uploading"+itemid+"\" style=\"display:none;\" ></div>";
     strContent += "<div class=\"image\" id=\"panelViewPic"+itemid+"\" style=\"display:none;\"></div></div>";
     el.append(strContent);
    };
  
</script>

</head>

<body>

<div id="tipbox" class="box tooltip">
 <a href="#" onclick="hideDiv('tipbox');">[关闭]</a>
 <div class="content">
     <h1>AjaxUpload - 多文件无刷新上传源代码 v1.0</h1>
     <p>作者:李华顺 <a href="http://huacn.cnblogs.com" target="_blank">http://huacn.cnblogs.com</a>  <a href="http://www.51aspx.com" target="_blank">download from 51aspx.com</a>
</p>
 </div>
</div>
<div id="toolbox" class="tooltip box">
 <a href="#" onclick="uploadcreate($('#uploadbox'));">添加一个新上传控件</a> <a href="#" onclick="uploadshowpic($(this));">图片显示关闭</a>
</div>
<div id="uploadbox" class="box">
 
</div>

</body>

</html>
最后那个upload.aspx文件就不写了.

补充:asp.net教程,.Net开发
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,