JS点击按钮弹出文件选择框选择文件怎么做其他的操作,就单个按钮控件实现

button:

                         <button class="btn btn-primary" onclick="upload()">上传   <span class="glyphicon glyphicon-open"></span></button>

upload函数:

 function upload() {
    var inputObj=document.createElement('input')
    inputObj.setAttribute('id','file');
    inputObj.setAttribute('type','file');
    inputObj.setAttribute('name','file');
    inputObj.setAttribute("style",'visibility:hidden');
    document.body.appendChild(inputObj);
    inputObj.value;
    inputObj.click();
    console.log(inputObj)

    // var formdata = new FormData($("#file")[0]);
    // $.ajax({
    //     url:"http://localhost:8080/file/upload.action",
    //     type:"POST",
    //     data:formdata,
    //     enctype:"multipart/form-data",
    //     contentType:false,
    //     processData:false,
    //     success:function (data) {
    //         console.log(data)
    //     }
    // })
}

这里打开只能出现文件选择框:
图片说明
怎么在upload函数中继续做ajax请求,照上面那函数还没选文件就发出请求了

4个回答

可以在你动态创建的input绑定一个change事件,在change事件里执行ajax上传文件,你在upload方法里直接写ajax肯定会立即执行

hzy101552
hzy101552 我可以获取到文件的路径
10 个月之前 回复
hzy101552
hzy101552 你好,为什么new FormData($("#file"))是空
10 个月之前 回复
z562743237
zsc我行我素 动态创建的dom元素不能直接绑定事件,可以去查一个js动态绑定事件
接近 2 年之前 回复

选择文件后,点击提交,发请求

function upload() {
var inputObj=document.createElement('input')
inputObj.setAttribute('id','file');
inputObj.setAttribute('type','file');
inputObj.setAttribute('name','file');
inputObj.setAttribute("style",'visibility:hidden');
document.body.appendChild(inputObj);
inputObj.value;
inputObj.click();
console.log(inputObj)

// var formdata = new FormData($("#file")[0]);
// $.ajax({
//     url:"http://localhost:8080/file/upload.action",
//     type:"POST",
//     data:formdata,
//     enctype:"multipart/form-data",
//     contentType:false,
//     processData:false,
//     success:function (data) {
//         console.log(data)
//     }
// })

}



选择文件

