JS獲取input[file]的值并顯示在頁面的實現(xiàn)方法
更新時間：2018年03月09日 16:52:32 作者：chueia
下面小編就為大家分享一篇JS獲取input[file]的值并顯示在頁面的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
實例如下所示：
$(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]的值并顯示在頁面的實現(xiàn)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript設(shè)計模式之原型模式(Object.create與prototype)介紹
這篇文章主要介紹了JavaScript設(shè)計模式之原型模式(Object.create與prototype)介紹,原型模式指使用原型實例來拷貝、創(chuàng)建新的可定制的對象,新建的對象,不需要知道原對象創(chuàng)建的具體過程,需要的朋友可以參考下2014-12-12
IE6瀏覽器中window.location.href無效的解決方法
這篇文章主要介紹了IE6瀏覽器中window.location.href無效的解決方法,給出了正確與錯誤的實例對比,分析跳轉(zhuǎn)無效的原因與解決方法,是非常實用的技巧,需要的朋友可以參考下2014-11-11
uni?app跨端自定義指令實現(xiàn)按鈕權(quán)限
這篇文章主要為大家介紹了uni?app跨端自定義指令實現(xiàn)按鈕權(quán)限詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
本文給大家分享一個自己寫的基于原生JS寫Ajax的請求函數(shù)功能,需要的朋友可以參考下2017-12-12
syntaxhighlighter 使用方法...2007-07-07
JS實現(xiàn)獲取圖片大小和預覽的方法完整實例【兼容IE和其它瀏覽器】
這篇文章主要介紹了JS實現(xiàn)獲取圖片大小和預覽的方法,結(jié)合完整實例形式分析了javascript針對不同瀏覽器處理圖片上傳與預覽等操作的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-04-04
按位非運算符，簡單的理解就是改變運算數(shù)的符號并減去1，當然，這是只是簡單的理解能轉(zhuǎn)換成number類型的數(shù)據(jù)2011-07-07
這篇文章主要介紹了JS實現(xiàn)帶陰歷的日歷功能,結(jié)合實例形式分析了js陰歷算法及實現(xiàn)帶陰歷的日歷相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
本文給大家介紹js修改地址欄參數(shù)的實例代碼，并給大家附上用JS動態(tài)改變地址欄內(nèi)容 window.location.href window.location.hash的方法，比較實用，需要的朋友參考下吧2016-06-06
JavaScript中的數(shù)組遍歷forEach()與map()方法以及兼容寫法介紹
下面小編就為大家?guī)硪黄狫avaScript中的數(shù)組遍歷forEach()與map()方法以及兼容寫法介紹。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05