js實現(xiàn)上傳圖片預覽方法
更新時間：2016年10月25日 08:35:56 作者：黎焱
這篇文章主要為大家詳細介紹了js實現(xiàn)上傳照片預覽的方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下
圖片預覽的 javascript 本地操作
早期瀏覽器，不能將本地圖片作為頁面元素處理，要實現(xiàn)圖片預覽需要將圖片先上傳到服務器，再從服務器取得進行預覽
現(xiàn)代的瀏覽器功能越來越全面，因此可以實現(xiàn)對一些數(shù)據(jù)的本地處理 Chrome MsEdge(ie11) Firefox
上圖的html
<tr> <td>縮略圖</td> <td> <a href="javascript::void(0)" class="fileBtn"> 選擇文件 <input type="file" id="file_pic"> </a> </td> </tr> <tr> <td></td> <td><img id="file_view" style="width:110px"></td> </tr>
// 下面用于圖片上傳預覽功能 objc : { file, pic, width }
yqUI.setImagePreview = function(objc) {
var docObj=document.getElementById(objc.file);
var imgObjPreview=document.getElementById(objc.pic);
if(docObj.files &&docObj.files[0]){
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = objc.width;
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
return true;
} else {
return false;
};
};
// 使用該控件, opts 配置對象
var opts = {
file : 'file_pic',
pic : 'file_view',
width : '180px'
}
yqUI.setImagePreview(opts);
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家?！?/p>
相關(guān)文章
這篇文章主要介紹了小程序跨頁面交互的作用與方法詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
這篇文章主要介紹了JavaScript設計模式之外觀模式介紹,外觀模式是用于由于子系統(tǒng)或程序組成較復雜而提供的一個高層界面接口,使用客戶端更容易訪問底層的程序或系統(tǒng)接口,需要的朋友可以參考下2014-12-12
JS教程:window.location使用方法的區(qū)別介紹
這篇文章介紹了window.location使用方法的區(qū)別，有需要的朋友可以參考一下2013-10-10
今天小編就為大家分享一篇layui 富文本賦值，取值，取純文本值的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
js和php獲取當前url的內(nèi)容在某些特殊的情況下還是蠻實用的，下面有個不錯的示例，感興趣的朋友可以參考下，希望對大家有所幫助2013-09-09
這篇文章主要介紹了JS獲取子、父、兄節(jié)點方法總結(jié)及JS獲取兄弟節(jié)點的兩種方法,需要的朋友可以參考下2017-08-08
javascript 獲取網(wǎng)頁參數(shù)系統(tǒng)
用處比較多，適合在當前網(wǎng)頁打開別的網(wǎng)站的內(nèi)容2008-07-07
js下彈出窗口的變通...2007-04-04
JavaScript中Async/Await通過同步的方式實現(xiàn)異步的方法介紹
在JavaScript的異步編程中，我們經(jīng)常使用回調(diào)函數(shù)、Promise和 Async/Await來解決異步操作的問題，Async/Await 又是Promise的語法糖，它的出現(xiàn)讓異步編程變得更加直觀和易于理解，本文將詳細講解Async/Await如何通過同步的方式實現(xiàn)異步2023-06-06
使用JavaScript優(yōu)雅實現(xiàn)文本展開收起功能
這篇文章主要為大家詳細介紹了如何使用JavaScript優(yōu)雅實現(xiàn)文本展開收起功能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-04-04