input[type='file']获取上传文件路径案例

最新推荐文章于 2021-12-17 14:49:09 发布
最新推荐文章于 2021-12-17 14:49:09 发布
阅读量7.9k 收藏 17
点赞数
文章标签： javascript 前端 c# ViewUI
原文链接：http://www.cnblogs.com/xiaoyaoxingchen/p/9161591.html
版权

最近在项目时，需要获取用户的上传文件的路径，便写了一个demo：

<body>
  <input type="file" name="" value="">

  <script>
    var input = document.getElementsByTagName("input")[0];
    console.log(input);
    input.onchange = function () {
      var that = this;
      console.log(that.files[0]);
      var src = window.URL.createObjectURL(that.files[0])
      console.log(src);
      var img = document.createElement("img");
      img.style.width = "200px";
      im
最低0.47元/天 解锁文章
ddr66288
关注
  • 0
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
input文件上传
qq_41801117的博客
05-15 2221
最近做项目，遇见了一些问题，特此记录一下。 图片上传问题 由于input的type=‘file’时，change事件会判断上传文件是否一样，如果不一样，才会触发该事件。因此，就导致了一个问题，前后2次上传的图片文件一样，就不会触发上传事件。 解决方法： 在图片重置的时候： document.getElementById('***').value = '' 重置该input框的value值 图片下载问题 利用a标签进行下载。 export function download(id, fileName='xi
input type=‘file‘ 前端实现文件上传
weixin_41141811的博客
12-31 846
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文件上传</title> <script src="jquery/jquery-1.11.2.js"></script> </head> <body> <input type="file" name="" id="upfile" value..
<input type='file'>选择文件后自动上传文件
蒲公英的约定
05-22 5万+
想要一个选择了文件就自动上传的效果，但之前的 都是写在form表单中来提交的。借助jquery的ajaxfileupload.js，可以这样子弄： 正面： function uploadFile(obj, type) { $.ajaxFileUpload({ url : "http://localhost:8081/ws2/servlet/fileUpload", secur
html file文本框,HTML元素 - input type=file控件上传文件的问题
weixin_39589693的博客
06-04 416
今同事问了个关于触发inputtype=file控件的问题，当时看似简单可是一下子又没搞定，百思不得其解，回来试了一下，终于找到问题，赶紧整理篇文章说道说道。其实很简单，哈哈！这个控件是创建文件上载用的，该控件带有一个文本框和一个浏览按钮。一般我们要涉及到这方面的开发的时候都会用到这个控件。简单实现：像如下代码片段，我们轻松实现了这个上传文件的页面制作enctype="multipart/form...
input 详解之文件上传、new FormData()对象
muzidigbig的博客
11-27 5768
一、浏览器post表单提交 通常的input组件表单提交时，按照form属性提交的其中enctype=”application/x-www-form-urlencoded”是默认值 new Formdata()函数支持传入一个数组参数，用于添加一系列键值对到FormData对象中。 let formData = new FormData([ ['key1', 'value1'], ['key2', 'value2'] ]);用已有的表单来初始化一个对象实例
关于input[type=file]表单控件的相关知识点
海阳之新's blog
11-12 620
/* Banner图片 */ $('#banner').on('change', function (e) { var files = this.files; var file; if (files && files.length) { f
HTML input type=file文件选择表单元素.docx
11-22
一、input type=file 文件选择表单元素 input type=file 是 HTML 中的一种表单元素，用于选择文件并上传到服务器。HTML5 之前的 input type=file 元素只能一次上传一张图片，无法满足一次上传多图的交互需求。因此...
vue中使用input[type=”file”]实现文件上传功能
12-29
注意:input[type=file] 标签中的属性accept=application/msword,application/pdf 在pc上正常,但是在手机ios和android上这个文件格式限制会被忽略,所以需要在js中增加格式的判断,以及对应显示样式的设置.(我也是刚...
input type=file 调取手机照相机和选择照片上传
12-17
input type=file 调取手机照相机和选择照片上传 附件下载demo导入运行即可
定义input type=file 样式的方法
12-14
input type=”file” name=”file” /> 既然这样我们就用一个text和一个button来显示这个file的样式，html代码是这样： 复制代码代码如下: <div class=”file-box”> <form action=”” method=”post” ...
vue中使用input[type="file"]实现文件上传功能
10-18
主要介绍了vue中使用input[type="file"]实现文件上传功能，实现代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
获取input上传文件文件名及扩展名
xuexizhe88的博客
08-09 4万+
1、使用input标签的type=“file”，上传文件，获取上传文件的文件名和扩展名； 代码如下： #mybtn{ width: 100px; height: 30px; font-size: 18px; background-color: lightcoral; text-align: center; }
input file详细介绍、更改css样式、获取图片地址、彻底清空上传文件（建议收藏）
AC_Surprise的博客
09-02 1万+
介绍 input 全部类型 input 框的类型到底有多少种呢，零零散散算下来有二十多种 总述 常用的并且能为大多数浏览器所识别的类型大概有：text、password、number、button、reset、submit、hidden、radio、checkbox、file、image、color、range、date、month、week、time、datetime-local。 另外还有一些类型：tel、email、url、datetime、search。这些类型部分浏览器不支持识别或校验。 text
input type=file 获取选择文件名称、路径方法及input上传按钮美化
Sun_blog
12-17 1万+
input type=file 获取选中文件名称、路径方法及input上传按钮美化
js/jquery 获取本地文件的文件路劲 获取input框中type=‘file’ 中的文件路径
热门推荐
奋斗の小鸟
11-27 9万+
分为两部分，自己去判断浏览器的类型，然后调用不同函数，一定要引入jQuery，上面是我的Jquery的路径 在IE低版本中可以直接获得文件路径，不过在高版本和firefox和chrome中是不允许的。那是个漏洞 这样就能实现不用上传就可以实现图片的实时预览了 1.IE内核的部分，IE10 没问题，别的没试， 无标题文档 var imgurl = ""; func
html上传图片得到图片路径,input type=file上传的图片怎样获取图片路径给img的src属性...
weixin_39851887的博客
06-04 3287
部分html代码<div id="upload"><form action="{:U('Index/uploadhandler')}" enctype="multipart/form-data" method="post" id="imgform"><div id="imglist"></div><div id="updiv"><i...
html 获得file文本完整路径
u011425213的专栏
10-15 4858
相 信很多人都使用过这样的HTML控件，它看起来非常普通，是我们在做Web应用程序中用于上传客户端本地文件时不可缺少的控件，然而最近 我发现这个控件在最新的FireFox浏览器（或者最新的IE8中也会存在这个问题，我没有尝试过，读者可以试一下）中却失去了效果，导致我们在通过这个 控件的value属性得到的值中只包含了文件名而没有文件路径，这个在IE7中是可以正常获取到全文件名的（即文件完整路径+文
input type=file获取文件绝对路径
最新发布
03-14
可以使用File API中的FileReader对象来获取文件的绝对路径。具体实现方法可以参考以下代码： ``` <input type="file" id="fileInput"> <script> var fileInput = document.getElementById("fileInput"); fileInput.addEventListener("change", function() { var file = fileInput.files[0]; var reader = new FileReader(); reader.onload = function() { console.log(reader.result); }; reader.readAsDataURL(file); }); </script> ``` 这段代码可以在文件选择后，将文件的绝对路径输出到控制台中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值