検索
ホームページウェブフロントエンドjsチュートリアルJavaScript File API はファイルアップロードのプレビュー_JavaScript スキルを実装します

1. 概要
これまで、ブラウザベースのアプリケーションにとって、ローカル ファイルへのアクセスは頭痛の種でした。 Web 2.0 アプリケーション テクノロジの継続的な開発に伴い、JavaScript が果たす役割はますます重要になっていますが、セキュリティ上の考慮事項により、JavaScript は常にローカル ファイルにアクセスできませんでした。したがって、ローカル ファイルのドラッグやアップロードなどの機能をブラウザに実装するには、特定のブラウザが提供するさまざまなテクノロジに頼る必要があります。たとえば、IE の場合は、ActiveX コントロールを使用してローカル ファイルにアクセスする必要があり、Firefox の場合は、プラグイン開発も使用する必要があります。ブラウザごとに技術的な実装が異なるため、プログラムで複数のブラウザをサポートするには、プログラムが非常に複雑になり、保守が困難になります。しかし今、File API の出現により、この状況は完全に変わりました。

ファイル API は、Mozilla が W3C に提出したドラフトで、標準 JavaScript API のセットを開始することを目的としており、その基本的な機能は JavaScript でローカル ファイルを操作することです。セキュリティ上の理由から、この API はローカル ファイルへの限定的なアクセスのみを提供します。これを使用すると、純粋な JavaScript を使用して、ローカル ファイルの読み取りとアップロードを簡単に行うことができます。現在、FireFox 3.6 は、この機能をサポートする最初のブラウザです。さらに、Google Chrome および Safari ブラウザの最新バージョンも対応するサポートを提供します。 File API は、W3C が現在開発中の将来の HTML 5 仕様の一部となる予定です。

2. ファイル API の概要
File API は、一連の JavaScript オブジェクトとイベントで構成されます。開発者は、 ファイル選択コントロールで選択されたファイルを操作できるようになります。図 1 は、File API 内のすべての JavaScript の組み合わせ関係を示しています。

タイプ FileList には、一連の File オブジェクトが含まれています。通常、FileList オブジェクトはフォームのファイル フィールド () から取得できます。 Blob オブジェクトは、ブラウザーが読み取ることができる生のバイナリ ストリームのセットを表します。 Blob オブジェクトでは、size 属性はストリームのサイズを表します。関数slice()は、長いBlobオブジェクトを小さな部分に分割できます。 File オブジェクトは Blob オブジェクトを継承し、ファイル関連のプロパティが Blob オブジェクトに追加されます。このうち、属性名はファイルの名前を表し、ファイルのパス情報を削除し、ファイル名のみを保持します。 type 属性はファイルの MIME タイプを表します。属性 urn は、このファイルの URN 情報を表します。ファイル読み取り操作を完了するには、FileReader オブジェクト インスタンスが File オブジェクトまたは BLOB オブジェクトに関連付けられ、3 つの異なるファイル読み取り関数と 6 つのイベントが提供されます。

ファイル読み取り関数の具体的な内容:
readAsBinaryString() ファイルの内容を読み取ります。読み取り結果はバイナリ文字列です。ファイルの各バイトは、[0..255] の範囲の整数として表されます。この関数は、パラメータとして File オブジェクトを受け取ります。
readAsText() ファイルの内容を読み取ります。読み取り結果は、ファイルの内容を表すテキストの文字列です。この関数は、File オブジェクトとテキスト エンコーディングの名前をパラメータとして受け取ります。
readAsDataURL ファイルの内容を読み取ります。読み取り結果は data: URL です。 DataURL は RFC2397 で定義されています。
ファイル読み取りイベントの具体的な内容:
イベント名 イベントの説明
Onloadstart ファイルの読み取りが開始されるときにトリガーされます。
Progress 読み取りの進行中に定期的にトリガーされます。イベントパラメータには、読み取られたデータの総量が含まれます。
Abort 読み取りが中止されるときに発生します。
Error 読み取りエラーが発生するとトリガーされます。
Load 読み取りが正常に完了するとトリガーされます。
Loadend 成功または失敗に関係なく、読み取りが完了するとトリガーされます。

