序文
本日は、「ウェブサイトのディレクトリフォルダにアップロード、プレビュー、保存された写真」についてお伝えします。
a）同期送信（ページレベルの送信）
フロントエンドコード
（1）フォームを介して; input type = "file"タグタイプはファイルです
<form id="form1" runat="server">
<div>
<input type="file" name="file" />
<input type="submit" value="上传" />
</div>
</form>
（2）ページ上のフォーム全体をサーバーに送信し、ページを更新します。
（3）ファイルが含まれている場合、ファイルはバイトストリームとしてパッケージ化され、サーバーにアップロードされます。
（4）バックエンドのRequestオブジェクトを使用してフォームを取得します。要素inputタグ;リクエスト[「ファイル」];キーここでの値は名前の値の入力タグ。ここで注意してください！（5）今回は画像ファイルのパスを取得するのは絶対パスです
バックエンドコード
string filePath = Request["file"];
if (filePath == null) return;
string filename = filePath.Substring(filePath.LastIndexOf("\\") + 1);
string fileEx = filePath.Substring(filePath.LastIndexOf(".") + 1);
string paths = filename.Substring(0, filename.IndexOf("."));
//合成站点下的站点下的images目录文件
string serverpath = Server.MapPath(@"~\images\") + filename;
//实例化并获取客户端上传的文件对象
System.Drawing.Image image = System.Drawing.Image.FromFile(filePath);
//保存图片至站点下的images目录文件
image.Save(serverpath);
image.Dispose();
（6）文字列傍受方法を使用します。ファイルの名前を取得します（サフィックスを含む）====> string filename = filePath.Substring（filePath.LastIndexOf（ "\"）+ 1）;
（7）文字列インターセプトメソッドを使用します。ファイル拡張子を取得====> string fileEx = filePath.Substring（filePath.LastIndexOf（ "。"）+ 1）;
（8）文字列インターセプトメソッドを使用します。ファイルの名前を取得します（サフィックスは含まれません）====>文字列パス= filename.Substring（0、filename.IndexOf（ "。"））;
b）非同期アップロード（ajax経由で送信）
（1）通常、webapiにアクセスするときは、JSON形式のデータ送信方法を使用してデータをアップロードします。
（2）特別な状況で、ファイルをアップロードする場合は、FormDataオブジェクトを使用してフォームの送信をシミュレートします。
（3）JS FormDataオブジェクトは、フォームを同期的に送信するようにデータを送信します。その後、ファイルをFormDataに含めて、一緒に送信できます。
フロントエンド
jsコード
var form = new FormData();
form.append("file", $('#file')[0].files[0]);
$.ajax({
url: "/pages/WebAPI",
method: "post",
contentType: false,
processData: false,
dataType: false,
data: form,
success: function (result) {
//上传成功回调函数
}
});
（4）FormDataの使用
var form = new FormData（）;
formdataにデータを追加します;パラメーターはデータ名とデータ値の形式です;
form.append（ 'name'、value）;フォームデータ
にファイルを追加します;パラメーターはnameですそしてファイルオブジェクト;ここでの名前は実用的な効果はありません;しかしそれはファイル
form.append（ 'file'、fileObj）;
（5）の形式でなければなりませんこのステートメント
form.append（ "file"、$（ '＃ファイル'）[0] .files [0]）;で
$（' ＃ファイル＃ファイル'） '）[0] .files [0]、なぜ$（に[0]を追加しますか'？
このステートメントは、idがfileタグであるファイルオブジェクトを取得することを意味し、[0]を追加すると、JQ構文がJavascript構文に変換されます
。1）JQueryでは-var fileObj = $（ '＃file'）[0]。 files [0];
2）JavaScriptの場合-varfileObj = document.getElementById（ 'file'）。files [0];
したがって、.files [0]属性はjavascriptにあるため、JQをJSに変換する必要があります。
>使用异步上传的注意点
（6）FormDataオブジェクトを使用してデータをアップロードする場合、getメソッドは許可されません。
（7）FormDataオブジェクトを使用してファイルを含むデータをアップロードする場合、$。
post （）を直接使用することは無効です。（8）FormDataオブジェクトを使用してファイルを含むデータをアップロードする場合、$。ajax（）メソッドを使用する必要があります
（9）送信メソッドはpostである必要があります。
$.ajax({
url: '',
method: 'post', //由于jq的版本问题，这个参数在有的地方也叫做type
dataType: 'json',
contentType: false, //必须是false
processData: false, //必须是false
success: function(){
}
})
画像プレビュー
写真のプレビューが必要な場合は、はるかに簡単です
var file = $('#file')[0].files[0];
if (file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function (even) {
$('#file_img').attr("src", even.currentTarget.result);
}
}
バックエンドコード
private string SaveImage()
{
string result = "";
if (!Directory.Exists(Server.MapPath("/images/Userimg")))
{
Directory.CreateDirectory(Server.MapPath("/images/Userimg"));
}
HttpPostedFile file = Request.Files[0];
if (!file.ContentType.Contains("image/"))
{
result = Newtonsoft.Json.JsonConvert.SerializeObject(new
{
Code = 10002,
Message = "传输文件格式不正确!"
});
}else{
Random ran = new Random();
String fileName ="img"+ran.Next(1000,9999).ToString();
String filesuffix = this.GetFileSuffix(file.ContentType);
String fullName = Path.Combine("/images/Userimg/", fileName + filesuffix);
file.SaveAs(Server.MapPath(fullName));
result = Newtonsoft.Json.JsonConvert.SerializeObject(new
{
Code = 10002,
Message = "传输文件格式不正确!"
});
}
return result;
}
/// <summary>
/// 获取图片文件的 扩展名
/// </summary>
/// <param name="mimeType"></param>
/// <returns></returns>
private string GetFileSuffix(string mimeType)
{
string suffix = string.Empty;
switch (mimeType)
{
case "image/png":
suffix = ".png";
break;
case "image/jpeg":
suffix = ".jpg";
break;
case "image/gif":
suffix = ".gif";
break;
default:
suffix = ".jpg";
break;
}
return suffix;
}
（1）アップロードするファイルのパスが存在するかどうかを確認し、存在しない場合は作成します。
（2）クライアントによってアップロードされたファイルコレクションをマルチパートMIME形式で取得します。つまり、HttpPostedFile file = Request.Files [0];
（3）現在のファイルオブジェクトのタイプを解釈します
（4）同じファイルを複数回アップロードできることを認識します。不要なエラーを回避するには、ランダムな4桁の番号を付けて、名前を変更します
（5）HttpPostedFileは、直接保存オブジェクト[SaveAs（）]を提供でき、保存ファイルアドレスのパラメーターを提供するだけです。
塗布効果
その小さなプロジェクトは通常、ファイルをサイトディレクトリファイルに保存します。なぜ一体なのですか？
a）アクセスディレクトリの正確性を
確認しますb）ファイルのアクセス可能性を確認します（最も重要な理由）
c）プロジェクトがリリースされたとき、ファイルにアクセスするユーザーはIIS_USERであり、他のディレクトリにある場合はアクセス権限がありません。
やっと
さて、今日の研究と仕上げは終わりました。欠陥を指摘し、批判を誠実に受け入れることを歓迎します。