jUploader 1.0 Demo

Download: jquery.jUploader-1.01.js 9.75kb

Download: jquery.jUploader-1.01.min.js 5.38kb

Download: jquery.jUploader-1.01-demo.rar 1.03mb

To upload a file, click on the button below. Supported in IE6+, FF3.6+, Chrome6+, Safari4+. More info go to www.kudystudio.com

全局设置:


// 全局配置(这样就不必每次初始化时都加上下面的设置)
$.jUploader.setDefaults({
cancelable: true, // 可取消上传
allowedExtensions: ['jpg', 'png', 'gif'], // 只允许上传图片
messages: {
upload: '上传',
cancel: '取消',
emptyFile: "{file} 为空,请选择一个文件.",
invalidExtension: "{file} 后缀名不合法. 只有 {extensions} 是允许的.",
onLeave: "文件正在上传,如果你现在离开,上传将会被取消。"
}
});

实例(一):


$.jUploader({
button: 'upload-button1', // 这里设置按钮id
action: 'upload.aspx?test_cancel=1', // 这里设置上传处理接口,这个加了参数test_cancel=1来测试取消 // 上传完成事件
onComplete: function (fileName, response) {
// response是json对象,格式可以按自己的意愿来定义,例子为: { success: true, fileUrl:'' }
if (response.success) {
$('#photo1').attr('src', response.fileUrl); // 这里说明一下,一般还会在图片附近加添一个hidden的input来存放这个上传后的文件路径(response.fileUrl),方便提交到服务器保存
} else {
alert('上传失败');
}
}
});
 

实例(二):


$.jUploader({
button: 'upload-button2', // 这里设置按钮id
action: 'upload.aspx?test_cancel=1', // 这里设置上传处理接口 // 开始上传事件
onUpload: function (fileName) {
$('#photo2').hide();
$('#loading2').show();
}, // 上传完成事件
onComplete: function (fileName, response) {
// response是json对象,格式可以按自己的意愿来定义,例子为: { success: true, fileUrl:'' }
if (response.success) {
$('#loading2').hide();
$('#photo2').attr('src', response.fileUrl).show();
} else {
$('#photo2').show();
$('#loading2').hide();
alert('上传失败');
}
}, // 取消上传事件
onCancel: function (fileName) {
$('#photo2').show();
$('#loading2').hide();
}
});
 

实例(三):


$.jUploader({
button: 'upload-button3', // 这里设置按钮id
action: 'upload.aspx?test_cancel=1', // 这里设置上传处理接口 // 开始上传事件
onUpload: function (fileName) {
$('#tip').text('正在上传 ' + fileName + ' ...');
}, // 上传完成事件
onComplete: function (fileName, response) {
// response是json对象,格式可以按自己的意愿来定义,例子为: { success: true, fileUrl:'' }
if (response.success) {
$('#photo3').attr('src', response.fileUrl);
$('#tip').text(fileName + ' 上传成功。');
} else {
$('#tip').text('上传失败');
}
}, // 取消上传事件
onCancel: function (fileName) {
$('#tip').text(fileName + ' 上传取消。');
}, // 系统信息显示(例如后缀名不合法)
showMessage: function (message) {
$('#tip').text(message);
}
});
  请选择文件

实例(四):


$.jUploader({
button: 'upload-button4', // 这里设置按钮id
action: 'upload.aspx?test_cancel=1', // 这里设置上传处理接口 // 开始上传事件
onUpload: function (fileName) {
jBox.tip('正在上传 ' + fileName + ' ...', 'loading');
}, // 上传完成事件
onComplete: function (fileName, response) {
// response是json对象,格式可以按自己的意愿来定义,例子为: { success: true, fileUrl:'' }
if (response.success) {
jBox.tip('上传成功', 'success');
$('#photo4').attr('src', response.fileUrl);
} else {
jBox.tip('上传失败', 'error');
}
}, // 系统信息显示(例如后缀名不合法)
showMessage: function (message) {
jBox.tip(message, 'error');
}, // 取消上传事件
onCancel: function (fileName) {
jBox.tip(fileName + ' 上传取消。', 'info');
}
});
 

参数说明:


$.jUploader = function (options); // 使用接口,options = $.jUploader.defaults ,请查看使用例子
$.jUploader.setDefaults = function (defaults); // 设置全局配置,请参考 $.jUploader.defaults $.jUploader.defaults = {
button: null, // 按钮对象或ID
action: 'upload.aspx', // 处理上传文件接口
allowedExtensions: [], // 允许上传的后缀数组例如:['jpg','gif'],默认为[]不做限制
cancelable: true, // 是否可取消上传 // events
onUpload: function (fileName) { }, // 开始上传事件,fileName为本地选择的文件名
onComplete: function (fileName, response) { }, // 完成上传事件,fileName为本地选择的文件名,response为服务器返回的json对象
onCancel: function (fileName) { }, // 取消上传事件,fileName为本地选择的文件名
// messages
messages: {
upload: 'Upload', // 上传按钮文字
cancel: 'Cancel', // 取消按钮文字
emptyFile: "{file} is empty, please select files again without it.", // 空文件时提示文字
invalidExtension: "{file} has invalid extension. Only {extensions} are allowed.", // 后缀不允许时提示文字
onLeave: "The files are being uploaded, if you leave now the upload will be cancelled." // 正在上传时用户要离开页面提示文字
},
showMessage: function (message) { // 显示文字,默认使用alert()
alert(message);
},
debug: false
};

