2. 程式人生 > >簡單實現前端選擇上傳圖片並顯示略縮圖

簡單實現前端選擇上傳圖片並顯示略縮圖

阿新 • • 發佈：2018-11-09

效果

在這裡插入圖片描述
在這裡插入圖片描述

實現程式碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>修改資訊</title>
    <script>
        /**
         * 顯示選擇上傳的圖片略縮圖
         * 當選擇了圖片檔案時觸發這個方法
         */
        function previewFile() {
            // 通過標籤選擇器獲取HTML元素
            var
 
 preview = document.querySelector('img');
            var file = document.querySelector('input[type=file]').files[0];
            // Js內建檔案流
            var reader = new FileReader();

            // 更新img標籤的src屬性為圖片的本地路徑，就可以顯示了
            reader.onloadend = function () {
                preview.src = reader.
 
result;
            }

            // 圖片檔案不空就顯示
            if (file) {
                reader.readAsDataURL(file);
            } else {
                // 圖片檔案是空的
                preview.src = "";
            }
        }
    </script>
</head>
<body>
    <h2>修改個人資訊</h2>
    <
 
form action="/shop/updateUserinfo" enctype="multipart/form-data" method="post">
        <table>
            <tr>
                <td>暱稱：</td>
                <td><input type="text" name="username"/></td>
            </tr>
            <tr>
                <td>收貨手機號:</td>
                <td><input type="text" name="contactPhone"/></td>
            </tr>
            <tr>
                <td>收貨地址:</td>
                <td><input type="text" name="contactAddress"/></td>
            </tr>
            <tr>
                <td>請選擇頭像:</td>
                <td><input type="file" name="image" onchange="previewFile()"/></td>
            </tr>
            <tr>
                <img src="" height="100" width="200" alt="這是略縮圖..."/>
            </tr>
            <tr>
                <td><input type="submit" name="submit" value="提交"/></td>
                <td><input type="reset" name="reset" value="重置"/></td>
            </tr>
        </table>
    </form>
</body>
</html>

思路和實現都比較簡單，即當選擇了圖片檔案時自動觸發JS方法修改處理<img>標籤的src即可

相關推薦

簡單實現前端選擇上傳圖片並顯示略縮圖

效果 實現程式碼 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>修改資訊</title> <sc

使用ASP.net（C#）批量上傳圖片並自動生成縮圖,文字水印圖,圖片水印圖

因本網站上傳圖片的需要，參考很多成熟的經驗，在ASP.net平臺上使用C#語言，做了這一自動批量上傳圖片的.ASPX檔案，並經除錯成功，在本網站上使用，現發出來供大家參考，也希望高手多加指點。 本程式主要功能有： （1）可以根據自己的需要更改上傳到伺服器上的目錄，上傳

基於VUE選擇上傳圖片並在頁面顯示（圖片可刪除）

.ajax sta http data .cn 數據 file prim 生成 demo例子： 依賴文件 ： http://files.cnblogs.com/files/zhengweijie/jquery.form.rar HTML文本內容：

怎樣實現前端裁剪上傳圖片功能

cos pass iframe 上傳文件 repl 轉變 除了 mimetype 處理 怎樣實現前端裁剪上傳圖片功能 2017-05-20 JavaScript 由於前端是不能直接操作本地文件的，要麽通過<input type="file">用戶點擊選擇文

js實現上傳圖片並顯示的兩種實現方式(無需上傳到伺服器再顯示)

方法一： <input type='file' id='chooseFile'> <img src='' id='picToCheck'/> document .querySelector('#chooseFile'

Winform下如何上傳圖片並顯示出來。同時保存到數據庫

內存 pbm 命令 數據 lena bms south 類對象 private 通常，我們在開發軟件或者網站是否，通常有時候需要添加圖片，我們怎麽做呢，直接貼例子。 前提是添加openFileDialog控件哈 #region 定義公共的類對象及變量 S

上傳圖片並顯示

步驟： 用建構函式實體化new一個檔案讀取器FileReader      2.用實體化出來的檔案讀取器呼叫readAsDataURL方法，將檔案物件作為引數傳進去，讀取檔案為dataURL（要先呼叫一下這個函式才能在下一步使用result） &n

thinkPHP利用ajax非同步上傳圖片並顯示、刪除

近來學習tp5的過程中，專案中有個發帖功能，選擇主題圖片。如下： 利用原始的檔案上傳處理，雖然通過原始js語句能實時顯示上傳圖片，但是這樣的話會涉及很多相容問題。使用ajax技術，實現選擇性刪除所選圖片功能，並不會有相容問題。 表單檔案form： &lt;form method="po

Android H5和App互動以及開啟相簿上傳圖片並顯示

一、H5連結開啟App 點選瀏覽器中的URL，如何啟動App呢？ 1、HTML連結處理 首先做成HTML的內容，url格式如下： <a href="[scheme]://[host]/[path]?[query]">啟動應用程式</a> 說明：

laravel實現上傳圖片，並且製作縮圖，按照日期存放

先上程式碼吧：前端程式碼：有很多小夥伴在做表單上傳檔案的時候沒有注意表單的上傳格式是什麼，就可能導致上傳檔案、圖片不成功！<form id="form1" name="form1" class="form-horizontal form-label-left" enct

html上傳圖片並顯示

function loadFile() { try { //獲取上傳的檔案 var file = document.getElementById(

點選上傳圖片並顯示

效果圖： 前端程式碼： <div class="role" onclick="document.getElementById('cover').click()"> <img src="" alt="" id="cover_1" cla

javaweb網頁上傳圖片並顯示在頁面上，並在服務端存到磁碟（base64編碼解碼）

最後 服務端接收到頁面傳過來的全部的BASE64編碼後 public String uploadimgsave(String imagepath){   String url = "";   OutputStream os=null;   String ImgPath="D:/img";   //檔案存放目

js file上傳圖片並顯示出來

1.首先給個img點選上傳的圖片，讓input隱藏。並且定位到img地方； 2.div 傳遞的引數是input的id，input 展示傳遞的引數是div的id； <form   action="#" style="width: 124px;position: abs

Larvel5.2上傳圖片並顯示縮圖

1.建立控制器UploadController.php <?php namespace App\Http\Controllers; use App\Http\Requests; use App\Http\Controllers\Controller; use I

js上傳圖片，同時生成縮圖

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE&

上傳圖片實時預覽縮圖

{   var image=new Image();   image.src=develop//develop/ImgD.src;if(image.width>0&& image.height>0){    flag=true;    if(image.width/image.he

3種上傳圖片並實現預覽的方法

load app chunks isp 賦值 response with span attr 在常見的用戶註冊頁面，需要用戶在本地選擇一張圖片作為頭像，並同時預覽。 常見的思路有兩種：一是將圖片上傳至服務器的臨時文件夾中，並返回該圖片的url，然後渲染在html頁面；另一種

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

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

利用HTML5上傳檔案並顯示在前端預覽，以圖片為例

由於專案中有上傳檔案的功能，所以這次單獨拿出來研究研究，我上網查了查，以前都是用iframe，但是自從HTML5出世之後，就可以利用H5的一些特性來上傳檔案了，啥也不說了，我上程式碼了 <!DOCTYPE html> <html lang