JqueryfakeUpload plugin User Guide

The plugin introduces html & lt; inputtypefile & gt;, which consists of a text box and a button. There are several problems: 1. Some instructions cannot be initialized in the text box. 2. The words on the button are embedded in the Browser and cannot be modified. The English version of the Browser is Browser & hellip; and the Chinese version of the Browser... Syn

Plugin Introduction
HtmlIt consists of a text box and a button. There are several problems:
1. Some instructions cannot be initialized in the text box.
2. The words on the button are embedded in the Browser and cannot be modified. The English version of the Browser is "Browser ...", The Chinese version of browser is "browsing ...", As a result, the text on the button cannot be internationalized.
3. The button style is also embedded in the browser and cannot be controlled.
To achieve the effect, type = "file" is not possible.

Jquery. fakeUpload is a plug-in written to solve the above problems.

How to Use
1. Import jquery. fakeUpload. js (Of course it depends on jquery)
2. Add a span or div element to the html body.

[Javascript]
// Name is the file parameter to be accepted in the background
4. initialize the fakeUpload component in the ready method of jquery.

[Javascript]
$ ("# Span1"). fakeUpload ("init ",{
TipText: "only optional *. jpg Files ",
BtnText: "select file ...",
BtnWidth: 85,
BtnClass: "btn"
});

5. On the page, use var path = $ ("# span1"). fakeUpload ("getPath"); to obtain the path (including the file name) of the selected file)

Method

Init

Initialize the control and call $ ("XX"). fakeUpload ("init", params );

Parameters

Object. The attributes are described as follows.

TipText: String, which is the descriptive text in the text box. It is an empty String by default.

Width: Number, the width of the text box, 150 by default.

BtnClass: String, the Class Name (s) applied on the button. The default value is "BUTTON75 ".

BtnText: String, the text on the button. The default value is "Browse ...".

FileCheckFn: Function: select a file and use this callback function to verify the file. The file name is passed as a Function parameter to the callback function. The default value is "Function (fileName) {return true }".

Return Value

JQuery object.

 

GetPath

To obtain the full path of the selected file, call $ ("XX"). fakeUpload ("getPath ");

Parameters

None
Return Value

String, full file path.

The source code is as follows:

[Javascript]
/**
* Simulation
* Author: dengl
*/
(Function ($ ){
Var DEFAULT_OPTS = {
"TipText": "", // prompt message
"Width": 150, // text box width
"BtnWidth": 75,
"BtnClass": "BUTTON75 ",
"BtnText": "browsing ...",
"FileCheckFn": function (fileName) {// File Check
Return true;
}
};

/**
* Initialization
* @ Param $ t
* @ Param opts
* @ Returns
*/
Function init ($ t, opts ){
Var _ fakeUpload = $ t. data ('fakeupload ');
If (! _ FakeUpload ){
Effect.css ({"position": "relative", "display": "inline-block "});
$ T. append (''
+''
+''
+''
+'');
$ T. removeAttr ("name ");
_ BindAction ($ t, opts );

// Bind some data to html tags
$ T. data ('fakeupload', {opts: opts });
}
}

/**
* Get the file path
*/
Function getPath ($ t ){
Var _ fakeUpload = $ t. data ('fakeupload ');
If (_ fakeUpload ){
Var v = $ t. find ("input [type = text]"). val ();
Return v = _ fakeUpload. opts. tipText? "": V;
}

Return "";
}

/**
* Bind events
* @ Param $ t
* @ Param opts
* @ Returns
*/
Function _ bindAction ($ t, opts ){
Var $ file = $ t. find ("input [type = file]");
Var $ txt = $ t. find ("input [type = text]");

$ File. unbind (". fakeUpload"). bind ("change. fakeUpload", function (){
If (opts. fileCheckFn (this. value )){
If (! This. value ){
Export txt.css ({"color": "# BBBBBB "});
$ Txt. val (opts. tipText );
} Else {
Optional txt.css ({"color ":""});
$ Txt. val (this. value );
}
}
});
}

$. Fn. fakeUpload = function (m, opts ){
Opts = opts || {};
Switch (m ){
Case 'init ':
Return this. each (function (){
Var _ opts = $. extend ({}, DEFAULT_OPTS, opts );
Init ($ (this), _ opts );
});
Case 'getpath ':
Return getPath (this );
}
};
}) (JQuery );