jquery完整的前端上傳圖片功能（帶自定義圖片預覽效果驗證尺寸大小驗證圖片格式）

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

最近經常遇到前端開發時，需要進行自定義圖片上傳的功能，因此自己在網上找了很多模板，拼接組合一下，寫了一個可以直接利用jquery使用的模板，可以直接拿走進行改裝，直接上程式碼。程式碼中有相應的註釋

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=" 
width=device-width, initial-scale=1.0">
    <title>jquery圖片上傳功能和圖片預覽效果（包含大小型別驗證效果）</title>
</head>

<body>
    <div class="upload-img-box">
        <div class="input-box">
            <input type="file" id="img-file" 
 name="選擇圖片">
        </div>
        <div class="befor-img">
            <span>+ 請新增圖片</span>
        </div>
        <div class="after-img">
            <img id="img-box" src="" width="100%" height=" 
100%">
        </div>
    </div>
</body>

<style>
    .upload-img-box {
        position: relative;
    }

    .upload-img-box .input-box {
        display: inline-block;
        width: 300px;
        height: 90px;
        border: solid black 1px;
    }

    .upload-img-box .befor-img {
        display: flex;
        width: 300px;
        height: 90px;
        border: solid black 1px;
        position: absolute;
        top: 0px;
        left: 0px;
        background: #ffffff;
        z-index: 30;
        align-items: center;
        justify-content: center;
    }

    .upload-img-box .befor-img.hasImg {
        display: none;
    }

    .upload-img-box .after-img {
        display: inline-block;
        width: 300px;
        height: 90px;
        border: solid black 1px;
        position: absolute;
        top: 0px;
        left: 0px;
        background: #ffffff;
        z-index: 20;
    }
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
    
    //使用trggier事件，利用假的標籤觸發input[type=file]的標籤，從而進行自定義ui;
    $(document).on("click", ".upload-img-box .befor-img,.upload-img-box .after-img", function (e) {
        $(".input-box input").trigger("click");
    })
    // 使用input 的change事件，監聽當檔案上傳的值進行改變的時候，才觸發事件。
    $(document).on("change", ".upload-img-box #img-file", function () {
        var file = $("#img-file")[0].files[0];
        console.log(file);
        // file 內容包括： lastModified , lastModifiedDate , name , size , type
        var formdata = new FormData();
        formdata.append('file', file);

        if (window.FileReader) {
            var fr = new FileReader();
            fr.onloadend = function (e) {
                //                console.log(this.result);
                // document.getElementById("portrait").src = e.target.result;
                $("#img-box").attr("src",e.target.result)
                $(".upload-img-box .befor-img").addClass("hasImg")
            };
            //給FileReader物件一個讀取完成的方法,
            //使用readAsDataURL會返回一個url
            //這個值就儲存在事件物件的result裡
            //img通過載入這個地址,完成圖片的載入
            fr.readAsDataURL(file);
        }

        //判斷圖片大小
        if (file.size > 3 * 1024 * 1024) {
            alert("上傳圖片不能大於3M");
        }

        //判斷圖片資料型別
        if (!/.(gif|jpg|jpeg|png|GIF|JPG|bmp)$/.test(file.name)) {

            alert("圖片型別必須是.gif,jpeg,jpg,png,bmp中的一種");
        }
    })

</script>

</html>

效果圖
在這裡插入圖片描述
上傳圖片後

歡迎大家進行交流補充，謝謝。

jquery完整的前端上傳圖片功能（帶自定義圖片預覽效果驗證尺寸大小驗證圖片格式）

技術標籤：工作分享jshtmljqueryjavascriptcss 最近經常遇到前端開發時，需要進行自定義圖片上傳的功能，因此自己在網上找了很多模板，拼接組合一下，寫了一個可以直接利用jquery使用的模板，可以直接拿走進行改

微信小程式實現錄製、試聽、上傳音訊功能（帶波形圖）

最近接到這樣一個需求，要求實現錄製、試聽、上傳音訊功能，選擇的是getBackgroundAudioManager,聲音錄製和播放波形圖是用css實現的，效果圖及詳細設計程式碼如下：

jsp+servlet簡單實現上傳檔案功能（儲存目錄改進）

1、jsp前端 <%-- Created by IntelliJ IDEA. User: Lenovo Date: 2020/6/19 Time: 22:53 Learn from https://www.bilibili.com/video/BV18z411i7gh?t=23&p=192

spring boot實現阿里雲視訊點播上傳視訊功能（複製貼上即可）

目錄： 1.spring boot實現阿里雲視訊點播上傳視訊（複製貼上即可） 2.spring boot 實現阿里雲視訊點播 --刪除視訊

