使用jQuery ajaxupload插件實現(xiàn)無刷新上傳文件

更新時間：2017年04月23日 13:57:56 投稿：mrr

項目中會經(jīng)常用到AJAX無刷新上傳圖片，但是iframe上傳和flash插件都是比較復雜的，所以就找了一個jquery的插件。下面通過實例代碼給大家介紹使用jQuery ajaxupload插件實現(xiàn)無刷新上傳文件功能，需要的朋友參考下吧

項目中會經(jīng)常用到AJAX無刷新上傳圖片，但是iframe上傳和flash插件都是比較復雜的，所以就找了一個jquery的插件。

代碼如下

使用方法如下

<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 格式的文件!', '系統(tǒng)提示');
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>

以上所述是小編給大家介紹的使用jQuery ajaxupload插件實現(xiàn)無刷新上傳文件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: