jQuery プラグインを使用して、更新せずにファイルをアップロードするためのコードを共有する

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

AJAX による更新せずに画像をアップロードする方法はプロジェクトでよく使用されますが、iframe アップロードとflash プラグインは比較的複雑なので、jquery プラグインを見つけました。

コードは以下の通りです

使い方は以下の通りです

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

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