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文件上传实现Javascript多文件上传功能的更多相关文章

  1. 【转】JQuery插件ajaxFileUpload 异步上传文件(PHP版)

    前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现a ...

  2. jQuery插件AjaxFileUpload实现ajax文件上传

    转自:http://www.cnblogs.com/linjiqin/p/3530848.html jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单,接下来写个 ...

  3. JQuery插件ajaxFileUpload 异步上传文件(PHP版)

    太久没写博客了,真的是太忙了.善于总结,进步才会更快啊.不多说,直接进入主题. 前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错 ...

  4. jQuery插件AjaxFileUpload实现ajax文件上传时老是运行error方法 问题原因

    今天在用jQuery插件AjaxFileUpload实现ajax文件上传时,遇到一个问题,如图: 老是运行error.无法运行succes方法,追踪ajaxfileupload.js源代码发现: wa ...

  5. JQuery插件ajaxFileUpload 异步上传文件

    一.先对ajaxFileUpload插件的语法参数进行讲解 原理:ajaxfileupload是通过监听iframe的onload方法来实现, 当从服务端处理完成后,就触发iframe的onload事 ...

  6. 使用jquery插件ajaxfileupload一次上传多个文件,示例

    @{ ViewBag.Title = "Index"; Layout = ""; } <!DOCTYPE html PUBLIC "-//W3C ...

  7. jquery插件--ajaxfileupload.js上传文件原理分析

    英文注解应该是原作者写的吧~说实话,有些if判断里的东西我也没太弄明白,但是大致思路还是OK的. jQuery.extend({ createUploadIframe: function (id, u ...

  8. jQuery插件AjaxFileUpload可以实现ajax文件上传

    http://blog.sina.com.cn/s/blog_55e42da60100ocvh.html

  9. JQ插件ajaxFileUpload、php实现图片,数据同时上传

    代码结构如下: 1.HTML代码,没必要解释了. <!DOCTYPE html> <html> <head> <meta charset="UTF- ...

随机推荐

  1. if-case-循环语句

    IF语句 drop procedure if exists p_hello_world; create procedure p_hello_world(in v_id int) begin ) the ...

  2. Go 语言基础语法

    Go 标记 Go 程序可以由多个标记组成,可以是关键字,标识符,常量,字符串,符号.如以下 GO 语句由 6 个标记组成: fmt.Println("Hello, World!") ...

  3. Python3 元组

    Python 的元组与列表类似,不同之处在于元组的元素不能修改. 元组使用小括号,列表使用方括号. 元组创建很简单,只需要在括号中添加元素,并使用逗号隔开即可. 如下实例: tup1 = ('Goog ...

  4. C#基础拾遗系列之二:C#7.0新增功能点

    第一部分: C#是一种通用的,类型安全的,面向对象的编程语言.有如下特点: (1)面向对象:c# 是面向对象的范例的一个丰富实现, 它包括封装.继承和多态性.C#面向对象的行为包括: 统一的类型系统 ...

  5. 安卓高级3 Android应用Design Support Library完全使用实例

    原作者:http://www.open-open.com/lib/view/open1433385856119.html 1 背景 上周一年一度的Google IO全球开发者大会刚刚结束,Google ...

  6. 学习TensorFlow,调用预训练好的网络(Alex, VGG, ResNet etc)

    视觉问题引入深度神经网络后,针对端对端的训练和预测网络,可以看是特征的表达和任务的决策问题(分类,回归等).当我们自己的训练数据量过小时,往往借助牛人已经预训练好的网络进行特征的提取,然后在后面加上自 ...

  7. Swift基础之两指拉动图片变大变小

    我们在使用APP的时候,有时会发现有些图片可以通过两指进行放大.缩小,今天就实现这样的一种效果,比较简单,不喜勿喷.... var imageVi:UIImageView! = nil    var ...

  8. SceneKit做一个旋转的地球效果

    SceneKit可以用寥寥几行帮你完成很多OpenGL复杂的3D设置代码,下面本猫就带大家完成一个旋转的3D地球的场景. 首先需要地球表面图片,将其导入到Xcode中: 我们用SceneKit内置的几 ...

  9. 源码推荐:移动端商城(微信小程序源代码) WebView离线缓存

    移动端商城(微信小程序源代码)(上传者:腾讯攻城师jack) 功能包括:商品橱窗,商品搜索,购物车,结账等功能. TableView嵌套webView自适应高度(上传者:linlinchen) tab ...

  10. JAVA面向对象-----封装

    我们日常使用的电脑主机,把cpu.内存.主板等等都封装到机箱里面去.假如没有机箱的话的出现什么问题,主机.主板全部都散落在一处,然后开机没有开机按钮,那么需要我们直接操作接跳线才能把电脑开启.这样子的 ...