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