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)限詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
原生JS寫Ajax的請求函數(shù)功能
本文給大家分享一個自己寫的基于原生JS寫Ajax的請求函數(shù)功能,需要的朋友可以參考下
2017-12-12
syntaxhighlighter 使用方法
syntaxhighlighter 使用方法...
2007-07-07
JS實現(xiàn)獲取圖片大小和預(yù)覽的方法完整實例【兼容IE和其它瀏覽器】
這篇文章主要介紹了JS實現(xiàn)獲取圖片大小和預(yù)覽的方法,結(jié)合完整實例形式分析了javascript針對不同瀏覽器處理圖片上傳與預(yù)覽等操作的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
2017-04-04
JS按位非(~)運算符與~~運算符的理解分析
按位非運算符，簡單的理解就是改變運算數(shù)的符號并減去1，當(dāng)然，這是只是簡單的理解能轉(zhuǎn)換成number類型的數(shù)據(jù)
2011-07-07
JS實現(xiàn)帶陰歷的日歷功能詳解
這篇文章主要介紹了JS實現(xiàn)帶陰歷的日歷功能,結(jié)合實例形式分析了js陰歷算法及實現(xiàn)帶陰歷的日歷相關(guān)操作技巧,需要的朋友可以參考下
2019-01-01
JS修改地址欄參數(shù)實例代碼
本文給大家介紹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