Detaillierte Erläuterung des jQuery-Ajaxupload-Plug-Ins zum Hochladen von Dateien ohne Aktualisierung

AJAX wird häufig zum Hochladen von Bildern ohne Aktualisierung im Projekt verwendet, aber das Hochladen von IFrames und das Flash-Plug-In sind relativ kompliziert, daher habe ich ein JQuery-Plug-In gefunden. Im Folgenden finden Sie einen Beispielcode, der Ihnen zeigt, wie Sie mit dem jQuery-Ajaxupload-Plugin die Funktion zum Hochladen von Dateien ohne Aktualisierung erreichen können. Ich hoffe, es kann Ihnen helfen.

Der Code lautet wie folgt

Die Verwendungsmethode lautet wie folgt

<script type="text/javascript">
$(function () {
var button = $(&#39;#upload&#39;);
new AjaxUpload(button, {
action: &#39;/upload/imagesAjaxUpload&#39;,
name: &#39;upload&#39;,
onSubmit: function (file, ext) {
if (!(ext && /^(jpg|jpeg|JPG|JPEG)$/.test(ext))) {
alert(&#39;图片格式不正确,请选择 jpg 格式的文件!&#39;, &#39;系统提示&#39;);
return false;
}
// change button text, when user selects file
button.text(&#39;上传中&#39;);
// If you want to allow uploading only 1 file at time,
// you can disable upload button
this.disable();
// Uploding -> Uploading. -> Uploading...
interval = window.setInterval(function () {
var text = button.text();
if (text.length < 10) {
button.text(text + &#39;...&#39;);
} else {
button.text(&#39;上传中&#39;);
}
}, 200);
},
onComplete: function (file, response) {
window.clearInterval(interval);
// enable upload button
this.enable();
var json = eval(&#39;(&#39; + response + &#39;)&#39;);
button.text(&#39;选择文件&#39;);
$(".qr").css("display","inline");
$(".qr>img").attr("src",json.file_name);
$("input[name=&#39;wechat_qr&#39;]").val(&#39;/uploads/qr/&#39;+json.file_name);
//alert(json.file_name);
//$("#ajaximg").html("<img src=&#39;/uploads/qr/"+json.file_name+"&#39; />");
//$("#wechat_qr").val(&#39;/uploads/qr/&#39;+json.file_name);
}
});
});
</script>

Verwandte Empfehlungen:

Beispiel für eine ausführliche Erklärung der Ajax-Implementierung des Hochladens von Dateien ohne Aktualisierung

jQuery-Plugin zum Hochladen von Bildern ohne Aktualisierung

JavaScript-Bildvorschaufunktion ermöglicht Hochladen ohne Aktualisierung

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des jQuery-Ajaxupload-Plug-Ins zum Hochladen von Dateien ohne Aktualisierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!