首页 > 分享 > input[type=file] 获取上传文件的内容

input[type=file] 获取上传文件的内容

最新推荐文章于 2024-10-17 14:10:39 发布

.NET跨平台 于 2018-11-24 17:40:46 发布

上代码:

<input type="file" name="file" id="fileUpload"> 1

jquery:

$("#fileUpload").change(function () { console.log($("#fileUpload")[0].files); }); 123

打印结果:
在这里插入图片描述

input file 读取文件内容

<!DOCTYPE html> <html lang="en"> <head> <title></title> <script src="js/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> if(typeof FileReader == "undified") { alert("您老的浏览器不行了!"); } function showDataByURL() { var resultFile = document.getElementById("fileDemo").files[0]; if (resultFile) { var reader = new FileReader(); reader.readAsDataURL(resultFile); reader.onload = function (e) { var urlData = this.result; document.getElementById("result").innerHTML += "<img src='" + urlData + "' alt='" + resultFile.name + "' />"; }; } } function showDataByBinaryString() { var resultFile = document.getElementById("fileDemo").files[0]; if (resultFile) { var reader = new FileReader(); //异步方式,不会影响主线程 reader.readAsBinaryString(resultFile); reader.onload = function(e) { var urlData = this.result; document.getElementById("result").innerHTML += urlData; }; } } function showDataByText() { var resultFile = document.getElementById("fileDemo").files[0]; if (resultFile) { var reader = new FileReader(); reader.readAsText(resultFile,'UTF-8'); reader.onload = function (e) { var urlData = this.result; document.getElementById("result").innerHTML += urlData; }; } } </script> </head> <body> <input type="file" name="fileDemo" id="fileDemo" multep/> <input type="button" value="readAsDataURL" id="readAsDataURL" onclick="showDataByURL();"/> <input type="button" value="readAsBinaryString" id="readAsBinaryString" onclick="showDataByBinaryString();"/> <input type="button" value="readAsText" id="readAsText" onclick="showDataByText();"/> <div id="result"> </div> </body> </html>

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960

监听input上传文件,获取文件名称

在这里插入图片描述

<div class="import-box pr" > <span class="model-address-txt">导入文件:</span> <input type="text" class="address-input Js_address-input input-wid" readonly> <label class="file-box" for="file"> <span class="look-file">浏览</span> <input id="file" type="file" class="file-input Js_file-input" > </label> </div> 12345678

//监听input $(".Js_file-input").on("change",function (e) { var e = e || window.event; //获取 文件 个数 取消的时候使用 var files = e.target.files; if(files.length>0){ // 获取文件名 并显示文件名 var fileName = files[0].name; $(".Js_address-input").val(fileName); }else{ //清空文件名 $(".Js_address-input").val(""); } }); 1234567891011121314

获取event下的target的name值,利用length为判断条件,小伙伴,可以先打印一下看看,这样利于理解,不喜勿喷!谢谢

相关知识

onclick触发type=file并上传文件
input[type=“file”] change事件第二次不触发
使input type=“file” 不可编辑
js上传文件带参数,并且,返回给前台文件路径,解析上传的xml文件,存储到数据库中
文件上传模块formidable如何使用
前端——table标签和form标签和控件:table,input的type类型,select和option,label,textarea
自定义(滑动条)input[type=“range”]样式
上传图片功能学习
HTML网页设计:十一、表单
input type=range 进度条的自定义样式

网址: input[type=file] 获取上传文件的内容 https://m.huajiangbk.com/newsview849824.html

所属分类:花卉
上一篇: input type=“file
下一篇: Python 选择与循环