jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能-阿里云开发者社区

开发者社区> 开发与运维> 正文

jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能

简介: 引用:http://cgxcn.blog.163.com/blog/static/1323124220095472652900/ Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接、图片或其它元素取代传统的file表单上传效果,可实现Ajax动态提...

引用:http://cgxcn.blog.163.com/blog/static/1323124220095472652900/

Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接、图片或其它元素取代传统的file表单上传效果,可实现Ajax动态提示文件上传过程,同时支持多文件上传,AjaxFileUpload文件上传插件功能比较稳定,目前应用也比较多,简单使用实例如下:

查看AjaxFileUpload相关jQuery官方文档介绍

下载AjaxFileUpload JS库文件

查看AjaxFileUpload演示

一,创建一个ajax upload按钮元素(button),可以是任意元素(链接、图片等),如下:

  1. <div id="upload_button">上传</div>

二,创建一个ajax upload上传实例,如下:

  1. new AjaxUpload('upload_button_id', {action: 'upload.php'});

其中upload_button_id表示第一步创建的元素ID,upload.php表示处理上传文件的PHP文件。

配置ajax upload

  1. new AjaxUpload('#upload_button_id', {
  2. action: 'upload.php',
  3. name: 'userfile',
  4. data: {
  5. example_key1 : 'example_value',
  6. example_key2 : 'example_value2'
  7. },
  8. autoSubmit: true,
  9. onChange: function(file, extension){},
  10. onSubmit: function(file, extension) {},
  11. onComplete: function(file, response) {}
  12. });

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

  1. var button = $('#button1'), interval;
  2. new Ajax_upload(button,{
  3. action: 'upload-test.php',
  4. name: 'myfile',
  5. onSubmit : function(file, ext){
  6. button.text('Uploading');
  7. this.disable();
  8. interval = window.setInterval(function(){
  9. var text = button.text();
  10. if (text.length < 13){
  11. button.text(text + '.');
  12. } else {
  13. button.text('Uploading');
  14. }
  15. }, 200);
  16. },
  17. onComplete: function(file, response){
  18. button.text('Upload');
  19. window.clearInterval(interval);
  20. this.enable();
  21. $('<li></li>').appendTo('#example1 .files').text(file);
  22. }
  23. });

jQuery插件AjaxFileUpload文件上传实例代码二
实现文件后缀格式检查功能,如:(ext && /^(jpg|png|jpeg|gif)$/.test(ext))

  1. new Ajax_upload('#button2', {
  2. action: 'upload.htm',
  3. data : {
  4. 'key1' : "This data won't",
  5. 'key2' : "be send because",
  6. 'key3' : "we will overwrite it"
  7. },
  8. onSubmit : function(file , ext){
  9. if (ext && /^(jpg|png|jpeg|gif)$/.test(ext)){
  10. this.set_data({
  11. 'key': 'This string will be send with the file'
  12. });
  13. $('#example2 .text').text('Uploading ' + file);
  14. } else {
  15. $('#example2 .text').text('Error: only images are allowed');
  16. return false;
  17. }
  18. },
  19. onComplete : function(file){
  20. $('#example2 .text').text('Uploaded ' + file);
  21. }
  22. });

jQuery插件AjaxFileUpload文件上传实例代码三
最基础的多文件AjaxFileUpload上传功能

  1. new Ajax_upload('#button3', {
  2. action: 'upload.htm',
  3. name: 'myfile',
  4. onComplete : function(file){
  5. $('<li></li>').appendTo($('#example3 .files')).text(file);
  6. }
  7. });

使用jQuery插件AjaxFileUpload文件上传功能非常强大,内置函数定义的事件和交互比较多,大家可看看上面三个实例的演示,实现Javascript多文件上传功能,值得推荐。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章