欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

使用jQuery ajaxupload插件实现无刷新上传文件

程序员文章站 2023-08-21 10:12:34
项目中会经常用到ajax无刷新上传图片,但是iframe上传和flash插件都是比较复杂的,所以就找了一个jquery的插件。 代码如下 使用方法如下 <...

项目中会经常用到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 格式的文件!', '系统提示');
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插件实现无刷新上传文件,希望对大家有所帮助