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 相关文章推荐
JavaScript的面向对象方法以及差别
Mar 31 Javascript
javascript 防止刷新,后退,关闭
Aug 07 Javascript
Fixie.js 自动填充内容的插件
Jun 28 Javascript
关于JS控制代码暂停的实现方法分享
Oct 11 Javascript
如何让div span等元素能响应键盘事件操作指南
Nov 13 Javascript
JS字符串处理实例代码
Aug 05 Javascript
javascript实现playfair和hill密码算法
Dec 07 Javascript
JS+CSS实现DIV层的展开、收缩效果
Jan 28 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
Jun 13 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 Javascript
详解Vue-cli 创建的项目如何跨域请求
May 18 Javascript
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
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
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
PHP获取当前时间不准确问题解决方案
2020/08/14 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
jquery图片延迟加载 前端开发技能必备系列
2012/06/18 Javascript
JS关键字球状旋转效果的实例代码
2013/11/29 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
2014/05/28 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
Node.js与Sails redis组件的使用教程
2017/02/14 Javascript
JS实现数组去重复值的方法示例
2017/02/18 Javascript
Vue-router 类似Vuex实现组件化开发的示例
2017/09/15 Javascript
详解VueJS应用中管理用户权限
2018/02/02 Javascript
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
2018/07/09 Javascript
如何为vuex实现带参数的 getter和state.commit
2019/01/04 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
探究数组排序提升Python程序的循环的运行效率的原因
2015/04/01 Python
tensorflow saver 保存和恢复指定 tensor的实例讲解
2018/07/26 Python
python中字符串内置函数的用法总结
2018/09/13 Python
python和go语言的区别是什么
2020/07/20 Python
关于python中导入文件到list的问题
2020/10/31 Python
使用numpngw和matplotlib生成png动画的示例代码
2021/01/24 Python
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
设备管理实施方案
2014/05/31 职场文书
预备党员对照检查材料思想汇报
2014/09/24 职场文书
退休党员个人对照检查材料思想汇报
2014/09/29 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
2014年综治维稳工作总结
2014/11/17 职场文书
五好家庭申报材料
2014/12/20 职场文书
因公司原因离职的辞职信范文
2015/05/12 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
自书遗嘱范文
2015/08/07 职场文书
2016年十一促销广告语
2016/01/28 职场文书
正则表达式拆分url实例代码
2022/02/24 Java/Android