Multifile upload using HTML5

There is a brand new multi-File Uploader (dojox. form. uploader), which has a customizable file input button. It can use the multi-file selection mode and is completely based on HTML elements. In browsers that do not support HTML5, this control can be automatically switched to flash or IFRAME.

Original article: The New HTML5 multi-File Uploader

By Mike Wilcox

Difficulty: Beginner

Dojo version: 1.6

Getting started

File input is called file input because it is a standard input element and its type attribute is set to "File ". For many years, only one file can be selected and uploaded at a time. Added the multiple selection mode for the input element in the new HTML5 specification. Of course, different browsers have never implemented the same specifications. For example, firefox3.6 is different from WebKit and firefox4.0. As you may have guessed, ie does not implement the function of uploading multiple files in HTML5... or even ie9.

! Compared with dojox. Form. uploader, dojox. Form. fileuploader makes many improvements and replaces the latter. Because the new dojox. Form. Uploader is not applicable to flash in Mozilla and WebKit browsers, many problems caused by Flash are avoided. After dojo 1.6, maintenance of dojox. Form. fileuploader will no longer be provided, but the control code will be retained until dojo 2.0.

To cope with various situations that dojo developers need to face, the real "upload function" is actually implemented by the plug-in. Without these plug-ins, the Uploader Code allows you to customize the file input style, in browsers that do not support HTML5, add a new file input element for each file selection to achieve multi-file selection. All this requires adding the dojotype attribute for a common file input:

<input type="file" multiple="true" dojoType="dojox.form.Uploader"label="Select Some Files" url="/tests/UploadFile.php"uploadOnSelect="true"/>

The above code will generate an upload file button that uses the dijit style you selected. Here we use the Claro topic by default:

Note: If you want to use ajax to upload files, you need an uploader plug-in. I will describe this later.

In addition to using Ajax to upload files, this Uploader may also be placed in a form to directly upload files. During use, remember to set the enctype attribute of your form to multipart/form-data, which is used to upload files.

<form method="post" action="/tests/UploadFile.php" id="myForm"enctype="multipart/form-data" >    <fieldset>        <legend>Form Post Test</legend>        <input class="browseButton" name="uploadedfile" multiple="true"        type="file" dojoType="dojox.form.Uploader"        label="Select Some Files" id="uploader" />        <input type="text" name="album" value="Summer Vacation" />        <input type="text" name="year" value="2011" />        <input type="submit" label="Submit" dojoType="dijit.form.Button" />    </fieldset></form>

The result of the above Code is as follows:

We need to repeat that if you do not use the plug-in, you need to implement the real file upload part by yourself.

Although the previous example can upload multiple files, there is no visual interface to tell you which files you have selected. To this end, Dojo also provides the help control dojox. Form. uploader. filelist. This help control can be bound to a dojox. form. the Uploader control automatically detects which files are selected, removed, uploaded, and displayed on the interface in real time. When Ajax is used for upload, the control also provides a built-in progress bar to display the upload progress.

<form method="post" action="UploadFile.php" id="myForm"enctype="multipart/form-data" >    <fieldset>        <legend>Form Post Test</legend>        <input name="uploadedfile" multiple="true" type="file" id="uploader"        dojoType="dojox.form.Uploader" label="Select Some Files" >        <input type="text" name="album" value="Summer Vacation" />        <input type="text" name="year" value="2011" />        <input type="submit" label="Submit" dojoType="dijit.form.Button" />        <div id="files" dojoType="dojox.form.uploader.FileList"        uploaderId="uploader"></div>    </fieldset></form>

! Note: filelist has a custom property pointing to the Uploader control to be bound, as shown in 11 lines in the above Code.

The result is as follows:

Plug-ins

Uploader has a plug-in that can be used to process Ajax uploads. The HTML5 plug-in uploads files using the new file input type in the gecko (Firefox) and WebKit (Safari, Chrome) browsers. In IE, you have two options: IFRAME plug-in or flash plug-in. These two plug-ins have nothing new, essentially they reuse the code in the previous fileuploader and simplify it.

IFRAME and flash plug-ins extend the HTML5 plug-in, so you do not need to import both in your project. As you think, only when you are developing a project that is not compatible with IE (You are so lucky !) To use the HTML5 plug-in separately.

In the previous example, the page information is transmitted to uploadfile. php through post when the page is submitted. To use Ajax, you only need to import one of IFRAME and flash plug-ins:

dojo.require("dojox.form.uploader.plugins.Flash");

If you do not want to use flash in IE, you can use the IFRAME plug-in:

dojo.require("dojox.form.uploader.plugins.IFrame");

Wait a moment. The previous example uses a simple form and does not use any plug-ins. These plug-ins are used to run Ajax upload under IE, where is the so-called HTML5 plug-in?

As I mentioned earlier, the flash and IFRAME plug-ins have extended the HTML5 plug-ins, so they are included in these two plug-ins and will automatically work. However, if you are sure that you will not make ie... or even ie9 browsers that do not support HTML 5 forms, you can directly use the HTML5 plug-in the following ways:

dojo.require("dojox.form.uploader.plugins.HTML5");

In either way, everything is automatically processed. When you press the "Submit" button, Uploader will block the onsubmit event, so the page will not jump, and then it will get URL Information from the action attribute, and collect data from the form to the server.

Conclusion

Thanks to several years of working experience in fileuploader, I can make this new uplaoder easy to use and fully functional. Previously, the work on fileuploader was difficult to maintain because Flash plug-ins did not perform well in browsers other than IE. Although fileuploader runs well, it often has some strange bugs when used with controls such as dijit tabs or dijit dialog. Now with the new HTML5 function, the new multi-file input in Firefox and WebKit can work effectively, and because it is both a native HTML element, there will be no rendering problems.