JS获取input[file]的值并显示在页面的实现方法


Posted in Javascript onMarch 09, 2018

实例如下所示:

$(document).on('change', '.photo-box .file', function () {
  //alert($(this).val());
  function getObjectURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) { // basic
      url = window.createObjectURL(file);
    } else if (window.URL != undefined) { // mozilla(firefox)
      url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) { // webkit or chrome
      url = window.webkitURL.createObjectURL(file);
    }
    return url;
  }
  var objUrl = getObjectURL(this.files[0]);
  console.log("objUrl = " + objUrl);
  var html = '<div class="photo-box"><img src="' + objUrl + '" alt=""><div class="photo-btn"><p>删除</p></div></div>';
  $(this).parent().parent().append(html);
})

以上这篇JS获取input[file]的值并显示在页面的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在js中单选框和复选框获取值的方式
Nov 06 Javascript
window.ActiveXObject使用说明
Nov 08 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
Dec 04 Javascript
js获取浏览器基本信息大全
Nov 27 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
js获取客户端操作系统类型的方法【测试可用】
May 27 Javascript
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
easyui下拉框动态级联加载的示例代码
Nov 29 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
Jul 22 Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 Javascript
vue 单页应用和多页应用的优劣
Oct 22 Javascript
js基础语法与maven项目配置教程案例
Jul 15 Javascript
vue获取当前点击的元素并传值的实例
Mar 09 #Javascript
vue.js获得当前元素的文字信息方法
Mar 09 #Javascript
vue element-ui 绑定@keyup事件无效的解决方法
Mar 09 #Javascript
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 #jQuery
在vue里面设置全局变量或数据的方法
Mar 09 #Javascript
vue2 全局变量的设置方法
Mar 09 #Javascript
JS扩展String.prototype.format字符串拼接的功能
Mar 09 #Javascript
You might like
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
JavaScript与函数式编程解释
2007/04/27 Javascript
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
JavaScript设计模式之工厂方法模式介绍
2014/12/28 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
2016/06/08 Javascript
漂亮! js实现颜色渐变效果
2016/08/12 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
2017/01/22 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
angular实现图片懒加载实例代码
2017/06/08 Javascript
js实现简单数字变动效果
2017/11/06 Javascript
jQuery中each遍历的三种方法实例分析
2018/09/07 jQuery
es6函数之箭头函数用法实例详解
2020/04/25 Javascript
全面解析Vue中的$nextTick
2020/12/24 Vue.js
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
Python饼状图的绘制实例
2019/01/15 Python
python用opencv批量截取图像指定区域的方法
2019/01/24 Python
详解python深浅拷贝区别
2019/06/24 Python
python打造爬虫代理池过程解析
2019/08/15 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
解决python多线程报错:AttributeError: Can't pickle local object问题
2020/04/08 Python
keras 读取多标签图像数据方式
2020/06/12 Python
Selenium执行完毕未关闭chromedriver/geckodriver进程的解决办法(java版+python版)
2020/12/07 Python
python 高阶函数简单介绍
2021/02/19 Python
Pytorch 中的optimizer使用说明
2021/03/03 Python
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
高中体育教学反思
2014/01/24 职场文书
《孔子拜师》教学反思
2014/02/24 职场文书
助人为乐模范事迹材料
2014/06/02 职场文书
大学生职业生涯规划大赛作品(精品)
2014/09/17 职场文书
运动会表扬稿范文
2015/05/05 职场文书
酒店开业主持词
2015/07/02 职场文书
小学同学聚会感言
2015/07/30 职场文书