html5判断file选择状态,HTML input type=file选择图片立即显示
主要用来ul li来排列显示的图片。
引入jQuery
CSS 代码:
html,body{
margin:0px;
padding:0px;
}
#tdAdd input{
height: 100%;
width: 100%;
position: absolute;
top: 0px;
right: 0px;
z-index: 100;
filter: alpha(opacity = 0);
-moz-opacity: 0;
opacity: 0;
outline: none;
blr: expression(this.hideFocus = true);
cursor: pointer;
border: none;
}
ul{
list-style: none;
padding: 0px;
margin: 0px;
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
width:100%;
max-width:100%;
height:auto;
}
li {
float:left;
width:20%;
}
.imgwrap{
position: relative;
/* min-height: 100px; */
height: 100px;
margin: 5px;
text-align: center;
}
.imgwrap > img{
max-width: 100%;
height: 100px;
object-fit: cover;
object-position: center;
}
HTML 代码:
js代码:
var aaa = document.getElementById("btnAdd"); //获取显示图片的div元素
var input = document.getElementById("file_input"); //获取选择图片的input元素
var tdid = 1;
//这边是判断本浏览器是否支持这个API。
if(typeof FileReader==='undefined'){
aaa.innerHTML = "抱歉,你的浏览器不支持 FileReader";
input.setAttribute('disabled','disabled');
}else{
input.addEventListener('change',readFile,false); //如果支持就监听改变事件,一旦改变了就运行readFile函数。
}
function readFile(){
for (var index = 0; index'
+ '
').insertBefore($("#tdAdd"));
var imageStr = this.result;
/*延迟显示图片 模拟图片上传成功后的显示。
我这里就直接显示图片了。有兴趣的同学可以实现上传中的进度条效果。。
*/
setTimeout(function(){
var td = $("#" + tdid);
td.html("
");
var $closeImg = $('
').appendTo(td);
// $('').appendTo(td);
$closeImg.click(function(){
$(this).closest("li").remove();
});
}, 2000);
/* 上传图片到后台返回并显示。
$.ajax({
url: "upload.jhtm",
type: "POST",
data: {tdid :tdid, imageStr:imageStr},
dataType: "json",
cache: false,
success: function(data) {
var rtntdid = data.tdid;
var td = $("#" + rtntdid);
td.html("
");
var $closeImg = $('
').appendTo(td);
$('').appendTo(td);
$closeImg.click(function(){
$(this).closest("td").remove();
});
}
});
*/
}
}
}
html5判断file选择状态,HTML input type=file选择图片立即显示相关推荐
- input type=file 获取选择文件名称、路径方法及input上传按钮美化
获取文件名 document.getElementById('upload').files[0].name; 获取文件路径 document.getElementById('upload').valu ...
- input type=“file“属性详解,利用capture调用手机摄像头
<input> type 类型为 file 的标签,可以选择一个或多个文件,通过表单上传到服务器,也可以通过 Javascript 的 File API 对文件进行操作. 实例: < ...
- input type=file 标签禁止让用户手动输入
常规的Web应用程序中涉及到文件上传的部分都不可避免地会使用到<input type="file"/>控件,在上传文件的时候通过点击"浏览"按钮,在 ...
- js input type file onchange
js input type file onchange addEventListener函数 <input type="file" accept="image/*& ...
- 移动端h5实现手机拍照上传图片,相册选择上传图片input type=file
移动端h5实现手机拍照上传图片,相册选择上传图片input type=file 有不足或者不对的在下方留言,有不明白的也请在下方留言,虽然我不一定能看到,话不多说上代码,注释都写好了 <!doc ...
- html选择文件按钮美化,css input[type=file] 样式美化,input上传按钮美化
我们在做input文本上传的时候,html自带的上传按钮比较丑,如何对其进行美化呢?同理:input checkbox美化,input radio美化是一个道理的,后面文章会总结. 1. 思路 inp ...
- jq监听input type=file发生改变,即选择文件,并获取文件名称
jq监听input type="file"发生改变,即选择文件,并获取文件名称 <input id="fileupload" name="fil ...
- input[type=file]如何屏蔽“未选择任何文件”
在input中file文件类型是用来选择上传文件用的,但是这个文件选择框有个提示信息--未选择任何文件,甚至还可能不显示自己设置的提示信息,并且还可能点击空白地方(设置透明的opacity: 0;), ...
- 安卓微信内置浏览器 input type=file 选择文件未响应
微信内置浏览器采用以下形式选择图片不响应 <input type="file" accept="image/*"/> 解决思路 步骤一.调微信接口得 ...
最新文章
- Andorid的Linux基础教学之四 进程的生死存亡
- 详解 TCP 和 UDP
- 工作积累(五)——使用spring@Value注解实现常量功能
- 如何优雅的链式取值之 MayBe 函子
- 接触线叉环插座行业调研报告 - 市场现状分析与发展前景预测
- Linux puppet的安装配置部署
- 南京年薪10万以上软件人才买房买车可获退税
- 斯坦福公开课一键下载
- java连连看代码_Java版连连看
- 怎样在拼打日语汉字时,在字上同时显示假名
- asp.net 大型商家联盟会员积分消费管理系统,带微信和文档【源码分享】
- NOIP2012 普及组 T4 文化之旅
- 用Excel理解神经网络
- 关于Win10应用商店打不开一直转圈圈的问题
- 【51单片机】矩阵键盘逐行扫描法仿真实验+超详细Proteus仿真和Keil操作步骤
- msm8974 camera reset pin时序问题汇总
- 奔向光明阿波罗(2)
- 刚找到的OFFICESUITE V3.00注册码
- 伊拉克(Iraq)vs 沙特(Saudi Arabia) 成都-伊拉克的主场!
- android小闹钟课程设计,教学案例与反思:WINDOWS画图“设计一个小闹钟”
热门文章
- OpenCV_ cv2.imshow()
- python json文件传输图片
- 如何巧妙的申请换部门_如何设置户外广告?市城管局局长体验户外广告审批流程...
- 数据库MySQL/mariadb知识点——数据类型
- STM32示波器 信号发生器
- 转贴:电子商务如何提升网站转化率之:谷歌9条
- CentOS7安装Oracle11g R2全过程
- matlab气相分解反应动力学,第十二章 化学动力学.ppt
- java offsetdatetime_Java OffsetDateTime withHour()用法及代码示例
- 自定义鼠标指针轨迹_win10鼠标自定义颜色,鼠标属性设置,这样就不眯眼了