jquery Upload plugin: Plupload Event Parameter Description detailed

This article focuses on the Plupload event parameters. Use 2 examples to illustrate the binding event.

1, plupload parameter description:

Browse_button: The unique ID that triggers the Browse File button label, and the source of the triggering event is found in Flash, HTML5, and Silverlight (I understand that this parameter is not needed in the queue part)

Container: The container that shows the list of uploaded files, [default is body]

Chunk_size: When the upload file is larger than the server receiver file size limit, can be sent to the server multiple times, if you do not need to remove from the settings

Drop_element: When the browser supports drag and drop, you can drag and drop the file into the container ID you want.

File_data_name: Sets the name of the upload field. is set to a file by default. (I tried not to find how to use it, not to mention)

Filters: Select the filter for the file name extension, with only title and ext two entries in each filter rule [{title: ', Extensions: '}]

Flash_swf_url:flash file Address

Headers: A custom key value pair for inserting an HTTP request

Max_file_size: Maximum upload file size (format 100b, 10kb, 10MB, 1GB)

Multipart: Boolean value, if you use Mutlipart instead of binary flow, you cannot work under WebKit

Multipart_params: The key value associated with multipart

Multi_selection: Multi-selection dialog box

Resize: Modify Picture Properties resize: {width:320, height:240, quality:90}

Runtimes: Upload plug-in initialization choose that way priority order, if the first initialization fails to go second, and so on

Required_features: You need those features to initialize the plug-in

URL: Upload server address

Unique_names: Whether to generate a unique file name to avoid duplicate server files

Urlstream_upload: boolean value if flash upload should be replaced by Urlstream Filereference.upload

Pluload API Documentation
Method List
Method List:

Uploader (setting): Creating a constructor for an instance

Bind (event, function[, scope]): Binding event

Destroy (): destroying instance objects of Plupload

Uploader.destroy ()

GetFile (ID): Get upload file information

Init: Initializing Plupload instance, adding listener objects

Uploader.destroy ()

Refresh: Re-instantiate uploader

RemoveFile (ID): Remove a file from files

Splice (start,length): Deletes the length file from the start of the queue, returning the list of deleted files

Start () upload

Stop () upload

Unbind (name, function): Contact Event Binding

Unbindall () to bind all events

Property Collection
Features:uploader include those features

File: List of files in the current queue

Unique ID of the Id:uploader instance

Runtime: Current operating Environment (is HTML5, flash, etc.)

State: Current Upload progress status

Total: Information collection for the current uploaded file

Event Collection
Beforeupload (up, file): Events triggered before files are uploaded

Events that chunkuploaded (up, file,response) files are uploaded in chunks

Destroy (UP): Method of Destroy invocation of uploader

Error (UP, err): triggered when an error is uploaded

fileadded (up, files): Triggered when a user selects a file

Fileremoved (up, files): When files are removed from the upload queue

fileuploaded (up, file, res): Trigger when File upload succeeds

Init (UP): triggered when initialized

Postinit (UP): event triggering after init execution

Queuechanged (UP): triggered when file queues change

Refresh (UP): triggers when silverlight/flash or other running environments need to be moved

StateChanged (UP) triggers when the entire upload queue is changed

Uploadcomplete (up,file) triggers when all files in the queue are uploaded

UploadFile (up,file) triggers when a file is uploaded

Uploadprogress (Up,file): When the file is being uploaded to trigger

2, the method of event binding:

First: Generate this plugin directly in the label

$ ("#uploader"). Plupload ({
Runtimes: ' GEARS,FLASH,SILVERLIGHT,BROWSERPLUS,HTML5 ',
URL: ' uploadfiles.ashx ',//server-side upload path
Max_file_size: ' 500MB ',//File upload maximum limit.
Chunk_size: ' 1MB ',//upload block size per block, this value is less than the maximum server upload limit of the value can be.
Unique_names:true,//upload filename is unique
Initialize the plugin directly in the tag, and start
Init: {
Queuechanged:function (UP)
{
This is a file list change event, some write event processing methods;
},//directly in the tag to initialize the plugin, and end
Whether to generate thumbnails (valid only for picture files)
Resize: {width:320, height:240, quality:90},
This array is a selector, which is the type of upload file that is restricted when uploading files.
Filters: [{title: "All Files", Extensions: "Mp3,s48"}
],
The path where the Flash file is located
Flash_swf_url: '/js/moxie.swf ',
Path to Silverlight file
Silverlight_xap_url: '/js/moxie.xap '
});

The second method:

<script>
Instantiate a Plupload Upload object
var uploader = new Plupload. Uploader ({
Browse_button: ' Browse ',//Trigger File Selection dialog box button, for that element ID
URL: ' upload.php ',//server-side upload page address
Flash_swf_url: ' js/moxie.swf ',//swf file, need to configure this parameter when uploading with SWF
Silverlight_xap_url: ' js/moxie.xap '//silverlight file, need to configure this parameter when you need to use the Silverlight method for uploading
});
Invoke the Init () method on the instance object to initialize
Uploader.init ();
Bind various events and do what you want in the event listener function
Uploader.bind (' filesadded ', function (uploader,files) {
Each event listener will pass in some very useful arguments,
We can use the information provided by these parameters to do things like updating the UI, prompting for upload progress, etc.
});
Uploader.bind (' uploadprogress ', function (uploader,file) {
Each event listener will pass in some very useful arguments,
We can use the information provided by these parameters to do things like updating the UI, prompting for upload progress, etc.
});

It is important to note that the event can only be bound after initialization!!

3, limit the number of files uploaded

Limit file count when uploading
Upload.bind (' filesadded ', function (up, files) {
$.each (Files,function (i,file) {
if (Up.files.length > 1) {
Up.removefile (file);
}
});
});

4, Upload success events

After successful upload:
Upload.bind (' uploadcomplete ', function (up, file, res) {
$ ("#basicModal"). attr ("Class", ' modal fade ');
$ ("#basicModal"). CSS (' Display ', ' none ');
$ (". Modal-backdrop"). Remove ();
Upload callback function
JQuery ("#updateSync"). Click ();
});

});
5, Start uploading events:

