Verwendung des jQuery.form-Plug-Ins und der domänenübergreifenden asynchronen Datei upload_jquery

Lass es mich zuerst erklären

Für diese domänenübergreifende asynchrone Upload-Funktion verwenden wir das Jquery.form-Plug-in, das in asynchronen Formularen sehr effektiv ist. Für domänenübergreifende Zwecke fügen wir dem HTTP-Antwortheader die Zugriffskontroll-Zulassungsmethode hinzu . Dieses Header-Tag wird natürlich nur von IE10, Firefox und Google unterstützt. Für Browser unter IE10 müssen wir unsere Denkweise ändern. Lassen Sie den Server unseren Client neu schreiben (dieselbe Domain wie die Datei-Upload-Seite), um relevante Daten zurückzugeben.

Dinge noch einmal machen

1 Verwendung von 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();
}

Beachten Sie, dass sich die eventStart-Methode im Code auf das automatische Senden des Formulars nach Auswahl der Datei bezieht, während ajaxForm angibt, dass das Senden des Formulars eine Ausnahme ist, und die Erfolgsrückrufmethode sich auf den Rückgabewert der asynchronen Rückgabeformularadresse bezieht.

2 Erste Implementierung von Cross-Domain

Um den Domänenzugriff zu lösen, können wir Access-Control-Allow-Origin und Access-Control-Allow-Methods zum Antwortheader des Servers hinzufügen. Diese Funktionen werden von Browsern unter IE10 nicht unterstützt deprimierend.

/// <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);
}
}

Beachten Sie, dass in einer Produktionsumgebung unser Access-Control-Allow-Origin einen legalen Domänennamen angeben sollte. * bedeutet, dass alle Websites für den Zugriff geöffnet sind, was gefährlich ist.

3 Lösen Sie das Problem, dass IE10 und niedrigere Domänen nicht domänenübergreifend sein können

Zum IE-Browser kann ich wirklich nichts sagen, aber zum IE kann ich nur NEIN sagen. Schauen wir uns den IE an Implementierung des domänenübergreifenden Hochladens zuerst. Der Client gibt die Daten nicht direkt zurück, sondern schreibt die Rückrufadresse an den Client zurück, und der Rückruf gibt die endgültigen Daten über eine AjaxForm-Methode zurück

Dies löst das direkte domänenübergreifende Problem.

/// <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);
}

Manchmal, wenn wir über eine Lösung für ein Problem nachdenken und es uns nicht gelingt, einen Weg zu gehen, können wir unsere Denkweise ändern und möglicherweise unerwartete Gewinne erzielen!

Jemand fragte, ob es möglich sei, POST zum Übertragen von Daten zwischen dem Server und dem Client zu verwenden. Der Onkel sagte: Nein, denn nachdem der POST an den Client übermittelt wurde, verarbeitet der Client ihn und gibt das Ergebnis dann an den Dienst zurück . Ende, und schließlich gibt der Server das Ergebnis an Ajaxform zurück. Dies ist wieder das domänenübergreifende Problem am Anfang, haha!

Das Obige ist der relevante Inhalt, der vom Herausgeber eingeführt wurde, um den domänenübergreifenden asynchronen Datei-Upload von jQuery basierend auf dem jQuery.form-Plug-in zu implementieren. Ich hoffe, dass er für alle hilfreich ist!