js 上傳圖片大小控制

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

js 原生態上傳圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div style="margin-left:10%;margin-top:20px">
    <font size="3px;">
        <a href="javascript:;" class="a-upload" 
><input type="file" name="images1" id="xdaTanFileImg" onchange="xmTanUploadImg(this)" accept="image/*"/>
            點選這裡上傳檔案
        </a>
    </font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <img id="xmTanImg" style="height:35px;margin-top:-10px" 
>
</div>
<div style="margin-left:10%;margin-top:20px">
    <font size="3px;">
        <a href="javascript:;" class="a-upload"><input type="file" name="images2"  id="xdaTanFileImg2" onchange="xmTanUploadImg2(this)" accept="image/*"/>
            點選這裡上傳檔案
        </a>
    </font 
>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <img id="xmTanImg2" style="height:35px;margin-top:-10px">

</div>
</body>
</html>



<script type="text/javascript">
//判斷瀏覽器是否支援FileReader介面
if (typeof FileReader == 'undefined') {
    //使選擇控制元件不可操作
    document.getElementById("xdaTanFileImg").setAttribute("disabled", "disabled");
    document.getElementById("xdaTanFileImg2").setAttribute("disabled", "disabled");
}

    //選擇圖片，馬上預覽
    function xmTanUploadImg(obj) {
        var file = obj.files[0];

        console.log(obj);console.log(file);
        console.log("file.size = " + file.size);  //file.size 單位為byte

        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 img = document.getElementById("xmTanImg");
            img.src = e.target.result;
            //或者 img.src = this.result;  //e.target == this
        }

        reader.readAsDataURL(file)
    }


    //選擇圖片，馬上預覽
    function xmTanUploadImg2(obj) {
        var file = obj.files[0];

        console.log(obj);console.log(file);
        console.log("file.size = " + file.size);  //file.size 單位為byte

        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 img = document.getElementById("xmTanImg2");
            img.src = e.target.result;
            //或者 img.src = this.result;  //e.target == this
        }

        reader.readAsDataURL(file)
    }
 </script>

js 上傳圖片大小控制

js 原生態上傳圖片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> &

ajaxFileUpload.js上傳圖片外掛，全瀏覽器相容，規避json錯誤，帶檔案格式大小攔截

直接上程式碼了有不理解的可以評論區@我一起討論。 /* 2017/04/17-zhaoyf-ajaxFileUpload.js 無重新整理上傳圖片 jquery 外掛，支援 ie6-ie11 依賴：jquery.js 主方法：ajaxFileUpload 接受

js 上傳圖片本地預覽緩存

att 圖片 rip html ext set 設置圖獲取文件 file <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>文件上傳&

js上傳圖片

for 不顯示 tar eight gin 單個 ext idt 添加註意：上傳文件一般使用的是input標簽，如果想要改樣式，讓input不顯示，可以把input標簽放入<leabel>標簽中，然後讓input標簽 display：none；案例1：上傳單

微信js上傳圖片並展示，iphone下預覽

https useragent 預覽圖 shang 服務器 fun 相冊 put 相機 $(‘.addphotos‘).click(function(){ var that = $(this);

js上傳圖片並預覽

width view 直接 ali 上傳圖片並預覽 class tar result null 一：html代碼 <input id="upload_image" type="file" accept="image/*" capture="camera"onch

html js 上傳圖片並回顯

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

js 上傳圖片預覽

node egg.js 上傳圖片到第三方圖片儲存伺服器方法

// 上傳 image 檔案方法1: form表單 2：圖片轉base64編碼 async imageFile(ctx) { let result = { message: 'upload failed', status:'FAILED' }; //let result = { mes

js上傳圖片阿里雲

1.引入阿里雲js 2.html部分 <table><tr><td bgcolor=#000322> 這裡是背景顏色 </td></tr></table> <div class="upl

js 上傳圖片並轉為base64編碼+預覽圖片+壓縮

js 上傳圖片並轉為base64編碼+預覽圖片+壓縮 html部分 <div id="adds" class="fix"> <form id="myForm" class="clearfix left" name="myForm"> <div clas

解除spring-boot上傳圖片大小的限制

由spring官方文件可知，spring-boot在MultipartProperties配置檔案中對最大上傳大小做了限制需要在啟動時增加一個配置類在啟動類裡增加以下類即可解決問題 /** * 解除上傳檔案的限制 */ @Configuration @Conditio

菜鳥學JS——上傳圖片之上傳前預覽圖片

上傳圖片對圖片進行一下預覽，可以瞭解圖片上傳後大概會是什麼樣子，此功能用js實現，然後在fileupload控制元件的change事件中呼叫，這樣當用fileupload選擇完圖片以後，圖片就會自動顯示出來了。功能很簡單，卻很實用。預覽圖片的js程式碼： <s

JS上傳圖片本地實時預覽縮圖

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

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

js上傳圖片處理：壓縮，旋轉校正圖片

隨著科技發展的浪潮，手機上的攝像機的畫素越來越高，成像的效果也越來越好。到現在一張手機拍攝的圖片在 2M 左右是很正常的。在實際的應用場景中經常需要使用者上傳圖片這樣的人機互動方式。為了提高使用者體驗，上傳圖片之前要進行壓縮。部分手機拍攝的圖片會帶有拍攝方向（如

解決grails上傳圖片大小過大報錯問題

Class org.apache.tomcat.util.http.fileupload.FileUploadBase$SizeLimitExceededException Message Request processing failed; nested except

js上傳圖片預覽，php後臺接收例項，已改寫為多圖上傳預覽

上傳圖片預覽這個出自超實用的js程式碼段，關於圖片的處理那一章，php後臺接收是網上比較少這方面的資源或者寫得很複雜，這裡簡單記錄。都是基於js 首先先呼叫兩個資料夾animateManage.js和viewimg.js，可以在網上下載。相當好用。關鍵點是FileRead

原生js上傳圖片利用XHR的ProgressEvent物件diy進度條

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> &l

JS上傳圖片,利用canvas實現圖片壓縮

操作 base64 itob 思考旋轉角度基礎 inpu url 一位項目中的一個基礎功能-----手機上傳圖片技術棧： 1、利用canvas進行壓縮（這個應該都比較熟悉）2、利用exif-js獲取照片旋轉角度屬性，因為有些手機機型會因為拍照時手機的方向使拍的照片帶

js 上傳圖片 大小控制

相關推薦

js 上傳圖片大小控制