簡單使用的圖片上傳預覽外掛作者非常不錯！

阿新 • • 發佈：2019-01-17

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery圖片上傳前預覽</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<div style="padding: 20px">
    <input onchange="FirstImg()" name="firstImg" style="opacity:0;position:absolute" type="file" id="FirstfileImg" multiple="">
    <div >
        <span> 點選這裡上傳圖片</span>
    </div>
</div>
<fieldset style="width:500px;">
    <legend>圖片預覽</legend>
    <div style="position: relative;" id="ccc">
    </div>
</fieldset><script>
jQuery.DuoImgsYulan = function(file, id) {
    for (var i = 0; i < 3; i++) {
        if (!/image\/\w+/.test(file[i].type)) {
            alert("請選擇圖片檔案");
            return false;
        }
        if (file[i].size > 2048 * 1024) {
            alert("圖片不能大於2MB");
            continue;
        }
        var img;
        console.log(document.getElementById("fileImg"));
        console.log(file[i]);
        console.log("file-size=" + file[i].size);
        var reader = new FileReader();
        reader.onloadstart = function(e) {
            console.log("開始讀取....");
        }
        reader.onprogress = function(e) {
            console.log("正在讀取中....");
        }
        reader.onabort = function(e) {
            console.log("中斷讀取....");
        }
        reader.onerror = function(e) {
            console.log("讀取異常....");
        }
        reader.onload = function(e) {
            console.log("成功讀取....");
            var div = document.createElement("div"); //外層 div
            div.setAttribute("style", "position:relative;width:inherit;height:inherit;float:left;z-index:2;width:150px;margin-left:8px;margin-right:8px;");
            var del = document.createElement("div"); //刪除按鈕div
            del.setAttribute("style", "position: absolute; bottom: 4px; right: 0px; z-index: 99; width: 30px; height:30px;border-radius:50%;")
            var delicon = document.createElement("img");
            delicon.setAttribute("src", "http://www.jq22.com/tp/f26c324f-24db-4f08-91d6-f7ffc9ca1516.png");
            delicon.setAttribute("title", "刪除");
            delicon.setAttribute("style", "cursor:pointer;width: 30px; height:30px");
            del.onclick = function() {
                this.parentNode.parentNode.removeChild(this.parentElement);
                ClearfirtsImg();
            };
            del.appendChild(delicon);
            div.appendChild(del);
            var imgs = document.createElement("img"); //上傳的圖片
            imgs.setAttribute("name", "loadimgs");
            imgs.setAttribute("src", e.target.result);
            imgs.setAttribute("width", 150);
            if (document.getElementById(id).childNodes.length > 2) {
                document.getElementById(id).removeChild(document.getElementById(id).firstChild);
            }
            div.appendChild(imgs)
            document.getElementById(id).appendChild(div);
        }
        reader.readAsDataURL(file[i]);
    }
}

function FirstImg() {
    $.DuoImgsYulan(document.getElementById("FirstfileImg").files, "ccc");
}

function ClearfirtsImg() {
    var file = $("#FirstfileImg")
    file.after(file.clone().val(""));
    file.remove();
}</script>
</body>
</html>

傳送門：https://blog.csdn.net/qq 39198420/article/details/76685745

簡單使用的圖片上傳預覽外掛作者非常不錯！

<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery圖片上傳前預覽</title> <script src="http

jquery圖片上傳預覽外掛uploadView

html <div class="a4_mod "> <div class="control-group js_uploadBox"> <div class="btn-upload">

簡單的做一個圖片上傳預覽（web前端）

chrom 預覽 web前端 console fine 分享圖片 fire title right 轉載：點擊查看原文在做web項目很多的時候圖片都是避免不了的，所以操作圖片就成了一個相對比較棘手的問題，其實也不是說很麻煩，只是說上傳然後直接預覽的過

圖片上傳預覽的簡單程式碼

效果如下圖程式碼如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=dev

jquery.fileupload.js外掛使用初探--多圖片上傳預覽

一、前臺程式碼： <!DOCTYPE html> <html> <head> <title>jquery.fileupload.js使用測試</title> <script src="jq