文章出处:http://www.kudystudio.com/jUploader/index.html

JQuery上传控件 jUploader 使用的更多相关文章

  1. jquery上传控件个人使用

    转了一篇jquery的上传控件使用博文,但是,经过测试貌似不行,自己研究了一下,效果实现.记下,以后使用. 下载“Uploadify”,官方版本为php的,很多文件不需要,删除带.php的文件. &l ...

  2. jquery上传控件uploadify使用备忘

    我简单修改了js和样式,效果如下 使用起来也是超简单,将文件下载并解压到你网站目录下,然后 .在使用位置插入代码 ============================= <iframe wi ...

  3. jquery本地上传预览扩展(隐藏上传控件单击图片上传支持ie!!)

    我用到的原材料地址:http://www.cnblogs.com/leejersey/p/3660202.html 修改后: /// <reference path="../../Js ...

  4. jquery文件上传控件 Uploadify

    (转自 http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html) 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...

  5. 用jQuery File Upload做的上传控件demo,支持同页面多个上传按钮

    需求 有这么一个需求,一个form有多个文件要上传,但又不是传统的图片批量上传那种,是类似下图这种需求,一开始是用的swfupload做的上传,但是问题是如果有多个按钮的话,就要写很多重复的代码,于为 ...

  6. jquery文件上传控件 Uploadify 问题记录

    Uploadify v3.2.1 首先引用下面的文件 <!--上传控件 uploadify--> <script type="text/javascript" s ...

  7. jquery文件上传控件 Uploadify 可以和ajax交互

    http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html  原网址 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...

  8. jquery文件上传控件 Uploadify(转)

    原文:http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上 ...

  9. 百度 flash html5自切换 多文件异步上传控件webuploader基本用法

    双核浏览器下在chrome内核中使用uploadify总有302问题,也不知道如何修复,之所以喜欢360浏览器是因为帮客户控制渲染内核: 若页面需默认用极速核,增加标签:<meta name=& ...

随机推荐

  1. httpclient4.3 工具类

    httpclient4.3  java工具类. .. .因项目须要开发了一个工具类.正经常常使用的httpclient 请求操作应该都够用了 工具类下载地址:http://download.csdn. ...

  2. 【21】必须返回对象时,别妄想返回器reference

    1.考虑有理数Rational,有个友元操作符*,返回Rational对象.返回对象,导致临时对象的构造,析构.效率低,因此会想返回方法内局部对象的引用,这种方法不可行.为什么? 2.调用方法是在st ...

  3. ORM之一:适合我的ORM

    一.常见开源ORM框架 比喻:Kerosene ORM,DbLinq,Dapper,DynamicQuery,elinq,glinq,NPoco,Relinq,EF,ServiceStack.OrmL ...

  4. redis实现spring-redis-data的入门实例

    redis的客户端实现.主要分为spring-redis-data .jredis. 记录下spring-redis-data的学习心得:spring-redis-data 中我目前主要用了它的存.取 ...

  5. iOS开发——UI篇OC篇&UICollectionView详解+实例

    UICollectionView详解+实例 实现步骤: 一.新建两个类 1.继承自UIScrollView的子类,比如HMWaterflowView * 瀑布流显示控件,用来显示所有的瀑布流数据 2. ...

  6. Andropid自己定义组件-坐标具体解释

    在做一个view背景特效的时候被坐标的各个获取方法搞晕了,几篇抄来抄去的博客也没弄非常清楚. 如今把整个总结一下. 事实上仅仅要把以下这张图看明确就没问题了. watermark/2/text/aHR ...

  7. [Effective C++ --023]宁以non-member、non-friend替换member函数

    作者在这一节中花了大幅度的篇幅来介绍为什么最好使用non-member.non-friend函数. 思路如下: 场景:如果有一个class用来表示网页浏览器,那么清楚缓存及历史记录的时候,我们可能定义 ...

  8. Android 快速开发框架网络篇-Android-Async-Http

    一.基本用法 AsyncHttpClient client = new AsyncHttpClient(); client.get("http://www.google.com", ...

  9. 转--object-C 与lua使用wax交互

    [51CTO独家译文]2011年6月的编程语言排行榜Lua语言一军突起,一举进入前十名.这与一年前苹果决定在iOS系统上使用Lua语言密不可分.但是,你了解如何用Lua语言在iOS上开发应用吗?51C ...

  10. 配置opencv

    先把opencv配置起来: 详细参见: http://blog.163.com/chen_dawn/blog/static/1125063201461695238801/ 我的机器的配置方法: 先去环 ...