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

ssi-uploader是一个支持预览、拖拽功能的jQuery文件上传插件，允许AJAX多文件上传并限制文件类型和大小。插件提供了丰富的回调函数，如beforeUpload、beforeEachUpload和onUpload等，便于自定义上传行为。用户需要在HTML中引入ssi-uploader.css和ssi-uploader.js文件，通过$.ssi_uploader()方法初始化，并配置上传URL及回调函数。

下载地址

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.")})