码迷,mamicode.com
首页 > Web开发 > 详细

js 原生 ajax 异步上传图片

时间:2015-06-10 13:42:35      阅读:102      评论:0      收藏:0      [点我收藏+]

标签:

    <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");
        }

 

js 原生 ajax 异步上传图片

标签:

原文地址:http://www.cnblogs.com/yougmi/p/4565589.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!