标签：des style blog http io ar color os 使用
通过表单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;
}
}
}
}
[Ajax] 使用Ajax异步上传图片文件(非Form表单提交)
标签：des style blog http io ar color os 使用
原文地址：http://www.cnblogs.com/jx270/p/4114376.html