3. ファイル API の簡単な例
次に、簡単な例を使用して、File API の基本的な使用法を示します。この例には 2 つのコード ファイルが含まれており、index.html には Web 側の HTML コードが含まれ、upload.jsp にはアップロードされたファイルを受信するためのサーバー側のコードが含まれています。添付ファイルのsourcecode.zipを参照してください。この例では、ファイル選択フィールドのある従来のフォームを表示します。ユーザーがファイルを選択して「送信」をクリックすると、File API を使用してファイルのコンテンツを読み取り、Ajax を使用して XMLHttpRequest オブジェクトを通じてファイルをサーバーにアップロードします。図 2 は、動作中のデモのスクリーンショットを示しています。

コードをステップバイステップで示します。リスト 1 は、コードの HTML 部分を示しています。
リスト 1 のサンプル コードの HTML 部分

 <body> 
 <h1 id="File-API-Demo">File API Demo</h1> 
 <p> 
 <!-- 用于文件上传的表单元素 --> 
 <form name="demoForm" id="demoForm" method="post" enctype="multipart/form-data" 
 action="javascript: uploadAndSubmit();"> 
 <p>Upload File: <input type="file" name="file" /></p> 
 <p><input type="submit" value="Submit" /></p> 
 </form> 
 <div>Progessing (in Bytes): <span id="bytesRead"> 
 </span> / <span id="bytesTotal"></span> 
 </div> 
 </p> 
 </body>

ご覧のとおり、通常の

タグを使用して、従来の 要素を組み込みます。
内にも submit 要素があります。
の外側には、読み取られたデータの量とデータの合計量を表す 要素があります。 の action 属性は、JavaScript 関数 UploadAndSubmit() を指します。この関数により、ファイルの読み取りとアップロードのプロセスが完了します。関数コードをリスト 2 に示します。
リスト 2 ファイルを読み取り、アップロードする JavaScript 関数
 function uploadAndSubmit() { 
 var form = document.forms["demoForm"]; 
  
 if (form["file"].files.length > 0) { 
 // 寻找表单域中的 <input type="file" ... /> 标签
 var file = form["file"].files[0]; 
 // try sending 
 var reader = new FileReader();

 reader.onloadstart = function() { 
 // 这个事件在读取开始时触发
 console.log("onloadstart"); 
 document.getElementById("bytesTotal").textContent = file.size; 
 } 
 reader.onprogress = function(p) { 
 // 这个事件在读取进行中定时触发
 console.log("onprogress"); 
 document.getElementById("bytesRead").textContent = p.loaded; 
 }

 reader.onload = function() { 
  // 这个事件在读取成功结束后触发
 console.log("load complete"); 
 }

 reader.onloadend = function() { 
  // 这个事件在读取结束后,无论成功或者失败都会触发
 if (reader.error) { 
 console.log(reader.error); 
 } else { 
 document.getElementById("bytesRead").textContent = file.size; 
 // 构造 XMLHttpRequest 对象,发送文件 Binary 数据
 var xhr = new XMLHttpRequest(); 
 xhr.open(/* method */ "POST", 
 /* target url */ "upload.jsp&#63;fileName=" + file.name 
 /*, async, default to true */); 
 xhr.overrideMimeType("application/octet-stream"); 
 xhr.sendAsBinary(reader.result); 
 xhr.onreadystatechange = function() { 
 if (xhr.readyState == 4) { 
 if (xhr.status == 200) { 
 console.log("upload complete"); 
 console.log("response: " + xhr.responseText); 
 } 
 } 
 } 
 } 
 }

 reader.readAsBinaryString(file); 
 } else { 
 alert ("Please choose a file."); 
 } 
 }

この関数では、まず、 を含む 要素を見つけます。 要素にファイルが含まれていない場合は、ユーザーがファイルを選択していないことを意味し、エラーが報告されます。
リスト 3 要素の検索

 var form = document.forms["demoForm"];

 if (form["file"].files.length > 0) 
 { 
 var file = form["file"].files[0]; 
… …
 } 
 else 
 { 
 alert ("Please choose a file."); 
 }

