Go homepage(回首页)
Upload pictures (上传图片)
Write articles (发文字帖)

The author:(作者)delv
published in(发表于) 1/27/2014 6:49:39 AM
Javascript与asp.net,实现Ajax多文件无刷新上传_[Asp.Net教程]

Javascript与asp.net 实现Ajax多文件无刷新上传_[Asp.Net教程]

















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










无刷新上传主要的HTML代码(upload.html):










AjaxUpload














onclick="hideDiv('tipbox');">[关闭]

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


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

















上传功能的页面代码(upload.aspx):





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









上传















上传功能的服务端代码(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","");
}




}







基本上就是这些,重点请看第一部份的代码,主要是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




来源:huacn的cnblogs


























If you have any requirements, please contact webmaster。(如果有什么要求,请联系站长)




QQ:154298438
QQ:417480759