2. 程式人生 > >html   上傳圖片，本頁預覽

html   上傳圖片，本頁預覽

阿新 • • 發佈：2017-09-08
html 上傳圖片 本頁預覽

直接上代碼



<!DOCTYPE html><html><head><meta charset="UTF-8"><title>圖片上傳預覽</title><script type="text/javascript"> function imgPreview(fileDom){ //判斷是否支持FileReader if (window.FileReader) { var reader = new FileReader(); } else { alert("您的設備不支持圖片預覽功能，如需該功能請升級您的設備！"

); } //獲取文件 var file = fileDom.files[0]; var imageType = /^image\//; //是否是圖片 if (!imageType.test(file.type)) { alert("請選擇圖片！"); return; } //讀取完成 reader.onload = function(e) { //獲取圖片dom var img = document.getElementById("preview"
); //圖片路徑設置為讀取的圖片 img.src = e.target.result; }; reader.readAsDataURL(file); }</script></head><body> <img id="preview" /> <br /> <input type="file" name="file" onchange="imgPreview(this)" /></body></html>

本文出自 “Exist” 博客，請務必保留此出處http://exist.blog.51cto.com/10305882/1963516

html 上傳圖片，本頁預覽

相關推薦

html &nbsp; 上傳圖片，本頁預覽

html 上傳圖片 本頁預覽 直接上代碼<!DOCTYPE html><html><head><meta charset="UTF-8"><title>圖片上傳預覽</title><script type="text/j

微信小程式上傳圖片，視訊及預覽

wxml <!-- 圖片預覽 --> <view class='preview-warp' wx:if="{{urls}}"> <image src='{{urls}}' /> </view> <view class="prew_video"

input file 方式上傳圖片並實現實時預覽

用普通的html的 <input type="file"/> 標籤是不能實現實時預覽功能的，獲取表單的值可以得到圖片所在路徑：C:\fakepath\test.png，如果將它直接賦值給img標籤的href屬性，會報錯：Not allowed to load lo

ajax非同步請求提交上傳圖片表單並預覽圖片

一、表單上傳檔案必須加上enctype="multipart/form-data"，（以下是上傳檔案的表單） <form action="<%=basePath%>UploadImage" method="post" id="uploadForm" en

js實現對上傳圖片進行壓縮並且預覽

js實現對上傳圖片的路徑轉成base64編碼，並且對圖片進行壓縮，實現預覽功能 需要先引入jquery: <script src="http://i.gtimg.cn/qzone/biz/gdt/lib/jquery/jquery-2.1.4.js?max_age=3

使用 CKEditor 上傳圖片， 粘貼屏幕截圖

要求 license 回調 wan ade 做成 操作 rms 粘貼 之前寫過wangEditor,那真是好用，文檔也清晰，半天就搞定了，無奈沒有對應license，只好選擇別的。 外語一般，閱讀理解都靠蒙。CKEditor官方文檔看的我雲裏霧裏，國內的博客比較少，

百度WebUploader上傳圖片，圖片回顯編輯，查看

set 唯一性 original 無需 同名 sch nag fin enum 頁面前端使用的是bootstrap，java後端springMVC , 上傳用的WebUploader，先說說上傳圖片，回顯編輯圖片在下一篇 如果僅僅只需要上傳圖片，不需要回顯進行編輯圖片，使用

vue， vux調用微信點擊圖片，上傳圖片，刪除圖片，接口，其中選圖接口，蘋果手機顯示有問題，查看不到圖片，提交會提示fail not exist，解決如下

ssd fff sset ogre 默認 item config tom ima <template> <div v-cloak v-show="show"> <div v-show="mailbox">

C# 使用FileUpload控件上傳圖片，將文件轉換成二進制進行存儲與讀取

擴展 實現 bmi extension aaa 插入數據 問題 pup cat 狀況描述： 　　需要上傳文件，但是不想要保存到實體路徑下，便可以用該功能來實現。 效果圖： 　　 　　點擊【Upload】按鈕，上傳文件到數據庫； 　　點擊【Preview】，預覽文件；

微信jssdk上傳圖片，一張一張的上傳 和 一次性傳好幾張

pla can 參數錯誤 其他 屬性 使用 down pop menu //html模板 <div class="zhaopin_3_2"> <div id="bbb"></div> &

小程序上傳圖片，排隊上傳

length 內容 ext 有效 ges mar 顯示 func 沒有 //沒有處理的wxml，但是有效果，可以簡單試驗一下 <view class=‘minbox1‘> <text class=‘red wzgs‘>*</text>

[Python] Django框架入門5——靜態文件、中間件、上傳圖片和分頁

manage input 上傳文件 數據分頁 提交 family 數據 3.5 func 說明： 　　本文主要描述Django其他的內容，涉及靜態文件處理、中間件、上傳文件、分頁等。 　　開發環境：win10、Python3.5、Django1.10。 　　 一、靜態文件處

php 中使用cURL發送get/post請求，上傳圖片，批處理

cit gda 抓取 記錄 rem 學習 網頁 lose XML https://mp.weixin.qq.com/s/8luqMEd8xt8oJxFLLCU1XA 文章正文 cURL是利用url語法規定傳輸文件和數據的工具。php中有curl拓展，一般用來實現網絡抓取，模

html js 上傳圖片並回顯

<html> <body>     <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>   　<scr

layer 彈框 cropper 裁剪上傳圖片，thinkphp 3 使用 CropAvatar.class.php

最近要做一個上傳裁剪圖片功能，但是網上收出來的東西，知識點都是對的。但是就是沒說清楚，也無法連續起來用。 經過自己整理出來的一套程式碼，親測可用！ 不用多說，直接上菜。 PS：搜尋引擎收錄的還是很垃圾...... 呼叫頁面，簡單程式碼（可複用） <img src="{$info.co

nodejs express 框架 上傳圖片，上傳頭像問題

上傳圖片總結： 必須 安裝’multer’模組 Npm I multer –S（手動輸入小寫） 第一步 App.js 裡面 掛載index路由之前寫入 app.use(express.static(path.join(__dirname, 'public'))); var mul

layui-圖片上傳，可使用選擇圖片->上傳圖片，預覽圖片，刪除圖片（轉載）

原文地址：https://gitee.com/AMortal/codes/qt8m6zk30u1g4evr95jhx13 <!DOCTYPE html> <html> <head> <meta

利用ajax上傳圖片，並使用CURL呼叫介面

這是我第一次使用ajax上傳檔案，並且不通過form表單進行上傳，之前使用ajax上傳檔案時是藉助一個叫form.js的檔案，可以直接使用$.ajaxSumbmit直接提交表單，但這次不同，就是使用ajax上傳，並且將圖片資訊放在ajax要上傳的資料data陣列或物件中，怎麼

微信公眾號開發之選擇圖片，上傳圖片，下載圖片，顯示圖片

function clickImg(that)｛ wx.chooseImage({ count: 1, needResult: 1, sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓

Spring MVC上傳圖片，Java二進位制圖片寫入資料庫，生成略縮圖

步驟：1.將圖片上傳到伺服器的一個磁碟目錄下。 2.將剛才上傳好的圖片寫入資料庫image欄位。 一、上傳圖片：使用的是spring mvc 對上傳的支援。 jsp 頁面： <form name="uploadForm" id="uploadForm" m