html圖片上傳閱覽並且點擊放大
阿新 • • 發佈：2017-10-09
toc 開機自啟 spec lai icon 知識 公司簡介 tag sed
分類：
暫無評論
* 以上用戶言論只代表其個人觀點，不代表CSDN網站的觀點或立場
靈犀一指
qq_31540195的博客
目錄視圖
摘要視圖
訂閱
html圖片上傳閱覽並且點擊放大
標簽： htmlhtml圖片上傳預覽電機房啊圖片 2016-08-12 10:02 661人閱讀 評論(0) 收藏 舉報 分類：
版權聲明：本文為博主原創文章，未經博主允許不得轉載。
在做項目的時候用到了圖片上傳，用的是網上找到的一個bootstrap模板，裏面的有比較好的圖片上傳預覽功能，但是無法點擊放大圖片，感覺這樣用戶體驗不怎麽好，所以就想自己加一個點擊放大圖片的功能上去；用到了一個GitHub的開源項目Viewer.js；地址：https://github.com/fengyuanchen/viewer；
但是在開發的時候發現對於原本就已經加載的圖片是可以放大的，但是對於自己上傳的圖片放大不了，猜想了一下可能是因為bootstrap模板是在js裏面用代碼添加了一個img來顯示上傳的圖片，而Viewer.js無法找到這個img，所以點擊之後放大不了。因為剛開始接觸這方面，所以源碼也沒怎麽看懂，不知道這個猜想對不對；
其實對於項目而言，上傳的圖片不能點擊放大是沒有什麽影響的，一般我們不需要放大本地有的圖片，但是對於這麽一個功能我還是很想去做一下實現一下的，所以就在空閑之余網上各種找方法拼湊一下整合一下做出來；
首先準備工作室要下載jquery和Viewer；
[html] view plain copy
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <meta name="author" content="EdieLei" />
- <title></title>
- <link rel="stylesheet" type="text/css" href="zoom/viewer.css"/>
- <link rel="stylesheet" type="text/css" href="zoom/main.css"/>
- <body>
- <h3>HTML5 圖片上傳預覽</h3>
- <div class="docs-pictures clearfix">
- <img id="pic" src="" style="width: 200px;height: 200px;"/>
- </div>
- <input id="img" type="file" accept="image/*" />
- <script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
- <script src="zoom/viewer.js" type="text/javascript" charset="utf-8"></script>
- <script src="zoom/main.js" type="text/javascript" charset="utf-8"></script>
- <script type="text/javascript">
- $(function() {
- $(‘#img‘).change(function() {
- var file = this.files[0]; //選擇上傳的文件
- var r = new FileReader();
- r.readAsDataURL(file); //Base64
- $(r).load(function() {
- $(‘#pic‘).attr(‘src‘,this.result);
- });
- });
- });
- </script>
- </head>
- </body>
- </html>
上傳後：
放大後：
這裏感覺放大效果不明顯，這是因為原圖就這麽大，可以手動點擊底部按鈕進行圖片的調整，而實際中我們在網頁上經常顯示的是圖片的縮略圖，當點擊之後顯示原圖就已經是放大了；如果需要點擊之後得到的圖比原圖要大的話那就要改Viewer.js裏面的屬性了，
大致改的位置在533行：
[javascript] view plain copy
- image = {
- naturalWidth: naturalWidth,
- naturalHeight: naturalHeight,
- aspectRatio: aspectRatio,
- ratio: width / naturalWidth,
- width: width*1.5,
- height: height*1.5,
- left: (viewerWidth - width*1.5) / 2,
- top: (viewerHeight - height*1.5) / 2
- };
- 頂
- 0
- 踩
- 0
- 上一篇android開發設置應用開機自啟動（2）——並使應用實時保持在前臺
- 下一篇HTML學習筆記
相關文章推薦
- ? html圖片上傳閱覽並且點擊放大
- ? Python全棧工程師特訓班--韋瑋
- ? javaEE：day8-在線圖片上傳與瀏覽（帶圖片點擊放大、下載、刪除、目錄打散）
- ? Blink在阿裏集團的應用實踐--陳守元
- ? 點擊圖片上傳文件
- ? Vue2.x知識點面面通
- ? html圖片上傳和顯示
- ? 大型Web構架設計案例解析
- ? html5多圖片上傳預覽效果
- ? 機器學習案例實戰--欺詐檢測
- ? html5圖片上傳
- ? Android開發實戰30分鐘集成第三方SDK
- ? jquery+html5圖片上傳可裁剪
- ? html5多圖片上傳
- ? HTML5圖片上傳
- ? HTML5移動端裁剪圖片上傳頭像代碼
暫無評論
* 以上用戶言論只代表其個人觀點，不代表CSDN網站的觀點或立場
- 個人資料
靈犀一指
- 訪問：9687次
- 積分：230
- 等級：
- 排名：千裏之外
- 原創：14篇
- 轉載：0篇
- 譯文：0篇
- 評論：0條
- 文章搜索
- 文章分類
- android組件屬性(0)
- android驗證功能(0)
- boostrap插件(1)
- android筆記(7)
- html學習(2)
- SSM框架學習筆記(1)
- android studio(0)
- android studio筆記(2)
- android SuperExample開發(0)
- 文章存檔
- 2017年09月(1)
- 2017年06月(1)
- 2017年03月(4)
- 2016年10月(1)
- 2016年09月(1)
- 閱讀排行
- bootstrap-table.js如何根據單元格數據不同顯示不同的字體的顏色(6962)
- android當activity加載完成後自動彈出popWindow(896)
- html圖片上傳閱覽並且點擊放大(661)
- struts2 2.5.2web.xml和struts.xmll配置(237)
- android開發設置應用開機自啟動（2）——並使應用實時保持在前臺(138)
- android使用TextView實現文字的跑馬燈效果(122)
- android開發設置應用開機自啟動(108)
- RecyclerView中繪制不相同的分割線(105)
- HTML學習筆記(88)
- 自定義圖片手勢縮放ImageView筆記(86)
- 評論排行
- android 滾動播報效果的實現(0)
- RecyclerView中繪制不相同的分割線(0)
- android studio引入module時出現的若幹問題(0)
- android使用TextView實現文字的跑馬燈效果(0)
- struts2 2.5.2web.xml和struts.xmll配置(0)
- HTML學習筆記(0)
- html圖片上傳閱覽並且點擊放大(0)
- android開發設置應用開機自啟動（2）——並使應用實時保持在前臺(0)
- android開發設置應用開機自啟動(0)
- android當activity加載完成後自動彈出popWindow(0)
- 推薦文章
- * CSDN新版博客feed流內測用戶征集令
- * Android檢查更新下載安裝
- * 動手打造史上最簡單的 Recycleview 側滑菜單
- * TCP網絡通訊如何解決分包粘包問題
- * SDCC 2017之大數據技術實戰線上峰會
- * 快速集成一個視頻直播功能
- 網站客服雜誌客服微博客服[email protected]400-660-0108|北京創新樂知信息技術有限公司 版權所有|江蘇知之為計算機有限公司|江蘇樂知網絡技術有限公司
- 京 ICP 證 09002463 號|Copyright ? 1999-2017, CSDN.NET, All Rights Reserved
html圖片上傳閱覽並且點擊放大