ここで、form["file"].files から返されるオブジェクト タイプは、前述の FileList です。そこから最初の要素を取得します。その後、FileReader オブジェクトを構築します。
var Reader = new FileReader();
onloadstart イベントが発生すると、読み取られたデータの合計量を表す 要素をページに設定します。リスト 4 を参照
リスト 4 onloadstart イベント

 reader.onloadstart = function() 
 { 
 console.log("onloadstart"); 
 document.getElementById("bytesTotal").textContent = file.size; 
 }
在 onprogress 事件触发时,更新页面上已读取数据量的 <span> 元素。参见清单 5

リスト 5 onprogress イベント

 reader.onprogress = function(p) { 
 console.log("onloadstart"); 
 document.getElementById("bytesRead").textContent = p.loaded; 
 }

最後の onloadend イベントでは、エラーがなければ、ファイルのコンテンツを読み取り、XMLHttpRequest を通じてアップロードします。
リスト 6 onloadend イベント

 reader.onloadend = function() 
 { 
 if (reader.error) 
 { 
 console.log(reader.error); 
 } 
 else 
 { 
 // 构造 XMLHttpRequest 对象,发送文件 Binary 数据
 var xhr = new XMLHttpRequest(); 
 xhr.open(/* method */ "POST", 
 /* target url */ "upload.jsp&#63;fileName=" + file.name 
 /*, async, default to true */); 
 xhr.overrideMimeType("application/octet-stream"); 
 xhr.sendAsBinary(reader.result); 
… …
 } 
 }

File API の仕様に従って、onloadend イベントの処理をイベント エラーとイベント ロードの処理に分割することもできます。
この例では、バックグラウンドで JSP を使用してアップロードを処理します。 JSP コードをリスト 7 に示します。
リスト 7 アップロードされた JSP コードの処理

 <%@ page import="java.io.*" %><% 
  BufferedInputStream fileIn = new 
 BufferedInputStream(request.getInputStream()); 
  String fn = request.getParameter("fileName"); 
  
  byte[] buf = new byte[1024];
//接收文件上传并保存到 d:\
  File file = new File("d:/" + fn); 
  
  BufferedOutputStream fileOut = new BufferedOutputStream(new 
 FileOutputStream(file)); 
  
  while (true) { 
    // 读取数据
   int bytesIn = fileIn.read(buf, 0, 1024); 
   
   System.out.println(bytesIn); 
   
   if (bytesIn == -1) 
 { 
     break; 
   } 
 else 
 { 
     fileOut.write(buf, 0, bytesIn); 
   } 
  } 
  
  fileOut.flush(); 
  fileOut.close(); 
  
  out.print(file.getAbsolutePath()); 
 %>