然后在change事件中发请求即可

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
点击按钮弹出文件保存弹出框。
点击一个按钮弹出选择路径的弹框来(最后自动后缀就是txt)。并将路径和所填写的文件名字获取到。。。
file标签弹出文件选择框后再执行后面的
``` $('#a').click(function(){ $('#b').click(); alert("b"); }) <input type="button" id="a"> <input type="file" id="b"> ``` 我想 点击a按钮弹出文件选择框,选择了文件之后再执行alert(). 怎么弄
实现点击网页上的一个按钮,弹出路径选择框,然后导出所有多媒体文件(图片,音视频)到选择的目录下
我页面中只写了: ``` <button id="exportMedias" type="button" class="btn btn-default">一键导出</button> ``` js代码部分要怎么实现点击网页上的这个按钮,弹出路径选择框,然后导出所有多媒体文件(图片,音视频)到选择的目录下
急求js弹出密码输入框
js弹出验证码输入框,点击确定按钮获取到验证码发送到后台进行验证, 正确的话跳转页面,错误的话返回到页面弹出框提示请输入正确验证码,应该怎么做?
怎么做一个弹出多项选择框?
jsp中怎么做一个弹出多项选择框?选择框中的数据是动态加载进去的。 在关闭弹出选择框之后,弹出选择框中的数据需要回传,请问我应该怎么实现? 望请各位路过的大佬不吝赐教,小白跪谢!
java 如何实现pdf word excel文件点击后弹出弹出框 显示查看或者保存
java 如何实现pdf word excel文件点击后弹出弹出框 显示查看或者保存 保存的话直接下载就好,就是这个查看怎么办,word excel分03版本和07以上版本,而且图片又不一定能显示出来
echarts地图中,点击一个国家,在该国家旁弹出一个弹框,这该怎么做?
echarts地图中,点击一个国家,在该国家旁弹出一个气泡类型的弹框,该弹框内有一些可点击的数据,点击后会在这个数据旁边再弹出一个弹框,这该怎么做?
uploadify按钮在ie10上要双击才会弹出文件选择框
下面是代码块 ``` $('#upfile').uploadify({ "height":18,"width":39, "buttonText":"<span class='glyphicon glyphicon-plus-sign' aria-hidden='true' style='color:#70B859;'></span> <span style='font-family:Microsoft YaHei;'>添加</span>", "fileSizeLimit":obj["fileSizeLimit"], "fileTypeDesc":obj["fileTypeDesc"], "multi":obj["multi"],//只能选择一个上传 ? "fileTypeExts":obj["fileTypeExts"], "swf":ctx+"/train/js/uploadify/uploadify.swf", "uploader":ctx+"/pub/pubFile/upload.do", "formData":{"ps":JSON.stringify({"TABLE_NAME":pTableName,"OBJ_TYPE":pObjType,"OBJ_ID":pObjId,"USER_ID":pUserId})}, "onQueueComplete":function(queueData) { //$.messager.progress('close'); initTable(pTableName,pObjType,pObjId); }, "onUploadSuccess":function(file,data,response) { if (response) { var o=eval("("+data+")"); if (o&&o.RSCode!='Y') { layer.msg(o.resultDesc,{shift: 6}); } } layer.close(index); }, "onSelect":function(file) { //$("#upfile").val(""); }, "onUploadStart":function(file) { index = layer.load(1, { shade: [0.1,'#fff'] //0.1透明度的白色背景 }); //myFunc.cancel(); // 取消文件上传 // $.messager.progress({msg:"正在上传..."}); }, "onInit": function() { //myFunc.getThis(); // 获取myFunc } }); ``` 下面是界面 ![图片说明](https://img-ask.csdn.net/upload/201703/01/1488356427_821341.png) 另外两个按钮都是点一下就可以了 只有添加按钮必须双击才会弹出
python怎么做弹出框
那个python的弹出框怎么做啊?类似于JavaScript的alert和vbscript的msgbox
文件上传如何在点击确定按钮时,上传文件
表单中有文件也有输入框,想要在弹出的选择文件对话框点击确定时,就完成上传文件 表单只传递输入框的值到后台,弹出的选择文件对话框点击确定这个事件怎么写,用js怎么 弄
为什么使用bookstart框架里的模态框,会出现多次点击模态框按钮,弹出模态框的背景颜色会变深
![第一次点击模态框按钮,弹出模态框的背景颜色](https://img-ask.csdn.net/upload/201606/16/1466058978_153585.png) ![多次点击模态框按钮,弹出模态框的背景颜色](https://img-ask.csdn.net/upload/201606/16/1466059047_650327.png)
关于submit的input按钮点击提交后弹出提交成功框,不能正常显示的问题。
是这样的,我的一个提交按钮点击后会弹出一个成功的的页面。 由于这个提交框也是点击其他按钮后才出现的,结果我一点几提交按钮,整个全部消失了,请问这是什么原因?
在jsp页面,点击一个按钮,出现一个选择地址的弹出框,然后吧选择的地址传到后台
我在写Excel导出,功能已经实现了,但是我把那个存储位置给写死了,现在我想让页面弹出一个选择框 让用户自己选择地址。 我用的mvc框架,我不太明白这个弹出框怎么写的,是写前台还是 后台,还有网上说设置的一个头信息,我也不是很明白,不知道这个头信息写在哪 有牛人最好给我说的详细点! 最后贴个代码
页面上传文件,点击选择文件时,弹出的浏览框有没有办法过滤自己指定格式的文件
![图片说明](https://img-ask.csdn.net/upload/201605/27/1464313352_560306.png) 因为上传文件就是可能有很多文件需要找,就是希望能够过滤下,自己指定格式的文件,比如后缀名是.jsp、.ppt、点击选择文件,弹出的窗口只显示后缀名是.jsp;.ppt的文件,有没有办法做到???????????、、
设置了AlertDialog之后,为什么点击所有按钮都弹出提示框。
在为一个按钮设置好了单击事件监听器之后,只想让这个按钮点击之后弹出一个简单消息提示框,但设置好后我点击所有按钮都弹出了消息提示框。 ![图片说明](https://img-ask.csdn.net/upload/201908/13/1565691160_518394.jpg) ![图片说明](https://img-ask.csdn.net/upload/201908/13/1565691181_862305.jpg)
窗体程序dropdown下拉控件怎么感知弹出框的弹出?
窗体程序dropdown下拉控件怎么感知弹出框的弹出?怎么控制和操作弹出框的弹出位置和方向选择?
jsp页面导入excl文件并将文件内容解析存进数据库,求实例
现在要做一个jsp页面功能按钮导入excl文件,是点击按钮弹出文件选取框的那种!然后将文件接收到后台解析,最后存入数据库
MFC模拟操作时如何模拟点击弹出消息框的确定选项
在做MFC项目,想实现自己的A程序模拟操作正在运行的B程序,通过句柄可以执行部分操作,但是B程序弹出的消息框没办法模拟点击“确定”选项,请问该怎么做?
相见恨晚的超实用网站
搞学习 知乎:www.zhihu.com 简答题:http://www.jiandati.com/ 网易公开课:https://open.163.com/ted/ 网易云课堂:https://study.163.com/ 中国大学MOOC:www.icourse163.org 网易云课堂:study.163.com 哔哩哔哩弹幕网:www.bilibili.com 我要自学网:www.51zxw
花了20分钟,给女朋友们写了一个web版群聊程序
参考博客 [1]https://www.byteslounge.com/tutorials/java-ee-html5-websocket-example
爬虫福利二 之 妹子图网MM批量下载
爬虫福利一:27报网MM批量下载    点击 看了本文,相信大家对爬虫一定会产生强烈的兴趣,激励自己去学习爬虫,在这里提前祝:大家学有所成! 目标网站:妹子图网 环境:Python3.x 相关第三方模块:requests、beautifulsoup4 Re:各位在测试时只需要将代码里的变量 path 指定为你当前系统要保存的路径,使用 python xxx.py 或IDE运行即可。
字节跳动视频编解码面经
引言 本文主要是记录一下面试字节跳动的经历。 三四月份投了字节跳动的实习(图形图像岗位),然后hr打电话过来问了一下会不会opengl,c++,shador,当时只会一点c++,其他两个都不会,也就直接被拒了。 七月初内推了字节跳动的提前批,因为内推没有具体的岗位,hr又打电话问要不要考虑一下图形图像岗,我说实习投过这个岗位不合适,不会opengl和shador,然后hr就说秋招更看重基础。我当时
开源一个功能完整的SpringBoot项目框架
福利来了,给大家带来一个福利。 最近想了解一下有关Spring Boot的开源项目,看了很多开源的框架,大多是一些demo或者是一个未成形的项目,基本功能都不完整,尤其是用户权限和菜单方面几乎没有完整的。 想到我之前做的框架,里面通用模块有:用户模块,权限模块,菜单模块,功能模块也齐全了,每一个功能都是完整的。 打算把这个框架分享出来,供大家使用和学习。 为什么用框架? 框架可以学习整体
Java学习的正确打开方式
在博主认为,对于入门级学习java的最佳学习方法莫过于视频+博客+书籍+总结,前三者博主将淋漓尽致地挥毫于这篇博客文章中,至于总结在于个人,实际上越到后面你会发现学习的最好方式就是阅读参考官方文档其次就是国内的书籍,博客次之,这又是一个层次了,这里暂时不提后面再谈。博主将为各位入门java保驾护航,各位只管冲鸭!!!上天是公平的,只要不辜负时间,时间自然不会辜负你。 何谓学习?博主所理解的学习,它
程序员必须掌握的核心算法有哪些?
由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过
Python——画一棵漂亮的樱花树(不同种樱花+玫瑰+圣诞树喔)
最近翻到一篇知乎,上面有不少用Python(大多是turtle库)绘制的树图,感觉很漂亮,我整理了一下,挑了一些我觉得不错的代码分享给大家(这些我都测试过,确实可以生成喔~) one 樱花树 动态生成樱花 效果图(这个是动态的): 实现代码 import turtle as T import random import time # 画樱花的躯干(60,t) def Tree(branch
深深的码丨Java HashMap 透析
HashMap 相关概念 HashTab、HashMap、TreeMap 均以键值对像是存储或操作数据元素。HashTab继承自Dictionary,HashMap、TreeMap继承自AbstractMap,三者均实现Map接口 **HashTab:**同步哈希表,不支持null键或值,因为同步导致性能影响,很少被使用 **HashMap:**应用较多的非同步哈希表,支持null键或值,是键值对...
大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了
大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...
linux系列之常用运维命令整理笔录
本博客记录工作中需要的linux运维命令,大学时候开始接触linux,会一些基本操作,可是都没有整理起来,加上是做开发,不做运维,有些命令忘记了,所以现在整理成博客,当然vi,文件操作等就不介绍了,慢慢积累一些其它拓展的命令,博客不定时更新 顺便拉下票,我在参加csdn博客之星竞选,欢迎投票支持,每个QQ或者微信每天都可以投5票,扫二维码即可,http://m234140.nofollow.ax.
Python 基础(一):入门必备知识
目录1 标识符2 关键字3 引号4 编码5 输入输出6 缩进7 多行8 注释9 数据类型10 运算符10.1 常用运算符10.2 运算符优先级 1 标识符 标识符是编程时使用的名字,用于给变量、函数、语句块等命名,Python 中标识符由字母、数字、下划线组成,不能以数字开头,区分大小写。 以下划线开头的标识符有特殊含义,单下划线开头的标识符,如:_xxx ,表示不能直接访问的类属性,需通过类提供
程序员接私活怎样防止做完了不给钱?
首先跟大家说明一点,我们做 IT 类的外包开发,是非标品开发,所以很有可能在开发过程中会有这样那样的需求修改,而这种需求修改很容易造成扯皮,进而影响到费用支付,甚至出现做完了项目收不到钱的情况。 那么,怎么保证自己的薪酬安全呢? 我们在开工前,一定要做好一些证据方面的准备(也就是“讨薪”的理论依据),这其中最重要的就是需求文档和验收标准。一定要让需求方提供这两个文档资料作为开发的基础。之后开发
网页实现一个简单的音乐播放器(大佬别看。(⊙﹏⊙))
今天闲着无事,就想写点东西。然后听了下歌,就打算写个播放器。 于是乎用h5 audio的加上js简单的播放器完工了。 欢迎 改进 留言。 演示地点跳到演示地点 html代码如下`&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;music&lt;/title&gt; &lt;meta charset="utf-8"&gt
Python十大装B语法
Python 是一种代表简单思想的语言,其语法相对简单,很容易上手。不过,如果就此小视 Python 语法的精妙和深邃,那就大错特错了。本文精心筛选了最能展现 Python 语法之精妙的十个知识点,并附上详细的实例代码。如能在实战中融会贯通、灵活使用,必将使代码更为精炼、高效,同时也会极大提升代码B格,使之看上去更老练,读起来更优雅。 1. for - else 什么?不是 if 和 else 才
数据库优化 - SQL优化
前面一篇文章从实例的角度进行数据库优化,通过配置一些参数让数据库性能达到最优。但是一些“不好”的SQL也会导致数据库查询变慢,影响业务流程。本文从SQL角度进行数据库优化,提升SQL运行效率。 判断问题SQL 判断SQL是否有问题时可以通过两个表象进行判断: 系统级别表象 CPU消耗严重 IO等待严重 页面响应时间过长
2019年11月中国大陆编程语言排行榜
2019年11月2日,我统计了某招聘网站,获得有效程序员招聘数据9万条。针对招聘信息,提取编程语言关键字,并统计如下: 编程语言比例 rank pl_ percentage 1 java 33.62% 2 c/c++ 16.42% 3 c_sharp 12.82% 4 javascript 12.31% 5 python 7.93% 6 go 7.25% 7
通俗易懂地给女朋友讲:线程池的内部原理
餐厅的约会 餐盘在灯光的照耀下格外晶莹洁白,女朋友拿起红酒杯轻轻地抿了一小口,对我说:“经常听你说线程池,到底线程池到底是个什么原理?”我楞了一下,心里想女朋友今天是怎么了,怎么突然问出这么专业的问题,但做为一个专业人士在女朋友面前也不能露怯啊,想了一下便说:“我先给你讲讲我前同事老王的故事吧!” 大龄程序员老王 老王是一个已经北漂十多年的程序员,岁数大了,加班加不动了,升迁也无望,于是拿着手里
经典算法(5)杨辉三角
杨辉三角 是经典算法,这篇博客对它的算法思想进行了讲解,并有完整的代码实现。
腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹?
昨天,有网友私信我,说去阿里面试,彻底的被打击到了。问了为什么网上大量使用ThreadLocal的源码都会加上private static?他被难住了,因为他从来都没有考虑过这个问题。无独有偶,今天笔者又发现有网友吐槽了一道腾讯的面试题,我们一起来看看。 腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹? 在互联网职场论坛,一名程序员发帖求助到。二面腾讯,其中一个算法题:64匹
面试官:你连RESTful都不知道我怎么敢要你?
面试官:了解RESTful吗? 我:听说过。 面试官:那什么是RESTful? 我:就是用起来很规范,挺好的 面试官:是RESTful挺好的,还是自我感觉挺好的 我:都挺好的。 面试官:… 把门关上。 我:… 要干嘛?先关上再说。 面试官:我说出去把门关上。 我:what ?,夺门而去 文章目录01 前言02 RESTful的来源03 RESTful6大原则1. C-S架构2. 无状态3.统一的接
JDK12 Collectors.teeing 你真的需要了解一下
前言 在 Java 12 里面有个非常好用但在官方 JEP 没有公布的功能,因为它只是 Collector 中的一个小改动,它的作用是 merge 两个 collector 的结果,这句话显得很抽象,老规矩,我们先来看个图(这真是一个不和谐的图????): 管道改造经常会用这个小东西,通常我们叫它「三通」,它的主要作用就是将 downstream1 和 downstre...
为啥国人偏爱Mybatis,而老外喜欢Hibernate/JPA呢?
关于SQL和ORM的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行了一番讨论,感触还是有一些,于是就有了今天这篇文。 声明:本文不会下关于Mybatis和JPA两个持久层框架哪个更好这样的结论。只是摆事实,讲道理,所以,请各位看官勿喷。 一、事件起因 关于Mybatis和JPA孰优孰劣的问题,争论已经很多年了。一直也没有结论,毕竟每个人的喜好和习惯是大不相同的。我也看
项目中的if else太多了,该怎么重构?
介绍 最近跟着公司的大佬开发了一款IM系统,类似QQ和微信哈,就是聊天软件。我们有一部分业务逻辑是这样的 if (msgType = "文本") { // dosomething } else if(msgType = "图片") { // doshomething } else if(msgType = "视频") { // doshomething } else { // doshom...
致 Python 初学者
欢迎来到“Python进阶”专栏!来到这里的每一位同学,应该大致上学习了很多 Python 的基础知识,正在努力成长的过程中。在此期间,一定遇到了很多的困惑,对未来的学习方向感到迷茫。我非常理解你们所面临的处境。我从2007年开始接触 python 这门编程语言,从2009年开始单一使用 python 应对所有的开发工作,直至今天。回顾自己的学习过程,也曾经遇到过无数的困难,也曾经迷茫过、困惑过。开办这个专栏,正是为了帮助像我当年一样困惑的 Python 初学者走出困境、快速成长。希望我的经验能真正帮到你
“狗屁不通文章生成器”登顶GitHub热榜,分分钟写出万字形式主义大作
一、垃圾文字生成器介绍 最近在浏览GitHub的时候,发现了这样一个骨骼清奇的雷人项目,而且热度还特别高。 项目中文名:狗屁不通文章生成器 项目英文名:BullshitGenerator 根据作者的介绍,他是偶尔需要一些中文文字用于GUI开发时测试文本渲染,因此开发了这个废话生成器。但由于生成的废话实在是太过富于哲理,所以最近已经被小伙伴们给玩坏了。 他的文风可能是这样的: 你发现,...
程序员:我终于知道post和get的区别
是一个老生常谈的话题,然而随着不断的学习,对于以前的认识有很多误区,所以还是需要不断地总结的,学而时习之,不亦说乎
《程序人生》系列-这个程序员只用了20行代码就拿了冠军
你知道的越多,你不知道的越多 点赞再看,养成习惯GitHub上已经开源https://github.com/JavaFamily,有一线大厂面试点脑图,欢迎Star和完善 前言 这一期不算《吊打面试官》系列的,所有没前言我直接开始。 絮叨 本来应该是没有这期的,看过我上期的小伙伴应该是知道的嘛,双十一比较忙嘛,要值班又要去帮忙拍摄年会的视频素材,还得搞个程序员一天的Vlog,还要写BU...
加快推动区块链技术和产业创新发展,2019可信区块链峰会在京召开
11月8日,由中国信息通信研究院、中国通信标准化协会、中国互联网协会、可信区块链推进计划联合主办,科技行者协办的2019可信区块链峰会将在北京悠唐皇冠假日酒店开幕。   区块链技术被认为是继蒸汽机、电力、互联网之后,下一代颠覆性的核心技术。如果说蒸汽机释放了人类的生产力,电力解决了人类基本的生活需求,互联网彻底改变了信息传递的方式,区块链作为构造信任的技术有重要的价值。   1...
程序员把地府后台管理系统做出来了,还有3.0版本!12月7号最新消息:已在开发中有github地址
第一幕:缘起 听说阎王爷要做个生死簿后台管理系统,我们派去了一个程序员…… 996程序员做的梦: 第一场:团队招募 为了应对地府管理危机,阎王打算找“人”开发一套地府后台管理系统,于是就在地府总经办群中发了项目需求。 话说还是中国电信的信号好,地府都是满格,哈哈!!! 经常会有外行朋友问:看某网站做的不错,功能也简单,你帮忙做一下? 而这次,面对这样的需求,这个程序员...
网易云6亿用户音乐推荐算法
网易云音乐是音乐爱好者的集聚地,云音乐推荐系统致力于通过 AI 算法的落地,实现用户千人千面的个性化推荐,为用户带来不一样的听歌体验。 本次分享重点介绍 AI 算法在音乐推荐中的应用实践,以及在算法落地过程中遇到的挑战和解决方案。 将从如下两个部分展开: AI算法在音乐推荐中的应用 音乐场景下的 AI 思考 从 2013 年 4 月正式上线至今,网易云音乐平台持续提供着:乐屏社区、UGC...
相关热词 c# 图片上传 c# gdi 占用内存 c#中遍历字典 c#控制台模拟dos c# 斜率 最小二乘法 c#进程延迟 c# mysql完整项目 c# grid 总行数 c# web浏览器插件 c# xml 生成xsd
立即提问