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中文網其他相關文章！