JS獲取input[file]的值并顯示在頁面的實(shí)現(xiàn)方法
更新時(shí)間：2018年03月09日 16:52:32 作者：chueia
下面小編就為大家分享一篇JS獲取input[file]的值并顯示在頁面的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
實(shí)例如下所示：
$(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]的值并顯示在頁面的實(shí)現(xiàn)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
json數(shù)據(jù)與字符串的相互轉(zhuǎn)化示例
json與字符串之間的轉(zhuǎn)換，在使用中經(jīng)常會(huì)遇到，本文有個(gè)不錯(cuò)的示例，大家可以參考下，或許會(huì)有所幫助2013-09-09
這篇文章主要通過兩種方式介紹javascript記住用戶名和登錄密碼，有需要的小朋友可以來參考下2015-08-08
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)照片裁剪，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
jsp網(wǎng)頁搜索結(jié)果中實(shí)現(xiàn)選中一行使其高亮
在做搜索結(jié)果時(shí)為了好看需要將選中的行變的高亮些，下面有個(gè)不錯(cuò)的示例,需要的朋友可以參考下2014-02-02
Javascript遞歸打印Document層次關(guān)系實(shí)例分析
這篇文章主要介紹了Javascript遞歸打印Document層次關(guān)系的方法,實(shí)例分析了javascript中Document的層次關(guān)系,需要的朋友可以參考下2015-05-05
下雪了 javascript實(shí)現(xiàn)雪花飛舞
下雪了，這篇文章主要介紹了javascript實(shí)現(xiàn)雪花飛舞，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-04-04
javascript實(shí)現(xiàn)瀑布流自適應(yīng)遇到的問題及解決方案
這篇文章主要介紹了javascript實(shí)現(xiàn)瀑布流自適應(yīng)遇到的問題及解決方案,需要的朋友可以參考下2015-01-01
javascript的函數(shù)...2006-09-09
HTML5實(shí)現(xiàn)了script的async屬性，這個(gè)新的屬性可以讓js在瀏覽器中以非阻塞的模式加載，接下來介紹如何應(yīng)用此屬性，感興趣的朋友可以了解下2013-01-01
JavaScript中的Reflect對(duì)象詳解(ES6新特性)
這篇文章主要介紹了JavaScript中的Reflect對(duì)象(ES6新特性)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07