Jcrop外掛+Canvas實現圖片上傳預覽+圖片裁剪上傳

前言想實現一個功能：使用者點選上傳按鈕，選擇圖片後。圖片顯示在一個彈出框上，並可以對圖片進行裁剪。裁剪後的圖片顯示在頁面上。提交表單即可上傳圖片。遇到問題瀏覽器的安全設定不讓使用者獲取上傳的圖片路徑，實際獲取的是c:\fakepath\a.jp

jquery.fileupload.js外掛使用初探--單圖片上傳預覽

一、官方外掛下載地址：http://plugins.jquery.com/blueimp-file-upload/ 下載下來後會發現裡面包含了一堆檔案，首先需要弄清楚的是最核心的部分是哪些，根據官方的例子可以知道，一個最簡單的jQuery File Uplo

一個簡單的圖片上傳預覽demo

<html> <head> <meta content="text/html" /> <title>圖片預覽</title> <script language=javascript&g

js控制圖片上傳預覽，使用三方外掛+名稱顯示和控制元件非display:none隱藏

第一次寫blog，只是為了自己做記錄，方便下次尋找方便，如有不足處見諒。 js三方引用，v1.4,附件下載http://jquery.decadework.com <script src="js/uploadPreview.js"></script

圖片上傳預覽

bject too sca 圖片格式 else 遍歷 bsp turn filters Js腳本頁面 <!doctype html> <html> <head> <meta charset="utf-8"> <titl

二十七、單張圖片上傳預覽

第一部分 ajax 效果 document 圖片 pos itl .data title html部分 <div class="new-store-phone"> <span class="phone-title">營業執照 

html5實現圖片上傳預覽

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #te

JS原生實現本地圖片上傳預覽

執行方式如下： $("input").change(function() { var config = { imgWrapWidth: 300, //px imgWrapHeight: 200, //px imgMaxWidth: "100%", im

vue自定義圖片上傳預覽功能

//vue裡面的HTML程式碼 <div id="modificationPreview"> <input type="file" accept="image/*" @change="changeFile" id="m

圖片上傳預覽（可根據自己得需要封裝元件）

話不多說，先上圖實現簡單得多行多圖片上傳，可以選擇其中任意一個圖片當作你需要得預設圖傳到後臺，然後一次性提交圖片上傳重要得也就兩個屬性：new FormData()和new FileReader() 程式碼： <template> <

js圖片上傳預覽功能相容實現

<html> <head> <title>js圖片上傳預覽</title> <script> function PreviewImage(imgFile) { var filextension=imgFile.value.subst

HTML5 手機端圖片上傳預覽

1、html頁面 <div class="addFile"> <p class="company">資料上傳</p> <div class="photoes getoutinput"> <div class="uplist">

springmvc圖片上傳、jquery 圖片上傳預覽

寬為限緊用功功夫到滯塞通簡介專案需求，需要做圖片上傳功能，圖片上傳肯定得給個預覽嘛，然後就找了下面這個方案 ajaxfileupload外掛上傳 ajaxfileupload.js網上傳了好幾個版本，選擇自己可以使用的就好了。這個外掛是N多

前端js實現圖片上傳預覽

前端js實現圖片上傳前端js實現圖片上傳的原理是通過input標籤的type=file屬性將input標籤定義為上傳檔案，對input進行onchange事件的監聽，當input的value值改變時代表使用者已經上傳了圖片，而input的value值就是使用者上傳的圖片的相對路徑，new

相容IE6,IE7,IE8和Firefox的圖片上傳預覽效果

所謂圖片上傳預覽，就是在使用檔案選擇框選擇了檔案之後就可以在頁面上看見圖片的效果，關於這個效果我一直認為是無法做到的，沒想到前不久被zhuozi搞定了。網上流傳的一些關於圖片上傳預覽的程式碼都是差不多的，IE6下使用檔案選擇物件的value屬性取出將要上傳的本地檔案路徑，然

簡單使用的圖片上傳預覽外掛 作者非常不錯！

相關推薦

簡單使用的圖片上傳預覽外掛作者非常不錯！