Maison > interface Web > js tutoriel > le corps du texte

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

小云云
Libérer: 2018-01-17 13:42:29
original
1428 Les gens l'ont consulté

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>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!