html5的formData上传文件及.net后台

古城微笑少年丶 2021-07-04 13:31 414阅读 0赞

先来前端的代码：

html 代码：

<input type="file" id="files" value="" multiple/>

js代码：

function init() { 
        var ele_files = document.querySelector("#files");
        ele_files.addEventListener("change", function () { var files = ele_files.files;
            var form = new FormData();
            for (var i = 0; i < files.length; i++) { 
                form.append("files"+i, files[i]);
            }
            $ajax("/ashx/handle.ashx", "post", form, function (data) {  console.log(data); });
        }, false);
    }
    
    function $ajax(url,method,data,callback) { 
        xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
        xhr.open(method, url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
        xhr.responseType = "";//接收的数据类型
        xhr.onload = function () { 
            if ((this.status >= 200 && this.status < 300) || this.status == 304) { 
                callback(this.response);
            }
        }; //请求完成
        xhr.send(data); //开始上传，发送form数据
    }

.net后台代码，接收文件后并保存在`c:/wsz/pic/` 文件夹下

public void ProcessRequest(HttpContext context)
            { 
                HttpFileCollection hfc = context.Request.Files;
    
                for (var i = 0; i < hfc.Count; i++) { 
                    HttpPostedFile hpf = hfc[i];
    
                    //文件保存目录路径
                    String savePath = "c:/wsz/pic/";
    
                    String filePath = savePath + hpf.FileName;
                    hpf.SaveAs(filePath);
                }
                
            }

发表评论取消回复

表情：

评论列表（有 0 条评论，414人围观）

还没有评论，来说两句吧...

相关阅读

相关 ajax上传文件formData

优秀的程序员从不墨迹，直接上示例代码：前端代码： <!DOCTYPE html> <html> <head> <meta chars

迈不过友情╰/ 2023年09月27日 10:23/ 0 赞/ 172 阅读

相关 HTML5 文件上传

HTML5 文件上传另参考 http://www.jianshu.com/p/46e6e03a0d53 1 filelist对象与file对象： 1 <inpu

怼烎@/ 2023年08月17日 16:20/ 0 赞/ 164 阅读

相关 httpClient文件上传formdata

/ 上传文件 @param urlStr @param textMap

不念不忘少年蓝@/ 2023年03月02日 14:49/ 0 赞/ 39 阅读

相关 Vue.js 上传文件(后台使用.net)

页面部分 <div id="app"> <form id="myform"> <input type="file" name=

我不是女神ヾ/ 2022年06月06日 10:07/ 0 赞/ 226 阅读

相关 ajax上传图片到后台【formData】

在平时的项目中，我们会遇到各种各样的上传图片，大多数情况下我们会选择各种各样的插件进行上传，然后返回一个图片url，在进行相关其他业务如果不用各种插件，运用ajax实现页面

小灰灰/ 2022年06月03日 22:11/ 0 赞/ 345 阅读

相关 jQuery使用FormData上传文件

这段时间，一直练习在ASP.NET MVC程序中上传文件。静态，动态，单个或多文件上传。在网上有看到网友提及使用FormData来上传，Insus.NET觉得是一个

柔情只为你懂/ 2022年04月22日 14:50/ 0 赞/ 321 阅读

相关 HTML5 jQuery+FormData 异步上传文件，带进度条

[http://blog.csdn.net/michaelwubo/article/details/50865246][http_blog.csdn.net_michaelwu

布满荆棘的人生/ 2021年09月14日 20:06/ 0 赞/ 448 阅读

相关 html5的formData上传文件及.net后台

先来前端的代码： html 代码： <input type="file" id="files" value="" multiple/> js代码： fu

古城微笑少年丶/ 2021年07月04日 13:31/ 0 赞/ 415 阅读

相关 HTML5 FormData 方法介绍以及实现文件上传

`XMLHttpRequest` 是一个浏览器接口，通过它，我们可以使得 `Javascript` 进行 `HTTP (S)` 通信。 `XMLHttpRequest` 在

深藏阁楼爱情的钟/ 2021年06月26日 16:06/ 0 赞/ 468 阅读

相关 html5+FormData 实现ajax文件上传

大家都知道在html4时代，上传只能使用表单post提交方式，无法使用ajax(XMLHttpRequest )直接进行表单提交。但在HTML 5的概念形成后，W3C开始考虑标

女爷i/ 2021年06月24日 14:34/ 0 赞/ 513 阅读