Maison >interface Web >js tutoriel >Explication détaillée du plug-in jQuery ajaxupload pour télécharger des fichiers sans actualisation

Explication détaillée du plug-in jQuery ajaxupload pour télécharger des fichiers sans actualisation

小云云
小云云original
2018-01-17 13:42:291531parcourir

AJAX est souvent utilisé pour télécharger des images sans actualiser le projet, mais le téléchargement d'iframe et le plug-in flash sont relativement compliqués, j'ai donc trouvé un plug-in jquery. Ce qui suit est un exemple de code pour vous présenter comment utiliser le plug-in jQuery ajaxupload pour réaliser la fonction de téléchargement de fichiers sans actualiser. Les amis qui en ont besoin peuvent s'y référer. J'espère qu'il pourra vous aider.

Le code est le suivant

La méthode d'utilisation est la suivante

<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>

Recommandations associées :

Exemple détaillé de Implémentation ajax du téléchargement de fichiers sans actualisation

Plug-in de téléchargement d'image sans actualisation jQuery

La fonction d'aperçu d'image JavaScript réalise un téléchargement sans actualisation

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn