Maison >interface Web >js tutoriel >Explication détaillée du plug-in jQuery ajaxupload pour télécharger des fichiers sans actualisation
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 = $('#upload'); new AjaxUpload(button, { action: '/upload/imagesAjaxUpload', name: 'upload', onSubmit: function (file, ext) { if (!(ext && /^(jpg|jpeg|JPG|JPEG)$/.test(ext))) { alert('图片格式不正确,请选择 jpg 格式的文件!', '系统提示'); return false; } // change button text, when user selects file button.text('上传中'); // 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 + '...'); } else { button.text('上传中'); } }, 200); }, onComplete: function (file, response) { window.clearInterval(interval); // enable upload button this.enable(); var json = eval('(' + response + ')'); button.text('选择文件'); $(".qr").css("display","inline"); $(".qr>img").attr("src",json.file_name); $("input[name='wechat_qr']").val('/uploads/qr/'+json.file_name); //alert(json.file_name); //$("#ajaximg").html("<img src='/uploads/qr/"+json.file_name+"' />"); //$("#wechat_qr").val('/uploads/qr/'+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!