2. 程式人生 > >如何在伺服器端下載的網頁中顯示客戶端的圖片

如何在伺服器端下載的網頁中顯示客戶端的圖片

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

一般情況下，網頁只能顯示伺服器上的圖片。
（網頁中的圖片都是從伺服器端請求來的圖片）。
如何實現頁面中顯示客戶端的圖片呢？（比如說在桌面上拖拽一個圖面到網頁中的容器中）
HTML5中提供的用於檔案輸入輸出（I/O）的物件：
File：代表一個檔案/目錄檔案物件
FileList：代表一個檔案列表（類陣列物件）
FileReader：用於從檔案中讀取內容
FileWriter：用於向檔案寫出內容

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>
 
Document</title>
	<style>
		#container{
			width: 400px;
			height: 200px;
			border:1px solid #aaa;
		}
	</style>
</head>
<body>
<h2>請拖拽您的圖片到下放區域中</h2>
<div id="container"></div>
<script>
//拖放的目標物件--document，監聽drop事件，防止瀏覽器中開啟客戶端圖片
document.ondragover
 
=function(e){
	//阻止dragover的預設行為；繼續觸發dragleave
	e.preventDefault();
}
document.ondrop=function(e){
	//阻止document的drop事件的預設行為：在當前敞口中開啟客戶端圖片
	e.preventDefault();
}
//拖放的源物件--客戶端的圖片
//拖放的目標物件--div#container，若圖片釋放此元素上方，則需要在其中顯示出該圖片
container.ondragover=function(e){
	e.preventDefault();
}
container.ondrop=function
 
(e){
	//讀取拖放進來的客戶端圖片
	//提示Chrome此處的顯示有問題：files.length:0，其實不是0
	//遍歷拖進來的內容
	/*for(var i=0;i<list.length;i++){
		var f=list[i];
		console.log(f);
	}*/
	var f0=e.dataTransfer.files[0];
	var reader=new FileReader();//檔案讀取器
	//只適合於文字檔案,讀取指定為檔案的內容，作為'資料URL'
	reader.readAsDataURL(f0);
	reader.onload=function(){
		//客戶端檔案讀取完成
		var img=new Image();
		img.src=reader.result;//DataURL
		container.appendChild(img);
	}
}
</script>
</body>
</html>

相關推薦

如何在伺服器端下載的網頁中顯示客戶端的圖片

一般情況下，網頁只能顯示伺服器上的圖片。 （網頁中的圖片都是從伺服器端請求來的圖片）。 如何實現頁面中顯示客戶端的圖片呢？（比如說在桌面上拖拽一個圖面到網頁中的容器中） HTML5中提供的用於檔案輸入輸出（I/O）的物件： File：代表一個檔案/目錄檔案物件 FileList：代表一個檔案

ASP.NET 網頁中的客戶端指令碼

ASP.NET 是基於伺服器的技術，因此不會直接與瀏覽器進行互動。例如，不存在從瀏覽器接受鍵盤輸入、響應滑鼠事件或執行其他涉及使用者與瀏覽器間互動任務的 ASP.NET 方法。ASP.NET 可以在頁面傳送後獲取這類操作的結果，但無法直接響應瀏覽器操作。 這些型別的瀏覽器互動任務可通過使用以 E

解決Exchange2010中無法顯示客戶端訪問服務器ClientAccessArray中成員的問題

查看 加域 ext 單擊 decimal pcc color ads ems 最近在搭建Exchange2010的過程中，在部署了兩臺客戶端訪問服務器角色後，添加了客戶端訪問服務器陣列後發現少了一個CAS 成員，如下圖所示：我的環境可是有兩臺CAS服務器角色的，如下圖：於是

伺服器中判斷客戶端socket斷開連線的方法

1, 如果服務端的Socket比客戶端的Socket先關閉，會導致客戶端出現TIME_WAIT狀態，佔用系統資源。 所以，必須等客戶端先關閉Socket後，伺服器端再關閉Socket才能避免TIME_WAIT狀態的出現。 2, 在linux下寫socket的程式的時候，如果嘗

QT 中Socket客戶端與伺服器異常斷開後重連

在現在的專案開發中，經常要使用TCP/IP協議來進行通訊，但有時候與伺服器端的連結由於網路問題導致連線異常或斷開，這就需要我們的軟體能自動重連，在Linux中，我們的思維一般是通過心跳包來監控連線是否斷開，有時候還單獨開一個執行緒，但是在QT中，就變得簡單多了，當連線異常

windows和linux中RabbitMQ客戶端下載安裝

本文主要內容是RabbitMQ的安裝步驟【Windows系統與linux上的安裝】及客戶端的簡單使用。Windows上安裝1安裝Erlang下載erlang地址：http://www.erlang.org/downloads    erlang安裝完成。安裝完成之後建立一個名

Linux中SVN伺服器安裝與使用以及windows客戶端的使用(CentOS-6.5)

