Javascript与asp.net多文件无刷新上传 - Huacn的日志 - 博客园

 

Javascript与asp.net多文件无刷新上传

Javascript与asp.net 实现Ajax多文件无刷新上传

这几天在等着上班，闲来无事，就写了一个无刷新的上传功能，这个上传只是实现局部刷新，我已经把方法都整理好，可以随意添加多个上传控件，只要调用一个方法就可以了，为了便于阅读我没有把JS独立出来，以后真正用到项目上的时候再提出来，我在每个方法上面都写了注视，具体可以看代码部分，现在一直在用JQuery，它提供的方法太好用的，剩了很多事。
此方法主要是通过iFrame调用上传页的控件来实现的，具体请看下面的代码。

无刷新上传主要的HTML代码（upload.html）：

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/interface.js"></script>

<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(" 上传中");
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("文件上传成功. [重新上传]");
if(isshowpic)
        {
            $("#panelViewPic"+itemid).html("");       
            $("#panelViewPic"+itemid).fadeIn("fast");
        }
    };
var currentItemID = 0;  //用于存放共有多少个上传控件了
//创建一个上传控件
var uploadcreate = function(el,itemid){
        currentItemID ++;
if(itemid == null)
        {
            itemid = currentItemID;
        } 
var strContent = "

src=/"upload.aspx?id="+itemid+"/" id=/"ifUpload"+itemid+"/" frameborder=/"no/" scrolling=/"no/" style=/"width:400px; height:28px;/">";
        strContent += "

";
        strContent += "

";
        el.append(strContent);
    };
</script>

[关闭]

AjaxUpload - 多文件无刷新上传源代码 v1.0

作者:李华顺 http://huacn.cnblogs.com

添加一个新上传控件 图片显示关闭

上传功能的页面代码（upload.aspx）：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="upload.aspx.cs" Inherits="upload" %>





<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/interface.js"></script>

<script type="text/javascript">
var uploadSelect = function(el){
            el.fadeOut("show");       
            parent.uploading(document.getElementById("<%=file1.ClientID %>").value,'<%=itemID %>');
            $("#<%=frmUpload.ClientID %>").submit();
        };
</script>

上传功能的服务端代码（upload.aspx.cs）

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.IO;
public partial class upload : System.Web.UI.Page
{
string picPath = "";
string picServer = "/upload";
protected string itemID = "";
protected void Page_Load(object sender, EventArgs e)
    {
if (Request.QueryString["id"] != null)
        {
            itemID = Request.QueryString["id"];
        }
if (IsPostBack)
        {
            picPath = Server.MapPath("//upload");
            doUpload();
        }
    }
protected void doUpload()
    {
try
        {
            HttpPostedFile file = file1.PostedFile;
string strNewPath = GetSaveFilePath() + GetExtension(file.FileName);
            file.SaveAs(picPath+strNewPath);
string urlPath = picServer + strNewPath;
            urlPath = urlPath.Replace("//", "/");
            WriteJs("parent.uploadsuccess('" + urlPath + "','" + itemID + "'); ");
        }
catch (Exception ex)
        {
            WriteJs("parent.uploaderror();");           
        }
    }
private string GetExtension(string fileName)
    {
try
        {
int startPos = fileName.LastIndexOf(".");
string ext = fileName.Substring(startPos, fileName.Length - startPos);
return ext;
        }
catch (Exception ex)
        {
            WriteJs("parent.uploaderror('" + itemID + "');");
return string.Empty;
        }
    }
private string GetSaveFilePath()
    {
try
        {
            DateTime dateTime = DateTime.Now;
string yearStr = dateTime.Year.ToString(); ;
string monthStr = dateTime.Month.ToString();
string dayStr = dateTime.Day.ToString();
string hourStr = dateTime.Hour.ToString();
string minuteStr = dateTime.Minute.ToString();
string dir = dateTime.ToString(@"//yyyyMMdd");
if (!Directory.Exists(picPath + dir))
            {
                Directory.CreateDirectory(picPath + dir);
            }
return dir + dateTime.ToString("yyyyMMddhhmmssffff");
        }
catch (Exception ex)
        {
            WriteJs("parent.uploaderror();");
return string.Empty;
        }
    }
protected void WriteJs(string jsContent)
    {       
this.Page.RegisterStartupScript("writejs","<script type='text/javascript'>"+ jsContent+"</script>");
    }
}

基本上就是这些，重点请看第一部份的代码，主要是JS控件显示，还有一个重点是upload.aspx调用父级页面的方法这些实现。
Javascript无刷新上传演示地址:http://www.wathon.com/opensource/js/ajaxuploadv1/upload.html
源代码下载地址：http://www.wathon.com/opensource/js/ajaxuploadv1/ajaxupload_src.zip
无刷新上传在编辑框中的应用演示:http://www.cnblogs.com/Files/huacn/ajaxupload_example.zip

Javascript与asp.net多文件无刷新上传 - Huacn的日志 - 博客园