JS获取input[file]的值并显示在页面的实现方法
更新时间：2018年03月09日 16:52:32 作者：chueia
下面小编就为大家分享一篇JS获取input[file]的值并显示在页面的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
实例如下所示：
$(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]的值并显示在页面的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
json与字符串之间的转换，在使用中经常会遇到，本文有个不错的示例，大家可以参考下，或许会有所帮助2013-09-09
这篇文章主要通过两种方式介绍javascript记住用户名和登录密码，有需要的小朋友可以来参考下2015-08-08
这篇文章主要为大家详细介绍了微信小程序实现照片裁剪，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
在做搜索结果时为了好看需要将选中的行变的高亮些，下面有个不错的示例,需要的朋友可以参考下2014-02-02
Javascript递归打印Document层次关系实例分析
这篇文章主要介绍了Javascript递归打印Document层次关系的方法,实例分析了javascript中Document的层次关系,需要的朋友可以参考下2015-05-05
下雪了，这篇文章主要介绍了javascript实现雪花飞舞，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-04-04
这篇文章主要介绍了javascript实现瀑布流自适应遇到的问题及解决方案,需要的朋友可以参考下2015-01-01
javascript的函数...2006-09-09
HTML5实现了script的async属性，这个新的属性可以让js在浏览器中以非阻塞的模式加载，接下来介绍如何应用此属性，感兴趣的朋友可以了解下2013-01-01
JavaScript中的Reflect对象详解(ES6新特性)
这篇文章主要介绍了JavaScript中的Reflect对象(ES6新特性)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-07-07
最新评论