1. 程式人生 > >利用FileReader實現客戶端預覽圖片

利用FileReader實現客戶端預覽圖片


    function changImg(e)
      var myImg = document.getElementById('myImg');
      for (var i = 0; i < e.target.files.length; i++) { 
        var file = e.target.files[i];
        console.log(file);
        if (!(/^image\/.*$/i.test(file.type))) { 
            continue; //不是圖片 就跳出這一次迴圈 
        } 
        //例項化FileReader API 

        var freader = new FileReader(); 
        freader.readAsDataURL(file); 
        freader.onload = function(e)
          console.log(e);
          myImg.setAttribute('src', e.target.result); 
        } 
      } 
    }
 

相關推薦

利用FileReader實現客戶圖片

    function changImg(e){        var myImg = document.getElementById('myImg');      for (var i = 0; i < e.target.files.length; i++) {          var file

控件實現點擊圖片更改頁面背景圖片的效果

後臺 -i n) border 圖片 pro nta com alt 本實例將在頁面上放置2個ImageButton並設置背景圖片,當點擊其中一個按鈕時對應的會將網頁的背景圖片更改為按鈕的背景圖片。程序實現的主要步驟為:(1)新建一個網站並創建Default.aspx頁面,

java利用socket實現客戶與伺服器的連線與資料傳遞

網路上的兩個程式通過一個雙向的通訊連線實現資料的交換,這個雙向鏈路的一端稱為一個 socket。socket 也就是套接字,可以用來實現不同虛擬機器或者不同計算機之間的通訊。在 Java 語言中,socket 可以分為兩種型別:面向連線的 socket 通訊協議(TCP)和麵向無連線的 socket

input file 實現上傳圖片,以base64上傳,相容IE8+,firefox,chrome

前言 最近在公司開發一個專案,其中涉及到一個公能,主要是上傳一些小圖片,而且在網站上需要大量引用這個小圖片的,對於上傳一些小的頭像等。一開始覺得直接上傳就好了,但是發現這樣子的話,一個小圖片就會發送一個http請求資源,大量的小圖片的請求資源的話,會造成伺服器資源的負擔。而

手把手帶你利用Ribbon實現客戶的負載均衡

之前的文章《SpringCloud搭建註冊中心與服務註冊》介紹了註冊中心的搭建和服務的註冊,本文將介紹下服務消費者通過Ribbon呼叫服務實現負載均衡的過程。 本文目錄 一、Ribbon服務呼叫流程二、搭建註冊中心三、服務提供者四、服務消費者五、服務呼叫實戰 一、Ribbon服務呼叫流程

通過pdf.js、openoffice實現客戶線上

宣告:部分程式碼引用自網路部落格,因未收藏部落格,無法找到引用,請作者諒解。 1.環境:windows、linux,openoffice服務 2.思路:進行預覽時,將資料庫檔案存入臨時資料夾,通過openoffice將doc\xls\ppt轉為pdf,返回路徑。將伺服器絕對

利用iframe和form上傳和圖片

IT color F5 method short upload pos title In URL文件 from django.contrib import admin from django.urls import path from app01 import views

JS實現圖片圖片的寬高獲取

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圖片預覽</title> </head> <style

利用socket技術實現用java實現客戶向服務傳送檔案,伺服器接收檔案並給出一個響應。

通訊是網路程式設計中重要的組成部分,而socket程式設計是網路程式設計的基礎。利用socket可以實現客戶端和伺服器端的通訊。下面我先把客戶端和伺服器端的程式碼粘上去再進行詳細的分析。 package test1; import java.io.File; import java.io

前端實現手機相簿或照相圖片及壓縮圖片的方法

總體思路是: 1、FileReader.readAsDataURL將上傳的圖片檔案轉為Base64格式 2、將img繪製到canvas上,canvas.toDataURL壓縮圖片 3、new Blob將壓縮後的Base64轉為Blob格式 4、FormData.append將圖片檔案資料存入formdata

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

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

JAVA實現客戶圖片上傳至伺服器(SSM)(不使用input 標籤使用,瀏覽器圖片直接上傳伺服器)

JAVA實現客戶端圖片上傳至伺服器(SSM)(不使用input 標籤使用,瀏覽器圖片直接上傳伺服器) 這是本人第一篇部落格 想著記錄一下平時學習的過程,也提供給和我一樣正在學習java的同學們!!(如果有不懂的同學歡迎留言 有時間一定回覆,寫的不好的地方請多包涵) * 開始: 首先要

C# 利用Socket類實現客戶和伺服器之間的通訊,可在本機之間實現資訊互動

利用Socket類實現了本機之間的客戶端與服務端的資訊互動。 伺服器: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using

利用Python中SocketServer 實現客戶與伺服器間非阻塞通訊

利用SocketServer模組來實現網路客戶端與伺服器併發連線非阻塞通訊。 首先,先了解下SocketServer模組中可供使用的類: BaseServer:包含伺服器的核心功能與混合(mix-in)類掛鉤;這個類只用於派生,所以不會生成這個類的例項;可以考慮使用TCPS

利用formdata非同步上傳圖片圖片

<img src="" style="width: 120px;margin-bottom: 5px" id="previewimg0"> <form action="" enctype="multipart/form-data" id="form0"> <input

小程式實現選擇圖片圖片長按刪除圖片

最近在做一個小程式的專案,初次接觸,也是邊學邊做,目前遇到圖片處理的相關問題,在此記錄,也對有需要的朋友提供一些幫助。 類似於微信朋友圈釋出圖片,長按指定圖片刪除 長按圖片刪除,不足9張可以繼續新增 圖片預覽效果 實現思路: 調整頁面,

利用多執行緒和TCP技術,實現客戶與服務之間的通訊

server.c #include <stdio.h> #include <stdlib.h> #include <string.h> #include <unistd.h> #include <errno.h>

PHP jQuery實現上傳圖片圖片的功能例項

在PHP專案開發中,有時候經常需要做新增圖片的功能。新增圖片時,一般需要即時預覽上傳的圖片。下面這個例子就是簡單的預覽上傳圖片功能,程式碼如下(分兩部分): 1、HTML程式碼: <div class="c-zt-pic">    <img id="pre

移動(h5)上傳,壓縮,圖片

專案裡邊這次用到了移動端上傳圖片,拿出來分享下。 1.首先是思路,在input 發生change的時候判斷瀏覽器時候支援圖片預覽,支援的情況下校驗圖片的格式,圖片的大小,之後將拿到的圖片進行canvas壓縮,圖片轉base64,然後上傳。 2.程式碼

readAsDataUrl()方法實現圖片效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head>