FileReaderのを達成するためのjsファイルのアップロード画像、プレビュー

FileReaderのを達成するためのjsファイルのアップロード画像、プレビュー

ReadAsDataURL方法FileReaderのオブジェクトは、データURLを読んでファイルにエンコードすることができます。
データURLが特殊な技術で、Webページに埋め込まれた（画像など）データをすることができ、外部ファイルに配置されていません。
データURLを使用する利点は、追加情報を取得するためにサーバにHTTPリクエストを発行し、その後、余分な必要がないことです。
しかし、欠点は、ページのサイズが大きくなることです。これは、埋め込まれた小さな画像での使用に適している、大きな画像ファイルにはお勧めできませんが、使用するデータURLにエンコードされます。あなたの画像ファイルは、ブラウザのサイズの上限を超えることはできません、またはマップ読み取ることができない画像ファイルを。
次の例に1. readAsDataURL参照は、画像ファイルをお読みください。

Sign.Uploadxy = 関数（）
{
VaRのファイル= files.files [0 ];
もし（!! ファイル）{
 VAR qybsm = $（ "＃のqybsm" ）.val（）;
VaRの FR = 新しいFileReaderの（）;
fr.onloadend = 関数（）{
 VAR RES = fr.result; // 取得したファイルの内容
VARのparam = "{ 'qybsm'：「" + qybsm + " ' 'ファイル'：'" + + RES「 ''ファイル名'：' "+ file.name +"「} " ;
$アヤックス（{
タイプ：「ポスト」、
非同期：偽、
contentType： "アプリケーション/ JSON;のcharset = UTF-8" 、
データ：PARAM、
URL：XXX + "サービス/ XXXManageService.asmx / XXX" 、
データ型： 'JSON' 、
成功：関数（MSG）{
 VARのデータ= JSON.parse（msg.d）。
もし（data.code == "1" ）{
アラート（「成功！」）。
}
他の{
アラート（ '失敗しました！' + data.msg）。
}
}、
エラー：関数（E）{
アラート（「失敗"もう一度試してください！）。
}
}）;
}
fr.onerror = 関数（）{
アラート（「失敗"もう一度試してください！）。
}
fr.readAsDataURL（ファイル）; // Base64では、イベントは、彼らが読む前にトリガされません宣言する必要があります読ん
}
}

（Fr.readAsDataURL（ファイル））コンテンツ、ドキュメントのコンテンツは、バックグラウンド処理にコードしてファイルを読み取るfr.resultオブジェクトFileReaderのFRを介して送信することができます。

したがって、ファイルの内容はデータベースのフィールドに格納することができることに大きな内部に対応し、ファイル内容のバイト配列（Convert.FromBase64String（file.Substring（file.IndexOf（「」）+ 1）））に変換するためのコードと背景論文の保管。次のコードに示すように：

公共の 文字列 XXX（文字列 qybsm、文字列ファイル、文字列fileNameに）
{
辞書 < 文字列、文字列 >マップ= 新しい辞書< 文字列、文字列 > （）;
もし（文字列.IsNullOrEmpty（ファイル））
{
map.Add（" コード"、" 0 " ）。
map.Add（" MSG "、" 添付ファイルをアップロードしてください、空にすることはできません" ）;
 リターンJavaScriptConvert.SerializeObject（地図）。
}
CommonBusバス = 新しいCommonBus（）;

文字列 qyzx = " XXX " 。
int型 f_site_id = 0 ;

バイト [] =データConvert.FromBase64String（file.Substring（file.IndexOf（" "）+ 1））; // 過剰BASE64文字を削除

試します
{
BGDataService.BeginTransaction（）;
文字列のsql = @」XX秒への挿入
（sign_id、qybsm、qyzx、xysmj、f_site_id、xysmjmc）
値
（）（SYS_GUID、
0 @、
1 @、
2 @、
3 @、
4）@ " ;
BGDataService.Execute（SQL、qybsm、qyzx、データ、f_site_id、Path.GetFileNameWithoutExtension（filename）で）。
BGDataService.CompleteTransaction（）;
map.Add（" コード"、" 1 " ）。
map.Add（" MSG "、"" ）。
リターンJavaScriptConvert.SerializeObject（マップ）;
}
キャッチ（例外e）
{
BGDataService.AbortTransaction（）;
map.Add（" コード"、" 0 " ）。
map.Add（" MSG " 、e.Message）。
リターンJavaScriptConvert.SerializeObject（マップ）;
}
}

 