基於Java後端圖片上傳程式碼編寫以及前端uniapp圖片上傳頁面編寫（效果已實現）

springBoot圖片上傳程式碼如下： 1 package com.example.xunfei.controller; 2 3 4 import com.example.xunfei.config.uploadImgUtil;

JQuery+drag.js上傳圖片並且實現圖片拖曳

外層的容器的id屬性應為\'container\' 容器中有多個佇列，這些佇列之間可以隨意拖動，class屬性應為\'queue\'

多檔案上傳與下載（前端form表單提交後端.net）

技術標籤：程式碼分享uploadc#javascript 多檔案上傳與下載（前端form表單提交後端.net）

web前端上傳圖片到Java後端，並儲存到本地

技術標籤：web前端上傳圖片到Java後端，並儲存到本地javaweb web前端上傳圖片到Java後端，並儲存到本地 application.yml中的配置圖片儲存路徑：

UEditor元件封裝，重寫上傳檔案功能，重寫全屏樣式（Vue版本）

技術標籤：UEditor 前言：使用百度編輯器，重寫上傳功能，將編輯器的上傳圖片，上傳音視訊功能禁用，在工具欄中多加一個上傳檔案的功能（這是一個檔案櫃，支援上傳圖片/音訊/視訊/壓縮檔案/文字文件）將uedito

jQuery ajax formData檔案上傳進度條（親測，好文章！！）

技術標籤：jQueryjsvuejQueryajaxformData檔案上傳進度條 XMLHttpRequest.upload向後臺上傳檔案時監聽進度，主要使用的是XMLHttpRequest提供的upload方法，此方法會返回一個XMLHttpRequestUpload物件，用來表示

織夢DedeMCS後臺系統設定自定義圖片上傳LOGO功能

織夢後臺功能強大可以在後臺--系統引數新增變數--支援變數型別有：文字、數字、布林(Y/N) 、多行文字，但是沒有圖片上傳的選項，如果能有圖片上傳功能的話，就可以做到替換 LOGO 圖片了，不需要用 FTP 或者檔

前端js-----購物車全功能（jQuery）

技術標籤：JavaScriptWeb前端分享一下我的心得javascriptjquery前端效果圖：HTML&&CSS：

spingboot圖片檔案上傳，訪問（艱難，踩了很多坑！都是淚）

總體需求：前端上傳的檔案或者視訊是base64格式的，我需要取到它，轉換成指定格式的圖片或者視訊，然後儲存到本地磁碟（E:/upload/），並且將儲存的路徑存到資料庫內，並且根據這個路徑，返回給前端。

基於.NET6平臺開發WebApi（十二）—— 新增檔案上傳下載功能

本篇為大家介紹WebApi又一個必不可少的功能，那就是檔案上傳下載。還記得我們在初期改造專案的時候刪掉的wwwroot資料夾嗎，這裡放的就是專案中的靜態資原始檔，接下來我們來手動實現這個功能。

上傳頭像--功能的實現（基於牛客網專案）

這裡的上傳影象是存在了個人電腦硬碟上的某一位置，目前並沒有存到資料庫裡（資料訪問層沒有程式碼邏輯）

TP6 上傳圖片到伺服器並返回圖片地址（框架自帶的上傳）

public function addinfo(){$info = request()->param();if(strlen($info[\'name\'])>30){$this->error(\'新增失敗,活動名字過長\');}// print_r($_FILES);die();if($_FILES[\'image\'][\'size\']>20971

Django檔案上傳與下載（FileFlid）

本文例項為大家分享了Django檔案上傳與下載的具體程式碼，供大家參考，具體內容如下

Django實現檔案上傳下載功能

專案介紹最近學習django，通過檔案上傳下載這個小專案，總結下常用的知識點。

vue quill editor 使用富文字新增上傳音訊功能

1. 前言 vue-quill-editor 是vue專案中常用的富文字外掛，其功能能滿足大部分的專案需求。但是，最近專案中，需要在富文字中上傳音訊檔案，但是vue-quill-editor這個富文字僅支援圖片，視訊上傳；所以這個功能需要自

Pycharm遠端連線伺服器並實現程式碼同步上傳更新功能

一、寫在前面之前一直用putty，ssh，修改程式碼，或者本地修改，上傳到伺服器，各種不爽，現在改用xshell，但是有時候還是不方便感覺，於是自己配置了遠端連線pycharm，這樣不用總是到程式碼裡修改，直接在windows下

jquery完整的前端上傳圖片功能（帶自定義圖片預覽效果驗證尺寸大小驗證圖片格式）

相關推薦