ファイルを更新せずにアップロードするjQuery ajaxuploadプラグインの詳細説明

プロジェクト内で画像を更新せずにアップロードするにはAJAXがよく使われますが、iframeアップロードやFlashプラグインは比較的複雑なので、jqueryプラグインを見つけました。以下は、jQuery ajaxupload プラグインを使用して、更新せずにファイルをアップロードする機能を実現する方法を紹介するサンプルコードです。必要な方は参考にしていただければ幸いです。

コードは以下の通りです

使用方法は以下の通りです

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

関連する推奨事項:

リフレッシュなしでファイルをアップロードする機能を実装するためのajaxのサンプル詳細説明

jQueryはリフレッシュプラグなしで画像をアップロードします

更新せずにアップロードを実現するJavaScriptプレビュー画像関数

以上がファイルを更新せずにアップロードするjQuery ajaxuploadプラグインの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。