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

最新推荐文章于 2023-10-18 13:41:43 发布
最新推荐文章于 2023-10-18 13:41:43 发布
阅读量261 收藏
点赞数
文章标签： xhtml javascript shell ViewUI
原文链接：http://www.cnblogs.com/jx270/p/4114376.html
版权
[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="提交" οnclick="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;
            }
        }
    }
}
posted on 2014-11-21 22:34  v.e.n.u.s 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/jx270/p/4114376.html

baihuomeng2210
关注
通过ajax上传不用form,通过Ajax使用FormData对象无刷新上传文件方法
weixin_39921087的博客
08-06 1131
写在前面：本文说的这个方案有浏览器兼容性问题；所有主流浏览器的较新版本已经支持这个对象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+，对兼容性比较敏感的网站慎用。在工作中遇到了一个问题：在一个页面中，有4块内容，每块内容都包含一个图片上传功能，希望可以实现一键把这四块内容都上传上去。我没有用插件实现上传功能，就是用的input[type=fi...
Ajax异步提交带文件上传的Form表单
yeungsinsin的博客
04-25 3860
Ajax异步提交带文件上传的Form表单 前端代码 <form enctype="multipart/form-data" method="post" name="fileinfo"> <label>Your email address:</label> <input type="email" autocomplete="on" a...
不用form提交表单，用ajax上传文件
05-22
不用form提交表单，用ajax异步上传文件，使用jdk8版本，否则可能无法运行
不用form表单ajax上传图片（单个图片上传实例）及回显
焱敦的博客
04-25 3622
一、html代码段（这里无css样式） <input id="hidupload" onchange="upchange()" style="display:none;"/> <button onclick="hideup()">上传文件</button> <img id="hidimg" src=""/> <button onclick=...
没有Form表单的情况下，采用Ajax上传文件
KEVEN410423的博客
03-14 1941
前言：一般情况下采用form表单，设置enctype="multipart/form-data" 即可实现附件上传功能，操作如下：&lt;form action="" method="post" enctype="multipart/form-data"&gt; &lt;input type="file" name="file" value=&quot
ajax异步上传文件(无需表单)
刘超军的博客
08-19 1864
今天给大家带来的是ajax上传文件，不需要表单，不需要把表单设置二级制数据传输格式，简单粗暴，看了之后的都会了。废话不多说，下面看代码把，最下面给大家哦提供一个示列下载。我这里使用的是jsp+servlet实现的，你们需要融合到别的框架改下代码就行。 第一个是后台的代码: package control; import java.io.File; import java.io.IOExcep
Vue form 表单提交+ajax异步请求+分页效果
08-30
在上面的代码中，我们可以看到使用 `XMLHttpRequest` 或 `fetch` API 实现Ajax异步请求的示例代码。 三、分页效果 分页效果是指在Web应用程序中实现分页功能的技术。通过使用分页效果，我们可以将大量数据分页显示...
Ajax提交Form表单及文件上传的实例代码
12-02
在本文中，我们将探讨如何使用Ajax提交包含文件上传的Form表单。在HTML中，创建一个表单通常需要`<form>`标签，并指定`method`（GET或POST）和`action`（服务器端处理表单数据的URL）。如果要上传文件，`<form>`标签...
ajaxForm异步提交表单（含图片）
08-13
AjaxForm是基于jQuery库的一个插件，它简化了表单的异步提交过程，支持多种类型的文件上传，包括图片。 使用ajaxForm的步骤如下： 1. **引入jQuery和ajaxForm插件**：确保在HTML文件中引入jQuery库和ajaxForm插件...
ajax上传附件到服务器
11-08
包含了ajax上传附件到服务器的前后台代码
纯原生Ajax2.0（不用FormData）实现表单及文件上传
weixin_34356138的博客
05-10 2087
一、概述 通常我们用Ajax上传文件的时候都会用到FormData,这种方式比较简单。今天介绍一种用纯Ajax上传文件的方式 表单数据可以用一下四种方式进行发送: 1.method:POST,enctype:application/x-www-form-urlencoded (默认编码方式); 2.method:POST,enctype:text/plain; 3.method:POST,enct...
原生input输入框实现上传文件
最新发布
qq_21861771的博客
10-18 1099
2.先获取到事件内部的文件，通过length长度进行判断，在这里我限制了excel文件。1.设置一个input的change事件，把参数填进去，需要用到。3.如果判断成功了就是用form data进行文件上传。4.请求接口axios，把需要上传的文件地址放进去即可。最后附上事件的完整代码。
通过ajax上传multipart文件
热门推荐
无尾鱼的博客
01-26 2万+
使用FormData对象，是可以使用一系列的键值对来模拟一个完整的表单，然后使用XMLHttpRequest发送这个"表单"。 html: upload javascript: $.ajax({ url: "/upload", type: 'POST', cache: false, data: new FormData($("#
SSH框架不用form表单上传图片两种方式FormData和ajaxFileUpload
未曾远去
12-20 1339
两种方式FormData最好用简单ajaxFileUpload有bug，会出现 第二个文件上传图片onchange无效问题 我是以百度身份证识别为例。 ajaxFileUpload ajaxFileUpload要先引入ajaxFileUpload.js--&gt;下载 jsp页面 &lt;script type="text/javascript"&gt; function select...
不基于form表单的请求方式（前端一）
dengjili的专栏
11-03 1421
目录传统form方式基于button方式改进基于 h5新特性form元素改进基于异步请求XMLHttpRequest方式改进基于jquery库ajax方式改进相关文档下载 传统form方式 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;form 标签&lt;/tit..
2018-04-30（原创）js提交文件，js上传文件，纯js解决无刷新文件上传，不使用form提交文件，并获取返回值（路径url）
qian913761489的博客
04-21 3289
遇到一个棘手的问题，以前一直使用form提交实现文件上传，但是这次需要在不刷新的前提下，把文件上传完，并且返回一个路径给input，以上传到数据库保存起来。单文件多文件都可以。我只上传图片，其他类型可以修改。不是新技术了，就是用Formdata实现。期间曾想要用百度Ueditor编辑器的单独上传功能，但是研究了一会，不是那么好用，并且用第三方不可控，也许下个版本就会移除部分函数。经过搜索，终于解决...
深究AngularJS——校验（非form表单）
爱雨轩
05-13 4620
为什么是非form表单？因为基本上都是通$http服务异步发送与接收数据，没有form表单个一样可以。更何况，form表单的提交校验在哪里都可以搜索得到，我这个是通过自己总结出来滴。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/
非form表单提交的数据就要用@requestbody注解获取http传过来的值，尤其json
weixin_33953249的博客
06-14 738
非form表单提交的数据就要用@requestbody注解获取http传过来的值，尤其json
非表单提交方式的post方法请求
jasonhongcn的专栏
12-18 756
今天，Tom找我调试一个空指针异常的问题。页面通过post方式传递request body过去servlet，经过调试，发现servlet的dopost，使用request.getParameter()方法获取不到传递过来的参数。而我重写url方式就可以获取的到。     据我了解，post一般需要form关联提交。使用fiddler提交请求多次，但是仍不能发现问题。以为真...
实现form表单异步提交的ajax请求方法
- **表单提交的优化**: 使用Ajax提交表单可以提高用户体验，减少不必要的页面重载，实现更为流畅的用户交互。同时，开发者可以控制提交过程中的动画效果、数据验证等。 - **错误处理**: 在实际开发中，通过定义...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值