JS HTML5 Upload Sample code full version _javascript tips

itself with the Flash plugin has been uploaded, but there are a lot of incompatible scenarios, some of the core configuration can not be changed, and finally sorted out a HTML5 version, the following has a portal:

Several key issues addressed by several customer needs:

Multi-file selection, special effects not rigid
Custom Submit Parameters
Number of file size limits
*MD5 Check
Server Feedback Information Display
can control the upload order
Multi-View Switching

Here's a statement. Plug-in core component source cfupdate (0.8.2 Base)

HTML5 Bulk Upload Component

HTML5 version, as long as the support HTML5 browser can be used, and the touch screen (cell phone, flat) has been optimized
ie9+ Firefox Chrome Opera Safari IPhone4 iPad2 Android 2.1

Cfupdate HTML5 version, as long as the support HTML5 browser can be used properly, and the touch screen (cell phone, flat) has been optimized
ie9+ Firefox Chrome Opera Safari IPhone4 iPad2 Android 2.1--[cfupdate]
code block

Calling method HTML code:

<script type= "Text/javascript" src= "CFUpdate.min.js" charset= "Utf-8" ></script> <div "id="
Cfupdate "></div>

File (config.js) code for the primary configuration parameter

function Challs_flash_update () {//initialization functions var a={}; Define variable to object type A.title = "Upload file";
 Set the component header name A.formname = "Filedata"; 
 Set the Name property of the Text field for form form a.url = "update.php"; 
 Set the server to receive code files A.parameter = "";
 Set the submit parameter, submit in get form, example: "Key=value&key=value& ..." a.typefile = "*.gif;*.png;*.jpg;*.jpeg;*.avi;";
 Settings can be uploaded file array type//"*.gif;*.png;*.jpg" for the list of file extensions, which lists the Windows file format that users can see when they select files to upload, separated by semicolons a.upsize = 0;
 Can limit the total volume of transfer files, 0 or negative number is not limited, MB a.filenum = 0;
 Can limit the number of files to be transmitted, 0 or negative numbers are unrestricted a.size = 2048;
 Upload a single file limit size, MB, you can fill in decimal type a.formid = [' select ', ' Select2 ']; Set the ID value of the Checkbox,text,textarea,radio,select item in the form form that is to be set to the server//form on each upload, and the radio group needs only one setting ID.
 parameter is an array type, note that you must have the Challs_flash_formdata () function Support A.autoclose = 1 using this parameter;
 Upload completion entries, will automatically delete the completed entries, the value of the delay time, in seconds, when the duty is-1 does not automatically close, note: When the argument completeclose false a.completeclose = true;
 When set to True, upload-completed entries will also be able to cancel the deletion of entries, so that the parameter upsize will expire, and the default is false a.repeatfile = true; When set to True, you can filter the duplicate files that the user has selected, or you can allow users to choose to upload the same file multiple times, default to False A.md5fiLe = 1; Set the MD5 file signature mode, the parameters are as follows, note: The large file calculation will be very slow, in the absence of special needs, please set to 0//0 to close the MD5 calculation signature//1 for the direct calculation of the MD5 signed after signing//2 for the computed signature, the signature submitted to the server authentication,


 In accordance with the server feedback to perform upload or do not upload//3 for the first file to submit basic information, according to the server feedback, perform MD5 signature calculation or direct upload, if it is to carry out MD5 calculation, calculate, submit the results of the calculation, in accordance with the server feedback, to perform whether upload or not upload
 A.loadfileorder=true;
 Selected file Load file list order, TRUE = positive sequence loading, FALSE = reverse loading a.mixfilenum=0;
 At least the number of files selected, set this will limit the file list at least normal number (including waiting to upload and have uploaded) for the set number, can click Upload, 0 for unrestricted a.listshowtype = 1; File list Display Type://1 = Traditional list display,//2 = thumbnail list display (suitable for picture dedicated upload)//5 = minimalist mode//6 = Mobile mode (for mobile phone plate)////3,4 (keep temporarily no effect) A.titleswitch
 = true;
 Whether to show component head A.forcefilenum = 0;

 The number of mandatory entries, upload and upload entries are equal to the set value (excluding upload failed entries), otherwise do not allow upload, 0 is not limited, set limits after Mixfilenum,autoclose and FileNum properties will be invalid!
 A.autoupload = false;

 When set to True, the user selects the file, starts the upload directly, does not need to click the upload, the default is false;
 A.adjustorder = true;
 When set to True, the user can drag the list, rearrange the position a.deleteallshow = TRUE//Set whether to display, all Clear button A.countdata = true; Whether to submit component file list statistics to server side, post-submit data//access2008_box_info_max list Total quantity//access2008_box_info_upload remaining quantity (including current upload entry)// Access2008_box_info_over has uploaded the completed number (excluding current upload entries) A.ISSHOWUPLOadbutton = true;
 Whether to display the upload button, the default is true a.isrotation = true; Whether you can rotate the picture//This item only in thumbnail mode to use//open this will post a picture angle to the server side, by the server-side rotating picture//access2008_image_rotation angle 0 to -360 a.iserrorstop =
 True
 When you meet the error, whether to stop uploading, if false, ignore the error into the next upload return a;

 Returns the object} function Challs_flash_style () {//Component color style setting function var a = {}; /* Overall background color style * * a.backgroundcolor=[' #f6f6f6 ', ' #f3f8fd ', ' #dbe5f1 '];     Color setting, over 3 colors between a.backgroundlinecolor= ' #5576b8 ';     Component outside border color a.backgroundfontcolor= ' #066AD1 ';     The bottom text color of the component a.backgroundinsidecolor= ' #FFFFFF '; Component frame background color a.backgroundinsidelinecolor=[' #e5edf5 ', ' #34629e '];  Components inside the border color, 2 colors between excessive/* head color Style * * a.top_backgroundcolor=[' #e0eaf4 ', ' #bcd1ea '];       Color settings, array type, over 2 colors between a.top_fontcolor= ' #245891 ';   Head text color//Button Color style * * a.button_overcolor=[' #FBDAB5 ', ' #f3840d '];     When the mouse moved up the background color, 2 colors between the excessive a.button_overlinecolor= ' #e77702 ';     When the mouse moves up the border color a.button_overfontcolor= ' #ffffff ';   When the mouse moved up the text color a.button_outcolor=[' #ffffff ', ' #dde8fe ']; The background color when the mouse leaves, 2 colorsOver a.button_outlinecolor= ' #91bdef ';     When the mouse left the border color a.button_outfontcolor= ' #245891 ';    When the mouse left the text color/* scroll bar style * * a.list_scrollbarcolor=0x000000;   scroll bar color a.list_scrollbarglowcolor=0x34629e;     scroll bar shadow Color/* file List style * * a.list_backgroundcolor= ' #EAF0F8 ';      List background color a.list_fontcolor= ' #333333 ';       List text color a.list_errfontcolor= ' #ff0000 ';       List error message text color a.list_linecolor= ' #B3CDF1 ';    List Split Line Color a.list_canceloverfontcolor= ' #ff0000 ';    The list cancels when the text moves up the color a.list_canceloutfontcolor= ' #D76500 ';    The list cancels the text when it leaves the color a.list_progressbarlinecolor= ' #B3CDF1 ';  Progress bar Border Line Color a.list_progressbarbackgroundcolor= ' #D8E6F7 ';  progress bar background color a.list_progressbarcolor=[' #FFCC00 ', ' #FFFF00 '];     Progress bar Progress color, 2 colors between excessive/* error tip box style * * a.err_backgroundcolor= ' #C0D3EB ';       Hint box background color a.err_fontcolor= ' #245891 ';      Hint box text color a.err_shadowcolor= ' #000000 ';   Hint box shadow color/* Phone mode special style (Listshowtype = 6) * * A.phone_backgroundcolor = "#232323";  Mobile phone mode background color A.phone_backgroundfontcolor = "#f6f6f6";
Mobile Mode Font Color
 A.phone_top_font = 20;      Mobile phone mode head Text size A.phone_button_font = 18;   Mobile phone mode button text size A.phone_button_linecolor = "#2e2e2e";  Mobile phone mode button Edge Color 1 a.phone_button_default_color = "#232323"; Mobile mode button default background color A.phone_button_default_fontcolor = "#f6f6f6";   Mobile Mode button default character color A.phone_button_click_color = "#265259";  Mobile phone mode button when clicked background color A.phone_button_click_fontcolor = "#f6f6f6"; Mobile phone mode button Click when the character color A.phone_backgroundinsidecolor = "#2e2e2e";   Mobile phone mode frame background color A.phone_list_backgroundcolor = "#232323"; Mobile Mode list background color A.phone_list_progressbarbackgroundcolor = "#166549";   Mobile Mode list progress bar color A.phone_list_name_font = 24; Mobile mode list filename Font size A.phone_list_name_color = "#fff";  Mobile mode list filename Font color a.phone_list_type_font = 18; Mobile Mode list status Font size A.phone_list_type_color = "#eee"; Mobile mode list status Font Color A.phone_list_button_del_backgroundcolor = "#e76e66"; Mobile Mode list Delete button background color A.phone_list_button_del_off_backgroundcolor = "#666";   Mobile Mode list Delete button is disabled under the background color a.phone_list_button_del_font = 20; Mobile Mode list Delete button text size A.phone_list_button_del_color = "#fff";
Mobile Mode list Delete button text color return A; The function challs_flash_language () {//Component text setting functions var a = {//$[1]$ $[2]$ $[3]$ is the substitution symbol/\ n is a newline symbol/button text Buttontx
  T_1: ' Stop ', buttontxt_2: ' Select File ', buttontxt_3: ' Upload ', buttontxt_4: ' Empty ', buttontxt_5: ' delete ',//Global text Settings Font: ' XXFarEastFont-Arial ', FONTSIZE:12,//Hint text alert_1: ' initialization error: \ n \ nyou did not find the JAVASCRITP function \ n Function name is challs_flash_update () ', Alert_2: ' initialization error: \ n function Chal Ls_flash_update () return type must be "Object" type, Alert_3: ' initialization error: \ n \ nyou do not set upload path address ', Alert_4: ' Add upload file failed, \ n \ nthe upload file can not be added! ', Alert _5: ' Add upload file failed, \ n wait to upload file list can only have $[1]$, \ n Please upload some files first! ', Alert_6: ' Prompt information: \ n \ nplease choose $[1]$ Upload file! ', alert_7: ' Prompt message: \ n \ nplease select $[1]$ upload file at least! ', Alert_8: ' Please choose to upload file! ', Alert_9: ' Upload error: \n\n$[1]$ ',//Interface text txt_5: ' Wait for upload ', txt_6: ' Wait for upload: $[1]$ upload: $[2]$ ', txt_7: ' bytes ', txt_8: ' Total limit ($[1 ] $MB), upload failed ', Txt_9: ' File over $[1] $MB, upload failed ', txt_10: ' Seconds ', Txt_11: ' Save Data ... ', Txt_12: ' Upload completed ', txt_13: ' File loading error ', Txt_14: ' Scan files ... ', txt_15: ' Verify Files ... ', txt_16: ' Cancel ', txt_17: ' No map ', txt_18: ' Load ', txt_20: ' Close', txt_21: ' OK ', txt_22: ' Upload file ',//error hint err_1: ' Upload address URL invalid ', err_2: ' Server error: $[1]$ ', err_3: ' Upload failed, $[1]$ ', Err_4: ' Service

 Err_5: ' Bad data invalid error '}; English//var a = {//buttontxt_1: ' Stop ',//buttontxt_2: ' Add file ',//buttontxt_3: ' Upload ',//buttontxt_4: ' Empt Y ',//Font: ' Arial ',//Fontsize:12,//alert_1: ' Initialization error:\n\njavascritp function not found \nthe name O f the function is Challs_flash_update () ",//alert_2: ' Initialization error:\n\nfunction challs_flash_update () return Typ E must be "Object",//Alert_3: ' Initialization error:\n\nupload path address does not set ',//alert_4: ' Add files Fai Led,\n\nno more files to add! ',//alert_5: ' Add files failed,\n\nthe the number of files in the list is no more than $[1]$,\nple ASE upload a part of the files firstly! ',//alert_6: ' Message:\n\nplease select $[1]$ file (s) again! ',//alert_7: ' Message:\n\nplease select $[1]$ file (s) at least again! ',//alert_8: ' Please select file (s)! ',//alert_9: ' Error:\n\n$[1]$ ',//txt_5: ' Waiting for upload ',//txt_6: ' Wait: $[1]$ upload:$[2]$ ',//txt_7: ' Bite ',//txt_8: ' Total L Imit ($[1] $MB), upload failed ',//txt_9: ' The Filem is over ($[1] $MB), upload failed ',//txt_10: ' S ',//txt_11: ' Saving Data ... ',//Txt_12: ' Upload complished ',//txt_13: ' File load Error ',//txt_14: ' sacnning ... ',//txt_15: ' Verifyin G ... ',//txt_16: ' Cancel ',//txt_17: ' No Image ',//txt_18: ' Loading ',//txt_20: ' Close ',//txt_21: ' OK ',//Tx
 T_22: ' Upload Files ',//err_1: ' Address URL Invalid ',//err_2: ' Server error:$[1]$ ',//err_3: ' Upload error,$[1]$ ',

Err_4: ' Efficacy server submited error ',//err_5: ' Efficacy data Invalid '//} return A;

 }

Meet a few problems to sum up:
1. Upload the file at the same time there is a form parameter transmission, here with, can be multiple a.formid = [' parameter name 1 ', ' parameter Name 2 ']; Post submission, receive parameters with Request.getparameter ("parameter name") to get (so written in Java), the official gave PHP and ASP examples, can refer to their own.

2. After the end of the upload server feedback information, Response.getwriter (). Print ("FileName: + filename +" File size: "+ size+" bytes ...) and more information ") of their own organization.

It is best to give a few pictures:

Java version has been debugged, the project using STRUTS2, there are similar to meet the pit students can leave a message contact me!!! PHP and ASP versions can be downloaded in the official package with examples.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.