在这段 JSP 代码中,我们从 POST 请求中接受文件名字以及二进制数据。将二进制数据写入到服务器的“D:\”路径中。并返回文件的完整路径。以上代码可以在最新的 Firefox 3.6 中调试通过。
四、使用拖拽上传文件
前面我们介绍了怎样通过 HTML5 的 File API 来读取本地文件内容并上传到服务器,通过这种方式已经能够满足大部分用户的需求了。其中一个不足是用户只能通过点击“浏览”按钮来逐个添加文件,如果需要批量上传文件,会导致用户体验不是很友好。而在桌面应用中,用户一般可以通过鼠标拖拽的方式方便地上传文件。拖拽一直是 Web 应用的一个软肋,一般浏览器都不提供对拖拽的支持。虽然 Web 程序员可以通过鼠标的 mouseenter,mouseover 和 mouseout 等事件来实现拖拽效果,但是这种方式也只能使拖拽的范围局限在浏览器里面。一个好消息是 HTML5 里面不仅加入了 File API,而且加入了对拖拽的支持,Firefox 3.5 开始已经对 File API 和拖拽提供了支持。下面我们先简要介绍一下拖拽的使用,然后用一个例子来说明如何通过拖拽上传文件。
1、拖拽简介
拖拽一般涉及两个对象:拖拽源和拖拽目标。
拖拽源:在 HTML5 草案里如果一个对象可以作为源被拖拽,需要设置 draggable 属性为 true 来标识该对象可作为拖拽源。然后侦听源对象的 dragstart 事件,在事件处理函数里设置好 DataTransfer。在 DataTransfer 里可以设置拖拽数据的类型和值。比如是纯文本的值,可以设置类型为"text/plain",url 则把类型设置为"text/uri-list"。 这样,目标对象就可以根据期望的类型来选择数据了。
拖拽目标:一个拖拽目标必须侦听 3 个事件。
dragenter:目标对象通过响应这个事件来确定是否接收拖拽。如果接收则需要取消这个事件,停止时间的继续传播。
dragover:通过响应这个事件来显示拖拽的提示效果。
drop:目标对象通过响应这个事件来处理拖拽数据。在下面的例子里我们将在 drop 事件的处理函数里获取 DataTransfer 对象,取出要上传的文件。
由于本文主要介绍 File API,对这部分不作详细解释,感兴趣的读者可以参考 HTML5 草案(见参考资料)。
2、拖拽上传文件实例
下面以一个较为具体的例子说明如何结合拖拽和 File API 来上传文档。由于直接和桌面交互,所以我们不需要处理拖拽源,直接在目标对象里从 DataTransfer 对象获取数据即可。
首先,我们需要创建一个目标容器用来接收拖拽事件,添加一个 div 元素即可。然后用一个列表来展示上传文件的缩略图,进度条及文件名。参见清单 8 的 HTML 代码和图 3 的效果图。详细代码请参见附件中的 dnd.html 文件。
清单 8 拖曳目标的 HTML 代码

 <div id="container"> 
 <span>Drag and drop files here to upload.</span> 
 <ul id="fileList"></ul> 
 </div>

拖拽目标创建好之后,我们需要侦听其对应的事件 dragenter,dragover 和 drop。在 dragenter 事件处理函数里,我们只是简单地清除文件列表,然后取消 dragenter 事件的传播,表示我们接收该事件。更加妥当的作法是判断 DataTransfer 里的数据是否为文件,这里我们假设所有拖拽源都是文件。dragover 事件里我们取消该事件,使用默认的拖拽显示效果。在 drop 事件里我们注册了 handleDrop 事件处理函数来获取文件信息并上传文件。清单 9 展示了这些事件处理函数。
清单 9 设置事件处理函数

 function addDNDListeners() 
 { 
 var container = document.getElementById("container"); 
 var fileList = document.getElementById("fileList"); 
 // 拖拽进入目标对象时触发
 container.addEventListener("dragenter", function(event) 
 { 
 fileList.innerHTML =''; 
 event.stopPropagation(); 
 event.preventDefault(); 
 }, false); 
 // 拖拽在目标对象上时触发
 container.addEventListener("dragover", function(event) 
 { 
 event.stopPropagation(); 
 event.preventDefault(); 
 }, false); 
 // 拖拽结束时触发
 container.addEventListener("drop", handleDrop, false); 
 } 
 window.addEventListener("load", addDNDListeners, false);

