Jquery uploadify uploads files

Source: Internet
Author: User

After searching for a day on the Internet, we all said that the only drawback of Uploadify is that it does not support Chinese buttons. before using the cup, I checked the Uploadify API and found that several parameters were not mentioned, this is the key to solving this problem. (In the future, we will definitely develop the habit of watching the API if nothing happens)

Uploadify has a parameter called buttonText which does not support Chinese characters no matter how you change it, because the plug-in uses a transcoding method in js to turn the value of this parameter, the decoded part is in the swf file and the Code cannot be seen.

Another parameter, which is rarely mentioned on the Internet, is buttonImg (Button image). You can use an image to replace the black flash browsing button that comes with the plug-in, as long as your image is in Chinese, does this solve the Chinese button problem? If you only add this one, you will find that there is a white area under the button image, which is actually left by the flash. The white area indicates the available range of the mouse, and the width range can be used, height. The default value of the wmode parameter is opaque. You can change it to transparent, that is, to make the white area transparent. Then, set the key-click range to the same size as your image.
 

The usage of Uploadify is not mentioned. There are many articles on the Internet. Like other jquery plug-ins, there are just several file placement paths.

The following is an introduction to some Uploadify parameters. If you want to view all the parameters, you can view the API files, which are generally included in the downloaded package.

 

Uploader: The relative path of the uploadify.swf file. The swf file is a button with a text BROWSE. The open file dialog box is displayed. The default value is uploadify.swf.

Script: The relative path of the background processing program. Default Value: uploadify. php

CheckScript: used to determine whether the selected file to be uploaded is in the relative path of the background processing program on the server

FileDataName: Set a name based on the name in the server handler to obtain the data of the uploaded file. The default value is Filedata.

Method: The default submission method is Post or Get.

ScriptAccess: the access mode of the flash script file. If you set it to always in a local test, the default value is sameDomain.

Folder: directory where the uploaded files are stored.

QueueID: ID of the file queue, which is consistent with the ID of the div storing the file queue.

QueueSizeLimit: when multiple files are allowed to be generated, set the number of selected files. Default Value: 999.

Multi: When set to true, multiple files can be uploaded.

Auto: Set to true. When a file is selected, it is uploaded directly. If it is set to false, You need to click the upload button to upload the file.

FileDesc: This attribute value is valid only after the fileExt attribute is set. It is used to set the prompt text in the Select File Dialog Box. For example, if fileDesc is set to "select rar docpdf file", the file selection box is displayed as follows:

FileExt: Set the file type that can be selected. The format is '*. doc; *. pdf; *. rar '.

SizeLimit: Specifies the size limit of the file to be uploaded.

SimUploadLimit: the number of simultaneous uploads allowed. Default Value: 1.

ButtonText: the text of the browser button. Default Value: BROWSE.

ButtonImg: Path of the image of the browser button.

HideButton: if it is set to true, the image of the Browse button is hidden.

Rolover: The values are true and false. If it is set to true, the result is reversed when you move the cursor over the Browse button.

Width: Set the width of the browser button. Default Value: 110.

Height: Set the height of the Browse button. Default Value: 30.

Wmode: If this parameter is set to transparent, the flash background file of the browser button is transparent, and the flash file is set to the top level of the page. Default Value: opaque.

CancelImg: select the close button icon for each file after the file is in the file queue.


Uploadify also comes with a lot of parameters and useful methods and callback functions, all of which are in the API. Although they are all in English, they are easy to understand. I won't talk about them here.

The following is the code I used. For more information, see:


<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Uploadify"). uploadify ({
'Upload': 'images/uploadify.swf ',
'Script': '<% = request. getContextPath () %>/content/ImportScheduleCommitAction. do ',
'Cancelimg': 'images/cancel.png ',
'Folder ':'/',
'Queue id': 'filequeue ',
'Filedataname': 'uploadify ',
'Filedesc': 'supported format: xls .',
'Fileext ':' *. xls ',
'Auto': false,
'Multi ': true,
'Height': 20,
'Width': 50,
'Simuploadlimit': 3,
// 'Buttontext': 'fdsfdsf ...',
'Buttonimg ': 'images/browse.jpg ',
// 'Hidemo': true,
// 'Rolover ': true,
'Wmode': 'transparent ',
OnComplete: function (event, queueID, fileObj, response, data)
{
$ ('<Li> </li>'). appendTo ('. files'). text (response );
},
OnError: function (event, queueID, fileObj)
{
Alert ("file:" + fileObj. name + "Upload Failed ");
}
// OnCancel: function (event, queueID, fileObj)
//{
// Alert ("cancel file:" + fileObj. name );
//}
});
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Uploadify"). uploadify ({
'Upload': 'images/uploadify.swf ',
'Script': '<% = request. getContextPath () %>/content/ImportScheduleCommitAction. do ',
'Cancelimg': 'images/cancel.png ',
'Folder ':'/',
'Queue id': 'filequeue ',
'Filedataname': 'uploadify ',
'Filedesc': 'supported format: xls .',
'Fileext ':' *. xls ',
'Auto': false,
'Multi ': true,
'Height': 20,
'Width': 50,
'Simuploadlimit': 3,
// 'Buttontext': 'fdsfdsf ...',
'Buttonimg ': 'images/browse.jpg ',
// 'Hidemo': true,
// 'Rolover ': true,
'Wmode': 'transparent ',
OnComplete: function (event, queueID, fileObj, response, data)
{
$ ('<Li> </li>'). appendTo ('. files'). text (response );
}, Www.2cto.com
OnError: function (event, queueID, fileObj)
{
Alert ("file:" + fileObj. name + "Upload Failed ");
}
// OnCancel: function (event, queueID, fileObj)
//{
// Alert ("cancel file:" + fileObj. name );
//}
});

Note that the value of my script attribute is a request path. I found that after I have set to upload multiple files at the same time (for example, 3 ), instead of uploading three files at a time each request, the system still executes three requests to upload one file at a time. There is no way to do this. uplodify has so many callback functions. If multiple callback functions are processed at a time, the callback function parameters do not know which one to use because these parameters are not arrays.

That is to say, no matter how many files you set to upload at the same time, it will request and upload one by one, but it seems that there are multiple threads simultaneously processing the upload request, just like it is. In addition, if you set simUploadLimit to an excessively large value, errors will often occur. When I set it to 5, one or two files will often fail to be uploaded.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.