3.データベースファイルの成功が保存された後、あなたはファイルストリームのファイルを読み込むことで道を示すことができますが、readAsDataURL方法は、MIMEタイプが続いた後、データ列から始まるデータbase64エンコードを使用してエンコードして、BASE64で結合されます文字列、コンテンツの後のコンマは、符号化された画像ファイルがあります。
IMGは、画像ファイルを表示するために使用します。あなたがページに直接表示したい画像ファイルを読み出したい場合は、JavaScriptを経由して、<img>タグを作成し、DOMにsrc属性データURLは、次のコードにし、<img>タグを設定することができます下記：

Sign.look = 関数（タイプ）{
 VAR sign_id = $（ "＃1 sign_id" ）.val（）;
VaRのIMG;
VaRの送信= "{ 'sign_id'： '" + sign_id + "'}" 。
IMG = Global.GetServerDataJson（ "XXManage.XXManageData"、 "Qryxx"、センド、 "ビジネス"、ヌル、偽）;
VARのhtml = '<divのスタイル= "テキスト整列：センター;オーバーフロー：自動;幅：100％;高さ：100％"> <IMG SRC = "' + IMG + '" /> </ DIV>' ;
top.Dialog.open（{
タイトル：「ビューの添付ファイル」、
innerHTMLプロパティ：HTML、
幅： 1000年、
身長： 670
}）;

}

 

バックグラウンドの方法を読み取ることによって、次のようにバックグラウンド処理方法であって、バイト配列JS表示を返します。

公共の 文字列 QryZzjgdmfj（文字列qybsm）
{
試します
{
ストリング STRSQL = ストリング .Format（" x.bsm=@0 XX Xから選択x.FILE_YYZZのtempimg、 '' IMG " ）。

DataTableのページ = BGDataService.Query4DataTable（STRSQL、qybsm）。
DataTableのqyfjDt = ページ。
以下のために（int型私は= 0 ; I <qyfjDt.Rows.Countを; I ++ ）
{
バイト [] CONT = NULL ;
もし（qyfjDt.Rows [I] [ " tempimg " ] .ToString（）。長さ> 0 ）
CONT =（バイト []）qyfjDt.Rows [I] [ " tempimg " ]。
もし（続き！= nullの && cont.Length> 0 ）
{
qyfjDt.Rows [I] [ " IMG " ] = " データ：画像/ JPEG、BASE64、" + Convert.ToBase64String（続き）。
}
}
qyfjDt.Columns.Remove（" tempimg " ）;
ストリング strJson = qyfjDt.Rows [ 0 ] [ " IMG " ] .ToString（）;
返すstrJsonを。
}
キャッチ（例外の例）
{

スローEXを。
}
}

以上の工程を経て、これアップロードおよびプレビューファイルを完了する。

 

ファイルの一部を読みます

時には、あなたはファイルを読みたい読み込むには大きすぎる、セグメント化された希望であり、またはちょうどあなたがあなたが以下の方法を使用することができ、ブラウザによっては、ファイルをカットすることができ、ファイルセクションの内容を読みたい：
webkitSliceを：クロム等、Webkitのブラウザエンジンをサポートするために適用。
mozSlice：Firefoxのに適しています。
これらの2つの方法のバイトインデックスは、最初に渡されると、バイトインデックスを終了し、インデックスは0から始まります。readAsBinaryString方法FileReaderのオブジェクトに次のサンプルプログラムは、ファイルを読み取るために、ファイルは第六のバイトにのみ第三のバイトを読み出す読出されます。

<！DOCTYPE HTML>
<HTMLのxmlns = "http://www.w3.org/1999/xhtml">
<ヘッド>
<タイトル> </ TITLE>
ます。<script type = "text / javascriptの">
関数ProcessFile（E）{
 VARのファイル=のdocument.getElementById（ 'ファイル'）.files [0 ]。
もし（ファイル）{
 VARのリーダー= 新しいFileReaderの（）。
reader.onload = 関数（イベント）{
 VAR TXT = event.target.result。
document.getElementById（ "結果"）.innerHTML = TXT。
}。
}
もし（file.webkitSlice）{
 VARブロブ= file.webkitSlice（2、4 ）;
} そう であれば（file.mozSlice）{
 VARブロブ= file.mozSlice（2、4 ）;
}
（BLOB）reader.readAsBinaryString。
}
機能contentLoaded（）{
document.getElementById（ 'ファイル'）.addEventListener（[変更] 、
ProcessFile、偽の）;
}
window.addEventListener（ "DOMContentLoaded"、contentLoaded、偽）;
</ SCRIPT>
</ head>の
<身体>
<input type = "ファイル" ID = "ファイル" NAME = "ファイル" />
<DIV ID = "結果"> </ div>
</ BODY>
</ HTML>

 

ご注意：

サポートの5程度が異なるために異なるHTMLブラウザは、上記のコードは正常にChromeで実行され、そうでは正しく他のブラウザで実行されます。