处理 drop 事件
用户在拖拽结束时松开鼠标触发 drop 事件。在 drop 事件里,我们可以通过 event 参数的 DataTransfer 对象获取 files 数据,通过遍历 files 数组可以获取每个文件的信息。然后针对每个文件,创建 HTML 元素来显示缩略图,进度条和文件名称。File 对象的 getAsDataURL 可以将文件内容以 URL 的形式返回,对图片文件来说可以用来显示缩略图。要注意的一点是,在 drop 事件处理函数里要取消事件的继续传播和默认处理函数,结束 drop 事件的处理。清单 10 展示了 drop 事件的处理代码。
清单 10 drop 事件的处理

 function handleDrop(event) 
 { 
  // 获取拖拽的文件列表
 var files = event.dataTransfer.files; 
 event.stopPropagation(); 
 event.preventDefault(); 
 var fileList = document.getElementById("fileList"); 
 // 展示文件缩略图,文件名和上传进度,上传文件
 for (var i = 0; i < files.length; i++) 
 { 
 var file = files[i]; 
 var li = document.createElement('li'); 
 var progressbar = document.createElement('div'); 
 var img = document.createElement('img'); 
 var name = document.createElement('span'); 
 progressbar.className = "progressBar"; 
 img.src = files[i].getAsDataURL(); 
 img.width = 32; 
 img.height = 32; 
 name.innerHTML = file.name; 
 li.appendChild(img); 
 li.appendChild(name); 
 li.appendChild(progressbar); 
 fileList.appendChild(li); 
 uploadFile(file, progressbar) 
 } 
 }

上传文件
我们可以通过 XMLHttpRequest 对象的 sendAsBinary 方法来上传文件,通过侦听 upload 的 progress,load 和 error 事件来监测文件上传的进度,成功完成或是否发生错误。在 progress 事件处理函数里我们通过计算已经上传的比例来确定进度条的位置。参见清单 11。图 4 展示了上传文件的效果图。
清单 11 上传文件

 function uploadFile(file, progressbar) 
 { 
 var xhr = new XMLHttpRequest(); 
 var upload = xhr.upload;

 var p = document.createElement('p'); 
 p.textContent = "0%"; 
 progressbar.appendChild(p); 
 upload.progressbar = progressbar; 
 // 设置上传文件相关的事件处理函数
 upload.addEventListener("progress", uploadProgress, false); 
 upload.addEventListener("load", uploadSucceed, false); 
 upload.addEventListener("error", uploadError, false); 
 // 上传文件
 xhr.open("POST", "upload.jsp&#63;fileName="+file.name); 
 xhr.overrideMimeType("application/octet-stream"); 
 xhr.sendAsBinary(file.getAsBinary()); 
 } 
 function uploadProgress(event) 
 { 
 if (event.lengthComputable) 
 { 
  // 将进度换算成百分比
 var percentage = Math.round((event.loaded * 100) / event.total); 
 console.log("percentage:" + percentage); 
 if (percentage < 100) 
 { 
 event.target.progressbar.firstChild.style.width = (percentage*2) + "px"; 
 event.target.progressbar.firstChild.textContent = percentage + "%"; 
 } 
 } 
 } 
 function uploadSucceed(event) 
 { 
 event.target.progressbar.firstChild.style.width = "200px"; 
 event.target.progressbar.firstChild.textContent = "100%"; 
 } 
 function uploadError(error) 
 { 
 alert("error: " + error); 
 }


本文通过对 File API 规范的讲解,以及两个展示其使用方法的例子,为大家提前揭示了作为未来 HTML5 重要组成部分的 JavaScript File API 的全貌。利用它,结合其他 HTML5 的新特性,比如 Drag&Drop,我们可以利用纯 JavaScript 方案,为用户提供更好使用体验的 Web 应用,与此同时,这样的一致化方案也使我们避免了以往跨浏览器支持所花费的巨大代价。相信 File API 的出现和广泛应用,将会是未来的 Web 2.0 应用的大势所趋。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
Python vs. JavaScript:コミュニティ、ライブラリ、リソースPython vs. JavaScript:コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1)Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2)Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3)どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ:すべてがどのように機能するかC/CからJavaScriptへ:すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1)C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2)C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3)JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン:実装の比較JavaScriptエンジン:実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて:現実世界のJavaScriptブラウザを超えて:現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション(EDTECHアプリ)を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか? マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript:Web言語の汎用性の調査JavaScript:Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1)フロントエンド開発:DOM操作と最新のフレームワーク(React、Vue.JS、Angularなど)を通じて、動的なWebページとシングルページアプリケーションを構築します。 2)サーバー側の開発:node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3)モバイルおよびデスクトップアプリケーション開発:クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化:現在の傾向と将来の見通しJavaScriptの進化:現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。