native_client_sdk/src/examples/file_histogram/file_histogram.html - chromium/src - Git at Google

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html>
   <!--
   Copyright (c) 2012 The Chromium Authors. All rights reserved.
   Use of this source code is governed by a BSD-style license that can be
   found in the LICENSE file.
   -->
 <head>
   <title>File Histogram</title>

   <script type="text/javascript">
     FileHistogramModule = null;  // Global application object.
     statusText = 'NO-STATUS';

     // Indicate load success.
     function moduleDidLoad() {
       FileHistogramModule = document.getElementById('file_histogram');
       updateStatus('SUCCESS');
     }

     // If the page loads before the Native Client module loads, then set the
     // status message indicating that the module is still loading.  Otherwise,
     // do not change the status message.
     function pageDidLoad() {
       if (FileHistogramModule == null) {
         updateStatus('LOADING...');
       } else {
         // It's possible that the Native Client module onload event fired
         // before the page's onload event.  In this case, the status message
         // will reflect 'SUCCESS', but won't be displayed.  This call will
         // display the current message.
         updateStatus();
       }
     }

     // Set the global status message.  If the element with id 'statusField'
     // exists, then set its HTML to the status message as well.
     // opt_message The message test.  If this is null or undefined, then
     // attempt to set the element with id 'statusField' to the value of
     // |statusText|.
     function updateStatus(opt_message) {
       if (opt_message)
         statusText = opt_message;
       var statusField = document.getElementById('status_field');
       if (statusField) {
         statusField.innerHTML = statusText;
       }
     }

     function postFileContents(file) {
       var reader = new FileReader();
       reader.onload = function(load_event) {
         if (FileHistogramModule)
           FileHistogramModule.postMessage(load_event.target.result);
       }
       reader.readAsArrayBuffer(file);
     }

     // Handle a file being dropped on to the plugin's rectangle.
     function handleFileDrop(dropEvent) {
       if (!dropEvent.dataTransfer || !dropEvent.dataTransfer.files)
         return;
       dropEvent.stopPropagation();
       dropEvent.preventDefault();
       var files = dropEvent.dataTransfer.files;
       for(var i = 0; i < files.length; ++i)
         postFileContents(files[i]);
     }

     // Handle a file being chosen from the <input type=file...> tag.
     function handleFileInput() {
       var file_input = document.getElementById("FileInput");
       var files = file_input.files;
       for(var i = 0; i < files.length; ++i)
         postFileContents(files[i]);
     }
   </script>
 </head>
 <body onload="pageDidLoad()">

 <h1>File Histogram example</h1>
 This example demonstrates the use of VarArrayBuffer, as well as a way to allow
 the user to provide one or more files to your Native Client application.
 <p>
 Select one or more files by clicking "Choose Files", or Drag and drop one or
 more files on to the square below. The embedded NaCl instance will read each
 file in order and display a histogram representing its contents.
 <p>
   <!-- Load the published .nexe.  This includes the 'nacl' attribute which
   shows how to load multi-architecture modules.  Each entry in the "nexes"
   object in the .nmf manifest file is a key-value pair: the key is the
   instruction set architecture ('x86-32', 'x86-64', etc.); the value is a URL
   for the desired NaCl module.
   To load the debug versions of your .nexes, set the 'nacl' attribute to the
   _dbg.nmf version of the manifest file.

   Note: The <EMBED> element is wrapped inside a <DIV>, which has both a 'load'
   and a 'drop' event listener attached.  This wrapping method is used instead of
   attaching the event listeners directly to the <EMBED> element to ensure that
   the listeners are active before the NaCl module 'load' event fires.
   -->
   <div id="listener">
     <script type="text/javascript">
       var listener = document.getElementById('listener');
       listener.addEventListener('load', moduleDidLoad, true);
       // The "drop" event fires when the user drops something (such as a file)
       // on to the target element (in this case, listener).
       listener.addEventListener('drop', handleFileDrop, true);
     </script>

     <embed name="nacl_module"
        id="file_histogram"
        width=256 height=256
        src="file_histogram.nmf"
        type="application/x-nacl" />
     <form name="FileInput"
           action=""
           method=""
           onsubmit="handleFileInput()">
       <input type="file"
              id="FileInput"
              onchange="this.form.onsubmit()"
              multiple>
     </form>
   </div>
 </p>

 <h2>Status</h2>
 <div id="status_field">NO-STATUS</div>
 </body>
 </html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html>
	<!--
	Copyright (c) 2012 The Chromium Authors. All rights reserved.
	Use of this source code is governed by a BSD-style license that can be
	found in the LICENSE file.
	-->
	<head>
	<title>File Histogram</title>

	<script type="text/javascript">
	FileHistogramModule = null; // Global application object.
	statusText = 'NO-STATUS';

	// Indicate load success.
	function moduleDidLoad() {
	FileHistogramModule = document.getElementById('file_histogram');
	updateStatus('SUCCESS');
	}

	// If the page loads before the Native Client module loads, then set the
	// status message indicating that the module is still loading. Otherwise,
	// do not change the status message.
	function pageDidLoad() {
	if (FileHistogramModule == null) {
	updateStatus('LOADING...');
	} else {
	// It's possible that the Native Client module onload event fired
	// before the page's onload event. In this case, the status message
	// will reflect 'SUCCESS', but won't be displayed. This call will
	// display the current message.
	updateStatus();
	}
	}

	// Set the global status message. If the element with id 'statusField'
	// exists, then set its HTML to the status message as well.
	// opt_message The message test. If this is null or undefined, then
	// attempt to set the element with id 'statusField' to the value of
	// \|statusText\|.
	function updateStatus(opt_message) {
	if (opt_message)
	statusText = opt_message;
	var statusField = document.getElementById('status_field');
	if (statusField) {
	statusField.innerHTML = statusText;
	}
	}

	function postFileContents(file) {
	var reader = new FileReader();
	reader.onload = function(load_event) {
	if (FileHistogramModule)
	FileHistogramModule.postMessage(load_event.target.result);
	}
	reader.readAsArrayBuffer(file);
	}

	// Handle a file being dropped on to the plugin's rectangle.
	function handleFileDrop(dropEvent) {
	if (!dropEvent.dataTransfer \|\| !dropEvent.dataTransfer.files)
	return;
	dropEvent.stopPropagation();
	dropEvent.preventDefault();
	var files = dropEvent.dataTransfer.files;
	for(var i = 0; i < files.length; ++i)
	postFileContents(files[i]);
	}

	// Handle a file being chosen from the <input type=file...> tag.
	function handleFileInput() {
	var file_input = document.getElementById("FileInput");
	var files = file_input.files;
	for(var i = 0; i < files.length; ++i)
	postFileContents(files[i]);
	}
	</script>
	</head>
	<body onload="pageDidLoad()">

	<h1>File Histogram example</h1>
	This example demonstrates the use of VarArrayBuffer, as well as a way to allow
	the user to provide one or more files to your Native Client application.
	<p>
	Select one or more files by clicking "Choose Files", or Drag and drop one or
	more files on to the square below. The embedded NaCl instance will read each
	file in order and display a histogram representing its contents.
	<p>
	<!-- Load the published .nexe. This includes the 'nacl' attribute which
	shows how to load multi-architecture modules. Each entry in the "nexes"
	object in the .nmf manifest file is a key-value pair: the key is the
	instruction set architecture ('x86-32', 'x86-64', etc.); the value is a URL
	for the desired NaCl module.
	To load the debug versions of your .nexes, set the 'nacl' attribute to the
	_dbg.nmf version of the manifest file.

	Note: The <EMBED> element is wrapped inside a <DIV>, which has both a 'load'
	and a 'drop' event listener attached. This wrapping method is used instead of
	attaching the event listeners directly to the <EMBED> element to ensure that
	the listeners are active before the NaCl module 'load' event fires.
	-->
	<div id="listener">
	<script type="text/javascript">
	var listener = document.getElementById('listener');
	listener.addEventListener('load', moduleDidLoad, true);
	// The "drop" event fires when the user drops something (such as a file)
	// on to the target element (in this case, listener).
	listener.addEventListener('drop', handleFileDrop, true);
	</script>

	<embed name="nacl_module"
	id="file_histogram"
	width=256 height=256
	src="file_histogram.nmf"
	type="application/x-nacl" />
	<form name="FileInput"
	action=""
	method=""
	onsubmit="handleFileInput()">
	<input type="file"
	id="FileInput"
	onchange="this.form.onsubmit()"
	multiple>
	</form>
	</div>
	</p>

	<h2>Status</h2>
	<div id="status_field">NO-STATUS</div>
	</body>
	</html>