怎麼簡便地去掉html中難看的檔案上傳按鈕並實現圖片預覽功能？

阿新 • • 發佈：2018-12-23

問題描述

通常的檔案上傳按鈕是這樣的：
這裡寫圖片描述
選擇了檔案過後是這樣的：

很顯然，這樣的按鈕並不好看。

解決方法

用一個label標籤來裝載樣式，其for屬性指向type=file的input，然後將input標籤隱藏（display=“none”），這樣，在點選label時就會觸發input彈出檔案選擇框。

例項演示

程式碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title 
>
</head>

<body>
<label for="file"><img src="images/2.jpg"></label>
<input type="file" id="file" name="" style="display: none"/>
<div id="image" style="width:100px;height:100px; background:#CCCCCC; ">
    <img src="images/2.jpg" height="100px" width="100px" border 
="5px"/>
</div>
</body>
<script>
    document.getElementById('file').onchange = function() {
        var imgFile = this.files[0];
        var fr = new FileReader();
        fr.onload = function() {
            document.getElementById('image').getElementsByTagName('img')[0].src = fr.result;
        };
        fr.readAsDataURL(imgFile);
    };
 
</script>

</html>

效果：
這裡寫圖片描述

怎麼簡便地去掉html中難看的檔案上傳按鈕並實現圖片預覽功能？

問題描述通常的檔案上傳按鈕是這樣的：選擇了檔案過後是這樣的：很顯然，這樣的按鈕並不好看。解決方法用一個label標籤來裝載樣式，其for屬性指向type=file的inp

檔案上傳按鈕美化加圖片預覽

[html]自定義檔案上傳按鈕

如果覺得檔案上傳按鈕太難看，如果覺得上傳按鈕在各個瀏覽器上顯示的效果不一致。我們可以自定義檔案上傳按鈕。實現方案是將檔案上傳按鈕的點選事件傳遞給其他按鈕。 .html -> <input type = "file" id="myFile" /> <

【Ceph】基於Tornado的Ceph檔案上傳與下載及線上預覽

概述用tornado作為http伺服器在處理post/get請求的方法中，呼叫librados(python)介面實現讀寫設定Content-disposition中為inline則線上瀏覽，

html5上傳使用FileReader,Promise圖片預覽

通過FileReader，和es6的方法解構賦值,promise物件簡單封裝上傳預覽具體邏輯：選中圖片之後，觸發onchange方法，獲得上傳檔案物件，呼叫fileReader方法驗證圖片是否符合上傳需求，符合返回圖片文字，不符合返回錯誤資訊。先介紹幾個技術點，沒接觸過的朋友，可以先看看： &nbs

Spring 中的檔案上傳與下載控制

先建立根應用上下文配置，WebDemo/src/main/java/com/seliote/webdemo/config/RootContextConfig.java package com.seliote.webdemo.config; import org.springframework.c

SSH開發中的檔案上傳

檔案上傳的要素表單提交方式必須是POST 表單的enctype屬性:必須設定為multipart/form-data 表單必須有檔案上傳項:file 表單 <form id=form1 name=form1 action="${pageCont

springcloud中feign檔案上傳、下載

檔案上傳、下載也是實際專案中會遇到的場景，本篇我們介紹下springcloud中如何使用feign進行檔案上傳與下載。還是使用feign 進行http的呼叫。一、Feign檔案上傳服務提供方java程式碼： /** * 檔案上傳 * @param fil

JavaWeb中的檔案上傳

1.匯入相應的jar包在這裡我是用Maven匯入相應的jar包。當然也可以在網上尋找commons-io-2.0.1.jar和commons-fileupload-1.2.2.jar包。 <dependency> <groupId>commons-io<

web應用中的檔案上傳

原型：public void saveAs(java.lang.String destFilePathName)或者public void saveAs(java.lang.String destFilePathName,int optionSaveAs)其中，destFilePathName另存的檔名，op

form表單中的檔案上傳下載

檔案上傳： 1-問題：getParameter()不能使用 1-返回值：string 2-解決：使用第三方上傳元件來完成 fileupload 3-步驟： 1-前端：form 1-file域 2-mehtod=po

Web開發中的檔案上傳問題研究

前因：因為web開發用到檔案上傳功能，搜尋到了Valums，感覺很不錯，特別是它在非IE瀏覽器下通過HTML5技術來支援多檔案上傳，支援拖拽功能等，不過在具體用中並不順利，Valums在FF下罷工，追究原因，原來跟我使用Aapche FIleUpload有關，再追究，對檔案上

ssm專案中的檔案上傳

springmvc中，要想實現上傳檔案需要新增jar包 <dependency> <groupId>commons-fileupload</groupId> <artifa

JavaWeb中的檔案上傳和下載

對於檔案上傳，瀏覽器在上傳的過程中是將檔案以流的形式提交到伺服器端的，如果直接使用Servlet獲取上傳檔案的輸入流然後再解析裡面的請求引數是比較麻煩，所以一般選擇採用apache的開源工具common-fileupload這個檔案上傳元件。這個common-fileupl

java中，檔案上傳功能

一直猶豫什麼時候寫第一篇部落格，總覺得第一篇就應該留下一個好印象。現在看看，還不如早點寫，養成一個好習慣。這篇文章是關於java中檔案上傳的功能的實現。其實說到檔案上傳，我的第一反應就是將檔案放進request中，然後servlet對檔案的一系列操作

Servlet3.0中的檔案上傳技術

1.新增對檔案上傳的支援 1）@MultipartConfig 表示Servlet接收multipart/form-data 請求新增Part類獲取檔案上傳資料 public Collection getParts() public Part ge

在windows中把檔案上傳到遠端Linux伺服器

1.下載可以從http://www.chiark.greenend.org.uk/~sgtatham/putty/download.html下載pscp，並將其放入windows的system32 資料夾下，這樣在dos命令視窗中就能直接呼叫使用了。 2、使用 (一

JS：關於斷點續傳外掛 Resumable.js 中的檔案上傳控制問題

它是一個JavaScript庫，通過HTML5 File API提供多個同步，穩定和可恢復的上傳。該庫旨在通過HTTP將容錯引入上傳大檔案。這是通過將每個檔案分成小塊來完成的; 無論何時上傳塊都失敗，都會重試上載，直到該過程完成。這允許上載在本地或伺服器丟

ssh專案中的檔案上傳

上傳檔案要新增兩個jar包commonse,在pom中新增  <dependency>

php.init中關於檔案上傳的相關選項

php.ini中檔案上傳功能配置選項說明用文字工具（推薦EditPlus）開啟php.ini 配置檔案，查詢 File Uploads（ctrl + F 彈出搜尋框），在這個區域有以下3個選項： file_uploads = On 是否允許HTTP檔案

怎麼簡便地去掉html中難看的檔案上傳按鈕並實現圖片預覽功能？

問題描述

解決方法

例項演示

相關推薦