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]的值并显示在页面的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
JavaScript设计模式之原型模式(Object.create与prototype)介绍
这篇文章主要介绍了JavaScript设计模式之原型模式(Object.create与prototype)介绍,原型模式指使用原型实例来拷贝、创建新的可定制的对象,新建的对象,不需要知道原对象创建的具体过程,需要的朋友可以参考下2014-12-12
IE6浏览器中window.location.href无效的解决方法
这篇文章主要介绍了IE6浏览器中window.location.href无效的解决方法,给出了正确与错误的实例对比,分析跳转无效的原因与解决方法,是非常实用的技巧,需要的朋友可以参考下2014-11-11
这篇文章主要为大家介绍了uni app跨端自定义指令实现按钮权限详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
本文给大家分享一个自己写的基于原生JS写Ajax的请求函数功能,需要的朋友可以参考下2017-12-12
syntaxhighlighter 使用方法...2007-07-07
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
这篇文章主要介绍了JS实现获取图片大小和预览的方法,结合完整实例形式分析了javascript针对不同浏览器处理图片上传与预览等操作的相关实现技巧,需要的朋友可以参考下2017-04-04
按位非运算符，简单的理解就是改变运算数的符号并减去1，当然，这是只是简单的理解能转换成number类型的数据2011-07-07
这篇文章主要介绍了JS实现带阴历的日历功能,结合实例形式分析了js阴历算法及实现带阴历的日历相关操作技巧,需要的朋友可以参考下2019-01-01
本文给大家介绍js修改地址栏参数的实例代码，并给大家附上用JS动态改变地址栏内容 window.location.href window.location.hash的方法，比较实用，需要的朋友参考下吧2016-06-06
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
下面小编就为大家带来一篇JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
最新评论