1 SVN簡介     svn是Subversion的簡稱，是一個開放原始碼的版本控制系統，相較於RCS、CVS，它採用了分支管理系統，它的設計目標就是取代CVS。網際網路上很多版本控制服務已從CVS轉移到Subversion。 svn伺服器有2種執行方式：獨立伺服器和藉助

ASP.NET 伺服器控制元件中插入客戶端指令碼(自定義控制元件)

用於：Microsoft® ASP.NET前提條件：本文假設讀者熟悉 ASP.NET。難度： 2摘要：儘管從技術角度講，ASP.NET 伺服器控制元件的所有功能都可以在伺服器端執行，但通常情況下通過新增客戶端指令碼可以大大增強伺服器控制元件的可用性。本文將探討伺服器控制元件傳

解決zbx的web界面zabbix服務器端運行中 顯示為 不

zbx的web顯示 不zabbix裝完，發現server和agent服務都起來了，端口監聽了，但是web界面zabbix服務器端運行中為 不解決：打開瀏覽器，到zabbix的setup.php界面 一般輸入ip/zabbix/setup.php 回車按照提示一步一步下來填寫 數據庫用戶名 密碼等最後一步會提示

解決asp.net中“從客戶端中檢測到有潛在危險的Request.Form值”的錯誤

在使用ASP.NET MVC 5 的過程中，在使用富文字編輯器過程中，出現如標題中的錯誤提示。網上找了一些解決方法。大多就是以mvc3，mvc4為版本的解決方案。在mvc5的controller的action方法頭部新增就可以解決 [ValidateInput(false)] 另外推薦一

ｔｏｒｎａｄｏ伺服器以ＪＳＯＮ字串作為對客戶端的響應演示

# ｔｏｒｎａｄｏ伺服器以ＪＳＯＮ字串作為對客戶端的響應演示 import json import tornado from tornado.httpserver import HTTPServer from tornado.ioloop import IOLoop from tornado.o

xfire客戶端呼叫xfire服務端報錯 org.codehaus.xfire.XFireRuntimeException: Could not invoke service.. Server returned error code = 40 遇到這種問題，一般不是伺服器端的配置問題就是客戶端的UR

     xfire客戶端呼叫xfire服務端報錯     org.codehaus.xfire.XFireRuntimeException: Could not invoke service.. Server ret

在ASP.NET Core 2.x中獲取客戶端IP地址

一、前言 大家也知道服務端請求時我們獲取的IP地址是包含在請求頭中，因此這也大大便利了IP的獲取。 在ASP.NET中，可以通過以下方式獲取客戶端的IP地址。 HttpContext.Current.Request.ServerVariables["HTTP_X_FORWARDED_FOR"]

MySQL資料庫6.0v6.0.11官方版(32位/64位) 下載使用 服務和客戶端

基本簡介 MySQL資料庫是一款小型關聯式資料庫管理系統，由於MySQL資料庫體積小、速度快、成本低，尤其是開放原始碼這一特點，一般中小型網站開發都選擇MySQL作為網站資料庫。MySQL的執行效能非常高，執行速度非常快，支援多平臺及各種開發語言，為使用者提供安全的密碼系統，

在Oracle中檢視客戶端連線的IP資訊 .

前言 oracle 12c 預設session中，未記錄客戶端ip 可以通過其它方法追加ip到session中的。 方法【轉】 大家都知道在v$session 中記錄著客戶端的機器名稱,但是沒有IP , 如果記錄clinet ip 呢? con sy

linux中svn客戶端設定忽略

很簡單。 svn propedit svn:ignore 【目錄】 舉個栗子：  我在/root/svn/ 資料夾下面 我想忽略這個資料夾下面的js所有的js檔案。 操作方式：  cd /root/svn svn propedit svn:ignore .&nb

Linux中telnet客戶端與服務端的安裝與配置

Telnet服務的配置步驟如下: 一、安裝telnet軟體包(通常要兩個）。 　　1、 telnet-client (或 telnet)，這個軟體包提供的是 telnet 客戶端程式； 　　2、是 telnet-server 軟體包，這個才是真正的 Telnet ser

nodejs HTTP伺服器專題（四）-獲取客戶端請求資訊

（1．理論知識） 客戶端請求資訊包括如下： Method： GET,POST Url： path Headers：請求頭 httpVersion: http版本（1.0和1.1） socket：Socket 物件 Data：客戶端傳過來的資料 過濾圖示請求

Linux環境下伺服器利用組播來獲取客戶端IP

單播是兩個主機之間端對端通訊（比如TCP、UDP通訊），而廣播用於一個主機對整個區域網中所有主機的通訊。單播和廣播是兩個極端，要麼對一個主機通訊，要麼對區域網內所有主機通訊。然而在實際情況下，比如要獲取區域網內獲取執行特殊任務主機IP，單播顯然不適用，因為單播必須首先要知道通

在ASP.NET Core中獲取客戶端IP地址

原文: 在ASP.NET Core中獲取客戶端IP地址 隨著ASP.NET的發展，有不同的方式從請求中訪問客戶端IP地址。WebForms和MVC Web應用程式只是訪問當前HTTP上下文的請求。   var ip = HttpContext.Current.Request.UserHo