js 原生 ajax 异步上传图片

    <script type="text/javascript">
        function upload() {
            var file1 = document.getElementById("file1");

            postFile(file1.files[0]);
        }

        function postFile(data) {
            //1.创建异步对象(小浏览器)
            var req = new XMLHttpRequest();

            //2.设置参数
            req.open("post", "/API/ImgUp.ashx", true);

            //3.设置 请求 报文体 的 编码格式(设置为 表单默认编码格式)
            req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            //4.设置回调函数
            req.onreadystatechange = function () {
                //请求状态readyState=4准备就绪,服务器返回的状态码status=200接收成功
                if (req.readyState == 4 && req.status == 200) {
                    if (req.responseText != "error") {
                        //changeName(req.responseText);
                        $("#img").attr("src", req.responseText);
                    }
                }
            };
            //4.发送异步请求
            req.send(data);//post传参在此处
        }
   </script>

<body>

    <input id="file1" type="file" value="选择文件" />
    <input id="btnUp" onclick="upload()" type="button" value="上传" />
    <img id="img" src="" />

</body>

后台ashx处理

        public void ProcessRequest(HttpContext context)
        {
            //context.Request["data"]
            Stream stream = new BufferedStream(context.Request.InputStream);
            byte[] buffer=new byte[stream.Length];

            stream.Read(buffer, 0, buffer.Length);
            string path = context.Server.MapPath("/ImgUp/") + "1.jpg";

            File.WriteAllBytes(path, buffer);

            context.Response.Write("/ImgUp/1.jpg");
        }
时间: 2024-08-08 21:53:42

js 原生 ajax 异步上传图片的相关文章

[Ajax] 使用Ajax异步上传图片文件(非Form表单提交)

通过表单Form提交来上传文件的方式这里就不说了: 下面介绍,通过js中使用ajax异步上传图片文件: 新建一个html页面和一个一般处理程序即可: 涉及思路: //发送2次Ajax请求完成js异步上传文件的操作:          //第1次,post 只上传文件,返回文件名name          //第2次,get 根据文件名name定位服务器上的文件,同时根据浏览器传过来的realname重命名服务器上的文件          //(如果有其他参数,也可以通过第2次一并上传) 图片文件

JS原生Ajax请求

摘录一个JS原生Ajax请求行为,原文地址:http://caibaojian.com/ajax-jsonp.html ajax({ url: "./TestXHR.aspx", //请求地址 type: "POST", //请求方式 data: { name: "super", age: 20 }, //请求参数 dataType: "json", success: function (response, xml) { //

手动封装js原生XMLHttprequest异步请求

Code Object.extend =function(targetObj,fnJson){ //扩展方法,类似于jQuery的$.extend,可以扩展类的方法,也可以合并对象 for(var fnName in fnJson){ targetObj[fnName]=fnJson[fnName]; } return targetObj; }; HttpAjax = (function(){ function HttpAjax(options){ var settings={ type:'po

Js原生Ajax和Jquery的Ajax

一.Ajax概述 1.什么是同步,什么是异步 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待卡死状态 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随意做其他事情,不会被卡死 2.Ajax的运行原理 页面发起请求,会将请求发送给浏览器内核中的Ajax引擎,Ajax引擎会提交请求到服务器端,在这段时间里,客户端可以任意进行任意操作,直到服务器端将数据返回给Ajax引擎后,会触发你设置的事件,从而执行自定义的js逻辑代码完成某种页面1 功能. 二

使用Ajax异步上传图片的方法(html,javascript,php)

前两天项目中需要用到异步上传图片和显示上传进度的功能,于是找了很多外国的文章,翻山越岭地去遇上各种坑,这里写篇文章记录一下. HTML <form id="fileupload-form"> <input id="fileupload" type="file" name="file" > </form> HTML代码没什么好说,一个form表单,还有文件类型的input.我们来看js部分.

ajax异步上传图片文件并将其转换为base64格式

高级浏览器上面,可以直接使用html5的FileReader,实现获取上传文件的base64格式,并以字符串形式提交.对于IE9以下的浏览器,就得另想他法.下面是高级浏览器的示例代码. $('.image').change(function(e) { var target = $(e.target); var file; if(target[0].files && target[0].files[0] ) { file = target[0].files[0]; } if(file) {

js原生Ajax的封装与使用

一.原生Ajax代码的封装如下: (function() { var XHR = { createStandardXHR: function() { return new XMLHttpRequest(); }, createIEXHR: function () { return new ActiveXObject("Microsoft.XMLHTTP"); }, createErrorXHR: function () { alert("Your browser does n

js(三) ajax异步局部刷新技术底层代码实现

ajax 异步 javaScript and xml 开发五步骤: 1. 创建对象 XMLHttpRequest(chrome,firefox) ie... jquery 2. 找到连接, http的method方法    GET|POST    PUT DELETE 3. 注册监听器  有数据返回之后,就会自动调用该方法(不是一次 3次) 4. 发送请求 POST PUT delete 请求数据 5. 处理请求 1 <%@ page language="java" conten

ajax异步上传图片&amp;SpringMVC后台代码

function uploadPic(){ var options = { url : "/upload/updatePic.action", type : "post", dataType : "json", success : function(data){ $("#allUrl").attr("src", data.url); $("#imgUrl").val(data.url);