通過表單Form提交來上傳文件的方式這里就不說了；
下面介紹,通過js中使用ajax異步上傳圖片文件: 新建一個html頁面和一個一般處理程序即可；
涉及思路：
//發送2次Ajax請求完成js異步上傳文件的操作:
//第1次,post 只上傳文件,返回文件名name
//第2次,get 根據文件名name定位服務器上的文件,同時根據瀏覽器傳過來的realname重命名服務器上的文件
//(如果有其他參數,也可以通過第2次一並上傳)
圖片文件已測試沒有問題;其他文件帶測試;
代碼如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
function upload() {
var file1 = document.getElementById("file1");
postFile(file1.files[0]);
//if (window.ActiveXObject) { // 判斷是否支持ActiveX控件
// var fso = new window.ActiveXObject("Scripting.FileSystemObject");
// //var f1 = fso.GetFile(path); //"c://test1.txt");
// //var ts = f1.OpenAsTextStream(2, true); //文本流
// // var ts = file1.files[0].OpenAsTextStream(2, true); //文本流
// postFile(file1.files[0]);
// // postFile(frm);
//} else {
// alert("不支持js上傳文件！");
//}
//test();
}
//function test() {
// var pnsys = new ActiveXObject("WScript.shell");
// pn = pnsys.Environment("PROCESS");
// alert(pn("WINDIR"));
//}
function postFile(data) {
//1.創建異步對象（小瀏覽器）
var req = new XMLHttpRequest();
//2.設置參數
req.open("post", "C02FileUploadsByJs.ashx", true);
//3.設置 請求 報文體 的 編碼格式（設置為 表單默認編碼格式）
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// req.setRequestHeader("")
//4.設置回調函數
req.onreadystatechange = function () {
//請求狀態readyState=4准備就緒,服務器返回的狀態碼status=200接收成功
if (req.readyState == 4 && req.status == 200) {
if (req.responseText != "上傳出錯！") {
changeName(req.responseText);
}
}
};
//4.發送異步請求
req.send(data);//post傳參在此處
}
function changeName(name) {
var file1 = document.getElementById("file1");
var realname = file1.value;
var req = new XMLHttpRequest();
//如果名稱遇到中文，請在此處轉碼,然后放入url中
req.open("get", "C02FileUploadsByJs.ashx?name=" + name + "&realname=" + realname, true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.onreadystatechange = function () {
//請求狀態readyState=4准備就緒,服務器返回的狀態碼status=200接收成功
if (req.readyState == 4 && req.status == 200) {
document.getElementById("sp").innerHTML = req.responseText + "<br/>" + realname;
}
};
//4.發送異步請求
req.send();
}
</script>
</head>
<body>
<!--<form id="frm" method="POST" enctype="multipart/form-data" action="FileUploads.ashx">-->
<form id="frm">
選擇要上傳的文件:
<input type="file" name="file1" id="file1" />
<br />
如果上傳的圖片，則可以選擇如下操作：
<input type="checkbox" name="chk" value="font" />加文字
<input type="checkbox" name="chk" value="image" />加圖片水印
<input type="checkbox" name="chk" value="thumbnail" />同時生成縮略圖
<!--<input type="submit" value="提交" />-->
<input type="button" value="提交" onclick="upload();" />
<br />
<span id="sp"></span>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
namespace C05_Upload
{
/// <summary>
/// FileUploadsByJs 的摘要說明
/// </summary>
public class C02FileUploadsByJs : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//發送2次請求完成js異步上傳文件的操作:
//第1次,post 只上傳文件,返回文件名name
//第2次,get 根據文件名name定位服務器上的文件,同時根據瀏覽器傳過來的realname重命名服務器上的文件
if (context.Request.HttpMethod.ToLower() == "get")
{
try
{
//根據傳過來的名稱找到服務器上的該文件,並按照realname來重命名
string name = context.Request.Params["name"];
string realname = context.Request.Params["realname"];
//去掉路徑
if (realname.LastIndexOf('\\') > -1)
realname = realname.Substring(realname.LastIndexOf('\\') + 1);
string path = context.Server.MapPath("/uploads/" + name);
string pathNew = context.Server.MapPath("/uploads/" + realname);
if (File.Exists(path))
{
File.Copy(path, pathNew, false);
File.Delete(path);
}
context.Response.Write("上傳成功！");
}
catch (Exception ex)
{
context.Response.Write("上傳出錯！");
}
}
else//post
{
try
{
Stream s = new BufferedStream(context.Request.InputStream);
byte[] bytes = new byte[s.Length];
s.Read(bytes, 0, bytes.Length);
string name = Guid.NewGuid().ToString();
string path = context.Server.MapPath("/uploads/" + name);
File.WriteAllBytes(path, bytes);
context.Response.Write(name); //"上傳成功！");
}
catch (Exception ex)
{
context.Response.Write("上傳出錯！");
}
}
context.Response.End();
}
public bool IsReusable
{
get
{
return false;
}
}
}
}