JQuery (' #cookie '). Click (function () {
var Valm = $ ("#basicModal"). attr (' class ');
var sty = $ ("#basicModal"). CSS (' Display ');
if (Valm = = "Modal Fade" | sty = = "none;") {
$ ("#basicModal"). attr ("Class", ' Modal Fade in ');
$ ("#basicModal"). CSS (' Display ', ' block ');
}else{
$ ("#basicModal"). attr ("Class", ' modal fade ');
$ ("#basicModal"). CSS (' Display ', ' none ');
}
Plupload ();
var upload = $ ("#upload"). Pluploadqueue ();

found that none of the parameters were configured to commit 2 files at a time. That means I want to send 2 files via a post. Unless you are using this plugin, submit form forms once with asp.net input type=file. Because C # supports sending multiple files on a POST request. Everyone is interested can go to see: httpfilecollection myfiles = HttpContext.Current.Request.Files;

Among them, I was trying to find out that 2 plupload can do something through plupload events.

var uploader;//first Plupload

var uploaderbig;//second Plupload

For example, listen for files to add success events. filesadded

Bind file add into queue event
Uploaderbig.bind (' filesadded ', function (uploaderbig, files) {
for (var i = 0, len = files.length i < len; i++) {
var file_name = Files[i].name; Filename
var html = ' <li id= ' file-' + files[i].id + ' > '
+ file_name + ' </li> ';
$ (' #imageListtempbig '). HTML (HTML);
!function (i) {
Previewimage (Files[i], function (IMGSRC) {
$ (' #file-' + files[i].id). Append (' ');
})
} (i);
}
});

When the first plupload adds a file, it can be added to the second Plupload files queue:

var files = uploader.files;
for (var i = 0, len = files.length i < len; i++) {
Uploaderbig.addfile (Files[i]);
//    }
The event invoked is: AddFile

Of course, even if there is such a function can not meet the needs of my side. So only the best way is uploader after adding files, directly start uploading events, upload successfully returned to the server's address.

Js:

Loadupplug (); Uploader.init (); Class
Bind file add into queue event
Uploader.bind (' filesadded ', function (uploader, files) {
Upsmallimage ();
for (var i = 0, len = files.length i < len; i++) {
var file_name = Files[i].name; Filename
var html = ' <li id= ' file-' + files[i].id + ' > '
+ file_name + ' </li> ';
$ (' #imageListtemp '). HTML (HTML);
!function (i) {
Previewimage (Files[i], function (IMGSRC) {
$ (' #file-' + files[i].id). Append (' ');
})
} (i);
}
});

Start uploading.
function Upsmallimage () {
var data;
data = {
Operate: "Upsmallimage"
};
Uploader.setoption ("Multipart_params", data);
Uploader.start ();
}

C # server-side reads files and saves:

Private Object Getupsmallimage ()
{
Temporarily save to temp below, if submitted together successfully, then delete from temp, get media
String filepath =httpcontext.current.server.mappath ("/upload/media/");
String websiteurl = Utility.getappsettings ("Imagewebsite");
HttpContext.Current.Server.MapPath ("/upload/media/");
httpfilecollection files = HttpContext.Current.Request.Files;
int count = files. Count;
Httppostedfile file = Files[0];
String fileName = Guid.NewGuid (). ToString () + path.getfilename (file. FileName);
Try
{
String Severlocalpath = filepath + fileName;
File. SaveAs (Severlocalpath);
}
catch (Exception Xe)
{
FileName = "";
}
return fileName;
}
There's a better way, please let me know.