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 相关文章推荐
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
在js中单选框和复选框获取值的方式
Nov 06 Javascript
JavaScript和JQuery实用代码片段(一)
Apr 07 Javascript
基于Jquery实现表格动态分页实现代码
Jun 21 Javascript
基于javascript滚动图片具体实现
Nov 18 Javascript
div实现自适应高度的textarea实现angular双向绑定
Jan 08 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 Javascript
ionic实现下拉刷新载入数据功能
May 11 Javascript
JavaScript设计模式之调停者模式实例详解
Feb 03 Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 Javascript
JS window对象简单操作完整示例
Jan 14 Javascript
Nuxt.js 静态资源和打包的操作
Nov 06 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
PHP读取XML值的代码(推荐)
2011/01/01 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
PHP基于反射机制实现插件的可插拔设计详解
2016/11/10 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
JS 动态加载脚本的4种方法
2009/05/05 Javascript
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
2013/11/17 Javascript
jquery实现增加删除行的方法
2015/02/03 Javascript
编写自己的jQuery提示框(Tip)插件
2015/02/05 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
jQuery基于排序功能实现上移、下移的方法
2016/11/26 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
js如何获取网页所有图片
2017/05/12 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
Python中表示字符串的三种方法
2017/09/06 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
python爬虫系列Selenium定向爬取虎扑篮球图片详解
2017/11/15 Python
python主线程捕获子线程的方法
2018/06/17 Python
python实现机器学习之元线性回归
2018/09/06 Python
Python中常用的内置方法
2019/01/28 Python
python和c语言哪个更适合初学者
2020/06/22 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
TensorFlow低版本代码自动升级为1.0版本
2021/02/20 Python
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
英国工具中心:UK Tool Centre
2017/07/10 全球购物
美国现代家具网站:Design Within Reach
2018/07/19 全球购物
年度考核自我评价
2014/01/25 职场文书
师德师风个人反思
2014/04/28 职场文书
2016春节家属慰问信
2015/03/25 职场文书
土木工程毕业答辩开场白
2015/05/29 职场文书
运输公司工作总结
2015/08/11 职场文书
法制教育讲座心得体会
2016/01/14 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书
html+css实现环绕倒影加载特效
2021/07/07 HTML / CSS