JavaScript ファイル API ファイルのアップロードプレビュー_javascript スキル

ブラウザベースのアプリケーションの場合、ローカル ファイルにアクセスするのは厄介な問題で、通常は タグを使用することしかできません。 。実装プロセスは次のとおりです。ファイルを選択すると、ユーザーが指定したファイルの名前が value 属性に保存され、フォームが送信されると、ブラウザーはファイル名だけでなく、選択したファイルの内容をサーバーに送信します。次に、サーバーから返されたアドレスを取得してプレビューします。

しかし、ある日、写真をアップロードする必要があり、写真をアップロードした後にプレビューし、別の写真を変更したい場合は、まずサーバーにアップロードしてからプレビューする必要があります。ネットワークが比較的遅い場合、これは非常に面倒です。

そのため、サーバーにアップロードする前にプレビューする必要がある場合があります。特に、新浪微博でのアバターの置き換えなどのカット機能を備えたものではそうです。ただし、現時点ではプラグイン開発かフラッシュを使用するしかありません。ブラウザごとに技術的な実装が異なるため、複数のブラウザをサポートするにはプログラムが非常に複雑になり、困難になります。維持する。幸いなことに、現在では File API が存在します。

変更イベントをリッスンすることで、ユーザーが選択したファイルを知ることができ、ファイル オブジェクトを含むファイル コレクションを追加できます。各ファイル オブジェクトはファイルに対応します。そして、すべてに次の読み取り専用属性 name、size、type、lastModifiedDate があります。

を例として、onchange を監視し、そのファイル オブジェクトを出力します。

ここから、ユーザーが選択したファイル形式、ファイル名、ファイルサイズなどに関する情報を知ることができます。したがって、選択したドキュメントが要件の一部を満たしているかどうかを確認するのは簡単です。

さらに、File API は、ファイル内のデータを読み取るための FileReader タイプも提供します。

FileReader タイプは、XMLHttpRequest と同様の非同期ファイル読み取りメカニズムを実装しますが、リモート サーバーではなくファイル システムを読み取ります。いくつかの読み取り方法を提供します:

• readAsText(file,encoding): ファイルをプレーン テキスト形式で読み取り、読み取ったテキストを result 属性に保存します。2 番目のパラメーターは、エンコード タイプを指定するために使用されます (オプション)。
• readAsDataURL(file): 読み込んだファイルはデータ URL の形式で result 属性に保存されます。
• readAsBinaryString(file): ファイルを読み取り、文字列を result 属性に保存します。
• readAsArrayBuffer(file): ファイルを読み取り、結果属性
にファイルの内容を含む ArrayBuffer を保存します。

上記のメソッドで同じローカル画像を読み取り、次のように比較のために result 属性に保存された情報を出力します。

readAsText(ファイル,エンコーディング):

readAsDataURL(ファイル):

上記の比較を通じて、これらのファイル読み取り方法は、ファイル データの柔軟な処理に非常に便利であることがわかりました。例えば、画像ファイルを読み込み、データURLとして保存することで、アップロード前のプレビュー機能として利用できます。

読み取りプロセスは非同期であるため、FileReader にはさまざまな状況を処理するためのいくつかのイベントがあります: progress (新しいデータが読み取られたかどうか)、erro (エラーが発生したかどうか)、load (ファイル全体が読み取られたかどうか)書類）。

さまざまな理由でファイルを読み取れなかった場合、エラーイベントが発生します。エラーイベントが発生すると、FileReader の error 属性のオブジェクトに属性コード (エラーコード) が保存されます。

アップロード プレビューに FileReader を使用する例:

HTML:

<label class="item_label">上传照片：
 <span style="width: 100px; height: 100px;border:1px solid #ccc; display:inline-block"><img  src="/static/imghwm/default1.png"  data-src="#"  class="lazy" id="uploadPreview"   style="max-width:90%" alt="JavaScript ファイル API ファイルのアップロードプレビュー_javascript スキル" ></span>
 <input type="file" name="file" id="postFile" style="width:74px;">
 <span id="error_text" style="display: none;">提示</span>
</label>
　　

JavaScript:

document.getElementById('postFile').onchange = function() {
 var val = this.value;
 var upLoadType = '.jpg,.gif,.bmp,.png';//['.jpg','.gif','.bmp','.png']; //可上传的格式
 var fileExt = val.substr(val.lastIndexOf(".")).toLowerCase(); //从字符串中抽出最后一次出现.之后的字符，并且转换成小写
 var result = upLoadType.indexOf(fileExt); //查找后缀名是否符合条件，如果符合返回>=0，如果不符合则返回负数;
 _alertMsg = $('#error_text');
 var oFReader = new FileReader();
 if (this.files.length === 0) { return; }
 var oFile = this.files[0]; //如果只有一个文件则只需要访问这个FileList对象中的第一个元素.
  
 if (oFile.size / 1024 < 100) {
  _alertMsg.html("<font style='color:blue'>√</font>").show()
 };
 if (result < 0) {
  _alertMsg.html("请输入正确格式:" + upLoadType).show();
 } else{
  _alertMsg.html("<font style='color:blue'>√</font>").show();
 };
 
 oFReader.readAsDataURL(oFile); // 开始在后台进行读取操作。当图像文件的所有内容加载后,他们转换成一个data:URL,传递到onload回调函数中
 oFReader.onload = function (oFREvent) { //当读取操作成功完成时调用.
  document.getElementById("uploadPreview").src = oFREvent.target.result;
 };
};

効果と返される画像の URL:

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。