js FormData 的使用

<div>
        <input type="file" name="filename" multiple="multiple" onchange="test1(this.files)" id="file" /><br>

        <script type="text/javascript">
            function test1(files) {
                if (files.length) {
                    console.log(files);//所有
                    console.log(files[0]);//第一个元素
                    console.log($("#file")[0].files);//所有
                    console.log($("#file")[0].files[0]);//第一个元素
                    console.log($("#file").files);//未定义
                    console.log($("#file").prop("files"));//所有
                    console.log($("#file").prop("files")[0]);//第一个元素
                    console.log("!!!");
                    // 获取文件
                    var file_data = $("#file").prop("files");
                    var A1 = files;
                    var A2 = files[0];
                    var A3 = $("#file")[0].files;
                    var A4 = $("#file")[0].files[0];
                    var A5 = $("#file").files;
                    var A6 = $("#file").prop("files");
                    var A7 = $("#file").prop("files")[0];
                    var formData = new FormData(); //改变时候上传文件
                    //formData.append("img", files[0]); //获取不到控制器请求的值
                    formData.append("A1", A1);
                    formData.append("A2", A2);
                    formData.append("A3", A3);
                    formData.append("A4", A4);
                    formData.append("A5", A5);
                    formData.append("A6", A6);
                    formData.append("A7", A7);

                    //formData.append("s1", $("#file")[0].files); //获取不到值
                    //formData.append("img", file_data);//
                    //formData.append("img1", file_data);

                    $.ajax({
                        url: "http://localhost:44714/UpFile/AddFile",
                        type: "POST",
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function (response) {
                            // 根据返回结果指定界面操作
                        }
                    });
                }
            }
        </script>
      [HttpPost]
        public ActionResult AddFile()
        {

            var s1s = Request.Files;
            var A1 = Request.Files["A1"];
            var A2 = Request.Files["A2"]; //1
            var A3 = Request.Files["A3"];
            var A4 = Request.Files["A4"]; //1
            var A5 = Request.Files["A5"];
            var A6 = Request.Files["A6"];
            var A7 = Request.Files["A7"];//1
            if (Request.Files.Count == 0)
            {
                //throw new Exception("请选择上传文件!");
            }
            for (int i = 0; i < Request.Files.Count; ++i)
            {
                HttpPostedFileBase file = Request.Files[i];
                // 文件名为空证明没有选择上传文件
                if (file.FileName == "")
                {
                    return Content("文件名空");
                }
            }
            return View();
        }

测试结果

原文地址:https://www.cnblogs.com/enych/p/9123681.html

时间: 2024-11-08 09:19:35

js FormData 的使用的相关文章

JS FormData对象

想得到一个FormData对象: var formdata = new FormData(); W3c草案提供了三种方案来获取或修改FormData. 方案1:创建一个空的FormData对象,然后再用append方法逐个添加键值对: var formdata = new FormData(); formdata.append("name", "呵呵"); formdata.append("url", "http://www.baidu

JS FormData 文件异步提交

html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new document &l

JS formData

有时候,我们需要使用formData来上传文件,并根据反馈的结果做不同的处理, 这个时候使用form来提交文件不方便 #perform 获取的的上传文件所用的input标签 var formData = new FormData(); var file = $("#perform")[0].files[0]; console.log('file:'+file); formData.append("perform",file); $.ajax({ url: url,

js FormData用法详解

1. 概述 FormData类型其实是在XMLHttpRequest 2级定义的,它是为序列化表以及创建与表单格式相同的数据(当然是用于XHR传输)提供便利. 2. 构造函数 创建一个formData对象实例有几种方式 1.创建一个空对象实例 var formData = new FormData(); 此时可以调用append()方法来添加数据 2.使用已有的表单来初始化一个对象实例 假如现在页面已经有一个表单 <form id="myForm" action="&q

onethink上传图片(资源)和预览

直接上干货 不废话了 普通上传:  onthink框架 后台已经有图片和文件上传功能 controller里只需: public function addPicture(){ /* 调用文件上传组件上传文件 */ $Picture = D('Picture'); $info = $Picture->upload( $_FILES, C('PICTURE_UPLOAD'), C('PICTURE_UPLOAD_DRIVER'), null  ); //TODO:上传到远程服务器 $this->a

[ecmanget][常用标签]bookmark

Bookmarks Bookmarks 书签栏 redis Try RedisRedisRedis应用2-Redis实现开发者头条页面点赞功能 - noaman_wgs的博客 - CSDN博客windows安装redisRedis Lrange 命令_获取列表指定范围内的元素Google python 安装Git - 廖雪峰的官方网站Python学习资源_W3Cschool极客导航The Python Tutorial - Python 3.6.0 documentationpython - 问

原生js上传文件,使用new FormData()

当创建一个内容较多的表单,表单里面又有了文件上传,文件上传也需要表单提交,单一的上传文件很好操作: <form action="接口" enctype="multipart/form-data" method="post"> <input type="file" name="uploadFile"/> <input type="submit" value=&

c#+js 使用formdata上传文件

如果不是使用form表单submit的形式,我们可以手动通过formdata传值(针对文件上传等) 比如: <html> <head> <meta name="viewport" content="width=device-width" /> <link href="~/jquery-easyui-master/themes/default/easyui.css" rel="stylesheet

玩转图片上传————原生js XMLHttpRequest 结合FormData对象实现的图片上传

var form=document.getElementById("formId"); var formData=new FormData(form); var oReq = new XMLHttpRequest(); oReq.onreadystatechange=function(){ if(oReq.readyState==4){ if(oReq.status==200){ var json=JSON.parse(oReq.responseText); console.log(j