Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接、图片或其它元素取代传统的file表单上传效果,可实现Ajax动态提示文件上传 过程,同时支持多文件上传,AjaxFileUpload文件上传插件功能比较稳定,目前应用也比较多,简单使用实例如下:
查看AjaxFileUpload相关jQuery官方文档介绍
下载AjaxFileUpload JS库文件
查看AjaxFileUpload演示
一,创建一个ajax upload按钮元素(button),可以是任意元素(链接、图片等),如下:
<div id="upload_button">上传</div>
二,创建一个ajax upload上传实例,如下:
new AjaxUpload('upload_button_id', {action: 'upload.php'});
其中upload_button_id表示第一步创建的元素ID,upload.php表示处理上传文件的PHP文件。
配置ajax upload
new AjaxUpload('#upload_button_id', {
action: 'upload.php',
name: 'userfile',
data: {
example_key1 : 'example_value',
example_key2 : 'example_value2'
},
autoSubmit: true,
onChange: function(file, extension){},
onSubmit: function(file, extension) {},
onComplete: function(file, response) {}
});
1,action表示处理上传文件的PHP文件
2,name表示上传文件name,与<input type="file" name="upload" />其中的upload
3,data表示额外的参数
4,autoSubmit表示是否自动提交
5,onChange表示触发change事件调用函数,其中extension表示文件后缀
6,onSubmit表示触发提交事件调用函数
7,onComplete表示文件上传成功事件调用函数
jQuery插件AjaxFileUpload文件上传实例代码一
实现ajax动态文字提示上传状态功能,分别触发onSubmit和onComplete事件
var button = $('#button1'), interval;
new Ajax_upload(button,{
action: 'upload-test.php',
name: 'myfile',
onSubmit : function(file, ext){
button.text('Uploading');
this.disable();
interval = window.setInterval(function(){
var text = button.text();
if (text.length < 13){
button.text(text + '.');
} else {
button.text('Uploading');
}
}, 200);
},
onComplete: function(file, response){
button.text('Upload');
window.clearInterval(interval);
this.enable();
$('<li></li>').appendTo('#example1 .files').text(file);
}
});
jQuery插件AjaxFileUpload文件上传实例代码二
实现文件后缀格式检查功能,如:(ext && /^(jpg|png|jpeg|gif)$/.test(ext))
new Ajax_upload('#button2', {
action: 'upload.htm',
data : {
'key1' : "This data won't",
'key2' : "be send because",
'key3' : "we will overwrite it"
},
onSubmit : function(file , ext){
if (ext && /^(jpg|png|jpeg|gif)$/.test(ext)){
this.set_data({
'key': 'This string will be send with the file'
});
$('#example2 .text').text('Uploading ' + file);
} else {
$('#example2 .text').text('Error: only images are allowed');
return false;
}
},
onComplete : function(file){
$('#example2 .text').text('Uploaded ' + file);
}
});
jQuery插件AjaxFileUpload文件上传实例代码三
最基础的多文件AjaxFileUpload上传功能
new Ajax_upload('#button3', {
action: 'upload.htm',
name: 'myfile',
onComplete : function(file){
$('<li></li>').appendTo($('#example3 .files')).text(file);
}
});
使用jQuery插件AjaxFileUpload文件上传功能非常强大,内置函数定义的事件和交互比较多,大家可看看上面三个实例的演示,实现Javascript多文件上传功能,值得推荐。
分享到:
相关推荐
jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单,接下来写个demo演示怎么用AjaxFileUpload插件实现文件上传。 1、引入AjaxFileUpload插件相关的js 复制代码 代码如下:[removed]resources/js/...
jquery ajaxfileupload上传插件,用于ajax的异步文件上传
jquery+ajaxfileupload+html文件上传,用ajaxfileupload插件做的上传文件
主要介绍了jQuery插件ajaxfileupload.js实现上传文件的相关资料,感兴趣的小伙伴们可以参考一下
jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单,接下来写个demo演示怎么用AjaxFileUpload插件实现文件上传。
主要介绍了一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子,需要的朋友可以参考下
ajaxFileUpload插件是一个非常简单的基于Jquery的异步上传文件的插件,使用过程中发现很多与这个同名的,基于原始版本基础之上修改过的插件,文件版本比较多,我把我自己使用的ajaxFileUpload文件上传到博客园上了,...
主要介绍了jQuery插件ajaxFileUpload异步上传文件的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单,接下来我们来看下用AjaxFileUpload插件实现文件上传的方法,有需要的小伙伴可以参考下
文件上传几乎是每个项目所必须的,这里介绍Asp.net MVC结合Jquery ajaxfileupload实现文件上传,兼容主流浏览器
主要介绍了PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例,感兴趣的小伙伴们可以参考一下
jQuery.AjaxFileUpload.js, jQuery插件神奇地让文件输入通过ajax上传 这个插件上传文件 somehwere,并将响应传递给回调,无其他。它不依赖于特定的HTML,只需给它一个 <input type="file">它不要求你的服务器...
对handleError错误,json返回值已修改,支持批量文件上传
使用Jquery做上传文件处理时,用到了ajaxfileupload.js 这个第三方代码,但是这个js几乎就是半成品,问题很多。现在整理如下并附修复版的ajaxfileupload.js下载。 问题: 1:无法带参数提交,只能上传文件; 2:...
ajaxfileupload多文件上传,ajaxfileupload多文件上传,ajaxfileupload多文件上传,ajaxfileupload多文件上传
NULL 博文链接:https://aokunsang.iteye.com/blog/1014274
通过ajaxfileupload实现JS的文件上传