A jquery file upload plugin that can be dragged and previewed with a preview Ssi-uploader

Plugin Description: Ssi-uploader is a jquery ajax file upload plugin with preview and can drag files. The file Upload plugin supports AJAX, supports multiple file uploads, can control file formats and file sizes, and provides various callback functions that are very handy to use. Brief tutorials

Ssi-uploader is a jquery ajax file upload plugin with a preview and can drag files. The file Upload plugin supports AJAX, supports multiple file uploads, can control file formats and file sizes, and provides various callback functions that are very handy to use.

Installation

You can install the Ssi-uploader file upload plugin via bower or NPM.

Bower Install SSI-UPLOADERNPM install SSI-uploader 

How to use

Introduce Ssi-uploader.css and ssi-uploader.js files in the page.

<link rel="stylesheet" href="path/to/ssi-uploader.css" ><script src="path/to/ Ssi-uploader.js "></script>      

HTML structure

The most basic file upload HTML structure is to use a <input> element, type file, and specify an ID.

<input type="file" multiple id="Ssi-upload"/>    

Initializing plug-ins

After the page DOM element has finished loading, you can initialize the file upload plugin by using the Ssi_uploader method.

$ (' #ssi-upload '). Ssi_uploader ({url: ' path/to/upload.php '});  

Configuration parameters

The available configuration parameters for the Ssi_uploader file upload plugin are as follows:

Parameters	Type	Default value	Describe
Url	{String}	Null	The address that receives the AJAX request. must be filled in.
Data	{Object}	Null	Send additional data for the request. For example $ (' input '). Ssi-uploader ({url: ' upload.php ', data:{"name": "Mydragon"}})
Ajaxoptions	{Object}	{type: ' DELETE '}	{type: ' DELETE '} the option to extend the default $.ajax function.
Locale	{String}	"EN"	The localized language used.
Preview	{Boolean}	True	Whether to enable the file preview effect.
Maxnumberoffiles	{Number}	Null	How many files are allowed to be uploaded at a time.
MaxFileSize	{Number}	Null	Maximum file size allowed for uploading.
Allowed	{Array}	[' jpg ', ' jpeg ', ' PNG ', ' BMP ', ' gif ']	The type of file that is allowed to upload.
ErrorHandler	{Object}		The method used to handle the error message.
Beforeupload	{Function}		The callback function that was executed before the file was uploaded.
Beforeeachupload	{Function}		Each individual file is uploaded before the callback function is executed.
Onupload	{Function}		A callback function that executes after the file is uploaded.
Oneachupload	{Function}		Each individual file is uploaded after the callback function is executed.
Responsevalidation	{object| | False		Set the error check and the plugin will display the settings information. Can be: {type: "error", Result: "already exists"} or {error: "already exists."}.

Where the ErrorHandler parameter has a errorhandler.method function, the function error message and type.

function (msg,type) {alert (msg);}

The available properties of the Responsevalidation object are:

• ValidationKey: type {string| | Object} to set the validation information.

• Resultkey: type {string| | Object}, which sets the return validation information.

• Success: type {String}, setting success information.

• Error: type {String}, setting the fault message.

For example:

Structure 1$ (' #ss-uploader '). Ssi_uploader ({responsevalidation:{validationkey:' Type ', Resultkey:' Data ', success:' Success ', error:' Error '}});//result/ * {type: ' Error ', data: ' Already Exists. ' } */ //structure 2$ (' #ss-uploader '). Ssi_uploader ({responsevalidation:{validationkey: {success: 
               
                 ' success ', Error: 
                ' ERROR '}, Resultkey: ' validationkey '}})//result/ * {error: ' already E  Xists. ' } */
               

callback function

The Ssi-uploader file generation plug-in supports 4 callback functions: Beforeupload, Beforeeachupload, Onupload, and Oneachupload.

Beforeupload

The callback function that the Beforeupload callback function executes before the file is uploaded.

$ (' input '). Ssi_uploader ({url:' uploadaction.php ', Beforeupload:function () {console. log (' File Upload ready! ‘);}}) $ (' input '). On (' beforeupload.ssi-uploader ',function () {console. log (' A file is ready to be uploaded. ')});           

Beforeeachupload

The Beforeeachupload callback function executes the callback function before each individual file is uploaded. This function accesses information and XHR objects for each file. If a file is terminated, you can set a string that prompts the reason for cancellation and displays the error message.

$(' Input '). Ssi_uploader ({URL:' uploadaction.php ', Beforeeachupload:function (FILEINFO,XHR) {Console. log (FileInfo. Name+‘ ‘+fileinfo.type+< Span class= "Litelighterstyle" > '   ' +fileinfoif (Fileinfo.size  > 1) { xhr.abort (); }    return  file size too big! ‘;}});  $ ( ' input ') .on (  ' Beforeeachupload.ssi-uploader ', function () { Console.log ( ' a file is going  for uploading. ')})              

Onupload

The callback function that the Beforeupload callback function executes after the file is uploaded.

$ (' input '). Ssi_uploader ({url:' uploadaction.php ', Onupload:function () {console. log (' File Upload complete! ‘);}}) $ (' input '). On (' onupload.ssi-uploader ',function () {console. log (' File upload completed! ')});           

Oneachupload

The Beforeupload callback function executes the callback function after each individual file is uploaded.

$(' Input '). Ssi_uploader ({URL:' uploadaction.php ', Oneachupload:function (fileInfo) {Console. log (FileInfo. uploadstatus+"' FileInfo. Name+‘ ‘+fileinfo.type+ '   ' Span class= "Litelighterstyle" >+fileinfo.size+< Span class= "Litelighterstyle" > '   ' +fileinfo ' input ') .on (  ' Oneachupload.ssi-uploader ', function () {console< Span class= "Litelighterstyle" >.log ( ' a file uploaded. ')}); 
 
 
 ——————————————————————————————————————————— Split Line ————————————————————————————————————————————————————— 
 Attachment Download: Http://files.cnblogs.com/files/Hmin2199/%E5%8F%AF%E6%8B%96%E6%8B%BD%E5%B8%A6%E9%A2%84%E8%A7%881.zip 

jquery File Upload plugin for dragging and previewing Ssi-uploader