jQuery.formプラグインとクロスドメイン非同期ファイルupload_jqueryの使用

まず説明しましょう

このクロスドメインの非同期アップロード機能では、非同期フォームで非常に効果的な Jquery.form プラグインを使用し、HTTP 応答ヘッダーに access-control-allow-method を追加します。もちろん、このヘッダー タグは IE10、Firefox、Google のみでサポートされています。IE10 より前のブラウザでは、この方法を使用することができず、サーバーがクライアントに書き換える必要があります。ファイルアップロードページと同じドメイン）を使用して、関連データを返します。

もう一度やり直す

1 Jquery.form の使用

<form method="post" action="http://127.0.0.1:801/Home/UploadResult" enctype="multipart/form-data" id="form1">
<input name="qdctvfile" id="qdctvfile11" type="file" onchange="eventStart()">
</form>
<script type="text/javascript">
$("#form1").ajaxForm({
beforeSerialize: function () {
var filepath = $("#qdctvfile11").val()
var extStart = filepath.lastIndexOf(".");
var ext = filepath.substring(extStart, filepath.length).toUpperCase();
if (ext != ".PNG" && ext != ".JPG") {
alert("图片仅支持png,jpg格式");
$("#qdctvfile11").val("");
return false;
}
},
success: function (data) {
alert(data);
}
});
function eventStart(obj) {
$("#form1").submit();
}

コード内のeventStartメソッドは、ファイルの選択後にフォームを自動的に送信することを指しますが、ajaxFormはフォームの送信が例外であることを示し、successコールバックメソッドは非同期返信フォームアドレスの戻り値を参照することに注意してください。

2 クロスドメインの初期実装

ドメイン アクセスを解決するには、サーバーの応答ヘッダーに Access-Control-Allow-Origin と Access-Control-Allow-Methods を追加します。これらの機能は IE10 より前のブラウザではサポートされていません。これは非常に困難です。憂鬱な。

/// <summary>
/// MVC模式下跨域访问
/// </summary>
public class MvcCorsAttribute : ActionFilterAttribute
{
public override void OnActionExecuting(ActionExecutingContext filterContext)
{
Dictionary<string, string> headers = new Dictionary<string, string>();
headers.Add("Access-Control-Allow-Origin", "*");
headers.Add("Access-Control-Allow-Methods", "*");
foreach (var item in headers.Keys)
{
filterContext.RequestContext.HttpContext.Response.Headers.Add(item, headers[item]);
}
base.OnActionExecuting(filterContext);
}
}

運用環境では、Access-Control-Allow-Origin で正当なドメイン名を指定する必要があることに注意してください。* はすべての Web サイトがアクセス可能であることを意味し、これは危険です。

3 IE10以下でドメインを越えられない問題を解決

私は IE ブラウザについては何も言えません。私は Microsoft の製品がとても好きですが、IE についてはあまり話したくないのです。解決策のアイデア: クライアントはデータを直接返すのではなく、コールバック アドレスをクライアントに書き換え、コールバックは This

メソッドを通じて最終データを返します。

これにより、直接的なクロスドメインの問題が解決されます。

/// <summary>
/// 第三方的服务端
/// </summary>
/// <param name="name"></param>
/// <returns></returns>
[HttpPost]
public ActionResult UploadResult()
{
string data = "{'code':'OK','thumpImgUrl':'http://127.0.0.1/images/1.jpg'}";
return Redirect("http://localhost:9497/Home/UploadCallback&#63;data=" + data);
}
/// <summary>
/// 可能是服务端来调用它
/// </summary>
/// <returns></returns>
public ActionResult UploadCallback(string data)
{
return Content(data);
}

問題の解決策を考えるときに、1 つの道を通れない場合は、考え方を変えることができ、予期せぬ利益が得られることがあります。

誰かが、POST を使用してサーバーとクライアントの間でデータを転送できるかどうか尋ねました。おじさんは、「いいえ、POST がクライアントに送信された後、クライアントはそれを処理して結果をサービスに返すからです」と言いました。 . 最後に、サーバーは結果を ajaxform に返します。これは最初のクロスドメインの問題に戻ります。

上記は、jQuery.form プラグインに基づいて jQuery クロスドメイン非同期ファイル アップロードを実装するためにエディターが紹介した関連コンテンツです。皆様のお役に立てれば幸いです。