Utilisez le plug-in jQuery pour partager le code permettant de télécharger des fichiers sans actualiser

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 actualisation. Les amis qui en ont besoin peuvent s'y référer

Le téléchargement d'images AJAX sans actualisation est fréquent. utilisé dans les projets, mais le téléchargement iframe et les plug-ins flash sont tous les deux C'était assez compliqué, alors j'ai trouvé un plug-in jquery.

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>

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!