ssiuploader php,jQuery件可拖拽和带预览图文件上传插_ajax无刷新上传工具 ssi-uploader...

ssi-uploader是一款带预览图并且可以拖拽文件的jQuery ajax文件上传插件。该文件上传插件支持AJAX，支持多文件上传，可控制上的文件格式和文件大小，提供各种回调函数，使用非常方便。

使用方法

在页面中引入ssi-uploader.css和ssi-uploader.js文件

HTML结构

最基本的文件上传HTML结构是使用一个元素，类型为file，并指定一个id。

在页面DOM元素加载完毕之后，可以通过ssi_uploader方法来初始化该文件上传插件。

$('#ssi-upload').ssi_uploader({

url: 'path/to/upload.php'

});

例子

$('#ss-uploader').ssi_uploader({

responseValidation:{

validationKey: 'type',

resultKey: 'data',

success: 'success',

error: 'error'

}

});

$('#ss-uploader').ssi_uploader({

responseValidation:{

validationKey: {

success: 'success',

error: 'error'

},

resultKey: 'validationKey'

}

})

回调函数

beforeUpload回调函数在文件上传前执行。

$('input').ssi_uploader({url:'uploadAction.php',beforeUpload:function(){

console.log('文件上传准备就绪！');

}})

$('input').on('beforeUpload.ssi-uploader',function(){console.log('一个文件准备上传。')});

beforeEachUpload回调函数在每一个单独的文件上传前执行。该函数访问每个文件的信息和xhr对象。如果终止了某个文件，你可以设置一个字符串，提示取消的原因，并显示的错误信息中。

$('input').ssi_uploader({url:'uploadAction.php',beforeEachUpload:function(fileInfo,xhr){

console.log(fileInfo.name+' '+fileInfo.type+' '+fileInfo.size);

if(fileInfo.size > 1){ xhr.abort(); }

return '文件尺寸太大！';

}});

$('input').on('beforeEachUpload.ssi-uploader',function(){console.log('A file is going for uploading.')});

onUpload回调函数在文件上传后执行

$('input').ssi_uploader({url:'uploadAction.php',onUpload:function(){

console.log('文件上传完毕！');

}})

$('input').on('onUpload.ssi-uploader',function(){console.log('文件上传完毕！')});

onEachUpload回调函数在每一个单独的文件上传后执行

$('input').ssi_uploader({url:'uploadAction.php',onEachUpload:function(fileInfo){

console.log(fileInfo.uploadStatus+' 'fileInfo.name+' '+fileInfo.type+' '+fileInfo.size+' '+fileInfo.uploadStatus);

}});

$('input').on('onEachUpload.ssi-uploader',function(){console.log('A file uploaded.')})