[Ajax] 使用Ajax异步上传图片文件(非Form表单提交)
通过表单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表单提交)的更多相关文章
- 非form表单提交的数据就要用@requestbody注解获取http传过来的值，尤其json
非form表单提交的数据就要用@requestbody注解获取http传过来的值,尤其json
- Flask基础之返回值与form表单提交
目录 1.Python 现阶段三大主流Web框架 Django Tornado Flask 对比 2.Flask的安装 3.Flask的第一个简单应用 4.Flask中的render_template ...
- ajax form表单提交 input file中的文件
ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...
- form表单提交与ajax消息传递
form表单提交与ajax消息传递 1.前后端传输数据编码格式contentType: urlencoded 对应的数据格式:name=xxx&password=666 后端获取数据:requ ...
- Form表单提交，Ajax请求，$http请求的区别
做过前端同学想必都避免不了要和后台server打交道.而以下这三种与后台交互的方式想必大家都不陌生. Form表单提交,Ajax请求,Angular的$http请求 以前一直搞不清楚什么时候应该用哪种 ...
- python中前后端通信方法Ajax和ORM映射（form表单提交）
后端从数据库获取数据给到前端: 第一种方式: admin.py文件代码: @admin.route('/showList') def show(): # 获取数据库所有文章数据,得到一个个对象 res ...
- form表单提交转为ajax方式提交
<form action="xxx" method="get"> //action的值是请求的url地址 <div class="f ...
- form表单提交没有跨域问题，但ajax提交存在跨域问题
浏览器的策略本质是:一个域名下面的JS,没有经过允许是不能读取另外一个域名的内容,但是浏览器不阻止你向另外一个域名发送请求. 所以form表单提交没有跨域问题,提交form表单到另外一个域名,原来页面 ...
- Checkbox框全选操作，form表单提交与jquery ajax提交两种处理方式
//1.jquery ajax<script type="text/javascript"> $(function(){ var basePath = $(" ...
随机推荐
- python（21）实现多进程
参考链接:http://www.cnblogs.com/kaituorensheng/p/4445418.html python多进程:multiprocessing python中的多线程其实并不是 ...
- Fatal error: Class 'GearmanClient' not found解决方法
产生原因: 没有安装PHP的gearman扩展 解决方法:1. 打开:http://pecl.php.net/package/gearman2. wget http://pecl.php.net ...
- winform窗体的关闭与资源的释放
单纯的this.Dispose(); this.Close();有时候并不能释放出所用资源.因为Dispose()方法,虽然能释放当前窗体的资源,却不能强制结束循环, 要想强制突出当前程序要用:Sy ...
- git重写历史记录
1 修改上一次历史提交,替换掉上次的提交git commit --amend 2 git rebase 将不同分支路径合并到同一分支路径上eg:将master分支上的 conflic rebase合并 ...
- 关于lib,dll,.a,.so,静态库和动态库的解释说明
[转]关于lib,dll,.a,.so,静态库和动态库的解释说明 目录 1 什么叫程序库 2 什么是lib,什么是dll,什么是.a,什么是so,什么是静态库,什么是动态库 3 补充说明 4 作者 什 ...
- SQL 锁的介绍
锁的概述 一. 为什么要引入锁 多个用户同时对数据库的并发操作时会带来以下数据不一致的问题: 丢失更新A,B两个用户读同一数据并进行修改,其中一个用户的修改结果破坏了另一个修改的结果,比如订票系统 脏 ...
- mybatis模板
因为这里是说mybatis的,所以呢 servlet就不做多说了,代码也不在这里贴出来了. log4j.properties log4j.rootLogger=DEBUG,Console log4j. ...
- 源码解读—HashMap
什么是HashMap ? hashMap是用什么基础数据结构实现的?HashMap是如何解决hashCode冲突的? hashMap的基础容器是数组+链表(transient Entry[] tabl ...
- cocos2dx 菜单按钮回调方法传参 tag传参
.h文件 void menuCallBack(CCObject* pSender); .cpp CCMenuItemSprite* item = CCMenuItemSprite::create( m ...
- PHP 文件读取 fread、fgets、fgetc、file_get_contents 与 file 函数
fread().fgets().fgetc().file_get_contents() 与 file() 函数用于从文件中读取内容. fread() fread() 函数用于读取文件(可安全用于二进制 ...