jUploader 1.0 Demo

jUploader 1.0 Demo

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 ​​kudystudio.com​​

全局设置:

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

实例（一）:

'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('上传失败'); } }});

实例（二）:

'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(); }});

实例（三）:

'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); }});

实例（四）:

'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'); }});

参数说明：

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。