Shulou(Shulou.com)06/03 Report--

HTML5 form tags liberate form verification and increase the use of file upload and integrated drag and drop. I believe many inexperienced people are at a loss about this. Therefore, this article summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

Something related to form in HTML

New attribute

Personal understanding

Form

Before html5, dependent elements in the form needed to be placed in tags. Now you can specify form tags for tags.

Comments: this feature solves some of the problems we encounter in practice, such as when iframe simulates asynchronous picture upload, it is necessary to write the picture outside form.

Formaction

Formmethod

This property is used for buttons (submit) so that the form submission page can be controlled by buttons

Formmethod specifies how each button is submitted

Placehoder

This property is very useful for displaying prompts in text boxes, a very useful attribute

List

The list attribute needs to be used with datalist, which is equivalent to a text box, simulates select, and is a very suitable attribute.

Autofocus

Used for text boxes to actively get focus, something useful

New input attribute, free verification, poor support for browsers

Tel

For telephones

Url

Verify url

Email

Verify mailbox

Date/time

Date class verification, there will be a date selection plug-in.

Number

Can only be numbers.

Range

Control numeric range

Color

Color picker, good stuff.

HTML5 has added a lot of attributes related to form, to be honest, these things are heartfelt! To a large extent:

Fully liberate form validation

If you don't think about compatibility, the old man would like to throw himself into it immediately, but when you think about compatibility, you will have a headache!

Because originally very good things, but because of historical reasons, but will increase our workload!

He seems to be right and actually right to do the right thing at the wrong time. But you will find that he is wrong.

Enhance page elements

Project

Personal understanding

Figure/figcaption

It is said that the independent content of the page has no effect after removal, and no use has been found for the time being.

Details

This tag is a bit interesting and is used to replace the unfold function of the element in js.

The latest ff does not support. Personally, since the tag is provided, it should provide an attribute to indicate whether to expand up or down or left or right.

Mark

Highlight, seriously semantic

Progress

Losers, you can bid farewell to gif images, and do not need the percentage of div simulation, the same progress bar as the windows area appears, asynchronous file upload is more perfect!

Improved ol

The old man has never used this master.

……

The above elements are optional, so there is no need to repeat them. Next, the star object of this article takes the stage:

File API

FileList and file objects:

In html4, the file tag allows you to select only one file, but in html5, after setting the multiple attribute on the file tag, you can select multiple files!

On the other hand, the selection will form the filelist object here, that is, a list of objects made up of file, which is simply an file array.

The file object has 2 attributes, name represents the file name (excluding the path), and lastModifiedDate represents the last modification time

In fact, when we operate file in html4, we can get a lot of local attributes, such as file size, but the evil ie does not support it, and it does not improve until after ie9.

So I want the client to prompt the students whose file upload is too large to give up.

Blob object

Represents the binary raw data and provides a slice method to access the raw data inside the byte; size represents the byte length of the blob object, type represents its mime type, and an empty string is returned if the type is unknown.

Come on, do a simple experiment:

The code is as follows:

About File

$(document) .ready (function () {

$('# wl') .click (function () {

Var f = $('# file') [0]

Var s =''

});

});

File upload

After we select the image in ff, submit it and set a breakpoint to see:

The protagonist of file enters the stage, and that's him. Let's output its attributes and have a look:

You really have everything! With this attribute, you can do a lot of things, but. Let's take a look at ie7, 8:

Ladies and gentlemen, I don't have this attribute at all, so everything is perfect.

In other words, I find it painful to debug ie browsers. Do you have any good ie development plug-ins, just like the plug-ins that come with ff's firebug,google?

FIleReader interface

Filereader interface, you can read files into memory, with this thing we can be very comfortable to do picture preview, but its public is more than that.

There are four methods for filereader:

ReadAsBinaryString reads the file as binary code-- usually we pass the data to the back end

ReadAsText reads the file as text-- reads the text content

ReadAsURL reads files as DataURL--, usually small files, pictures, or html

Abort interrupts reading because the file is too large and the waiting time is very long.

Filereader interface event:

Onabort read interrupt trigger

Onerror read failed to trigger

Triggered when onloadstart starts reading

Onprogress reading

Triggered when onload read is successful

Triggered after an onloadend read is completed, regardless of success or failure

We can't just talk without practice. let's do a little experiment here:

The code is as follows:

I'm a little experiment.

$(document) .ready (function () {

Var bt = $('# wl')

Var file = $('# file')

Var type = $('# type')

Var result = $('# result')

Var func = {}

Func.readAsDataURL = function (file) {

/ / verify whether it is a picture

If (! / image\ / w+/.test (file.type)) {

Alert ('non-picture format')

Return false

}

Var reader = new FileReader ()

Reader.readAsDataURL (file)

Reader.onload = function (e) {

Result.html ('

')

}

}

Func.readAsBinaryString = function (file) {

Var reader = new FileReader ()

Reader.readAsBinaryString (file)

Reader.onload = function (e) {

Result.html (this.result)

}

}

Func.readAsText = function (file) {

Var reader = new FileReader ()

Reader.readAsText (file)

Reader.onload = function (e) {

Result.html (this.result)

}

}

Bt.click (function () {

If (func [type.val ()] & & typeof func [type.val ()] = 'function') {

Func [type.val ()] (file [0] .files [0])

}

});

});

ReadAsDataURL

ReadAsBinaryString

ReadAsText

Read a file

Try running it with the latest browser!

Let's make another judgment and look at the sequence of events:

Reader.onload = function (e) {

Alert ('onload')

}

Reader.onprogress = function (e) {

Alert ('onprogress')

}

Reader.onerror = function (e) {

Alert ('onerror')

}

Reader.onloadstart = function (e) {

Alert ('onloadstart')

}

Reader.onloaded = function (e) {

Alert ('onloaded')

}

Here is the specific application:

The code is as follows:

Simple picture upload

Body {font-size: 14px;}

.image _ upload {margin:10px; border: 1px solid # E0E0E0; text-align: center; padding:5px; display: inline-block; position: relative;}

.image _ upload img {max-height: 150px; max-width: 150px;}

.image _ upload .rate {position: absolute; top: 6px; left: 6px; padding: 05px; color: White; background: black; border-radius: 5px; filter:alpha (opacity=60);-moz-opacity:0.6;-khtml-opacity: 0.6; opacity:0.6;}

.image _ upload .delete {background: url ("images/del.png") no-repeat scroll 0 0 transparent; cursor: pointer; height: 16px; position: absolute; right:-6px; top:-6px; width: 16px;}

$(document) .ready (function () {

Var j_bt_sub = $('# submitForm')

J_form = $('# form')

J_state = $('# upState')

J_file = $('# files')

Var is_support = true; / / to determine whether advanced features are supported, and if filereader and file are not supported after testing

If (typeof FileReader = = 'undefined') is_support = false

J_file.change (function () {

Var file = j_file.get (0)

If (! file.files [0]) is_support = false

/ / browsers that support advanced features

If (is_support) {

Files = file.files

For (var k = 0, len = files.length; k

< len; k++) { var file = files[k]; var reader = new FileReader(); reader.readAsDataURL(file); (function (k) { reader.onloadend = function (e) { if (reader.error) { alert(reader.error); } else { var up = $(''); var img = $('

')

Var rate = $('0%')

Var del = $('')

Up.append (img)

Up.append (rate)

Up.append (del)

Del.click (function () {

$(this). Parent (). Remove ()

});

J_state.append (up)

}

}

}) (k)

} / / for

} else {

/ / use the traditional way if it is not supported

}

});

/ / smooth fallback should be supported here, which will be considered later.

J_bt_sub.click (function (e) {

If (is_support) {

Var file = j_file.get (0)

Files = file.files

For (var k = 0, len = files.length; k < len; knot +) {

Var file = files [k]

Upload (file, k)

}

}

});

Function upload (file, k) {

Var up = $('# up_' + k)

Var img = $('# img_' + k)

Var rate = $('# rate_' + k)

Var del = $('# del_' + k)

Var fd = new FormData ()

Fd.append ('upload', file)

Var xhr = new XMLHttpRequest ()

Xhr.upload.addEventListener ('progress', function (e) {

Var percentComplete = Math.round ((e.loaded) * 100 / e.total)

Rate.html (percentComplete.toString () +'%')

}, false)

/ / File upload succeeded or failed

Xhr.onreadystatechange = function (e) {

If (xhr.readyState = = 4) {

If (xhr.status = = 200) {

Rate.html ('100%')

Var url = xhr.responseText

Img.attr ('src', url)

Var s =''

}

}

}

Xhr.open ("POST", "fileUpload.ashx")

/ / send

Xhr.send (fd)

}

});

Upload pictures

Actually, I wrote a drag-and-drop plug-in in jquery before dragging and dropping API.

Some things encountered at work [pop-up window] [drag and drop] [asynchronous file upload]

But it's better to integrate it into HTML5! Let's take a look at this thing now. And its power is that it doesn't just drag in the browser, which is great (drag pictures to upload)

Html5 default to pictures, links can be dragged and dropped, other elements need to be set draggable= "true" to drag and drop, it is not too late, the old man immediately to try.

The code is as follows:

An example of drag and drop

Please drag and drop

_ document.ondragover = function (e) {

E.preventDefault ()

}

_ document.ondrop = function (e) {

E.preventDefault ()

}

Var source = document.getElementById ('dragme')

Var dest = document.getElementById ('text')

Source.addEventListener ('dragstart', function (e) {

Var dt = e.dataTransfer

Dt.setData ('text/plain',' Hello'+ new Date ())

}, false)

Dest.addEventListener ('dragend', function (e) {

E.preventDefault ()

}, false)

Dest.addEventListener ('drop', function (e) {

Var dt = e.dataTransfer

Var text = dt.getData ('text/plain')

DOS [XSS _ clean] + = text

E.stopPropagation ()

E.preventDefault ()

Return false

}, false)

When you drag and drop, you must remember to prevent the default behavior of the page, otherwise a new window will open, of which the following are the key points:

1 drag and drop can use DataTransfer to pass data, which is very useful because when you drag the target element, you may pass through other elements, which we can use to pass information

API:

When dragstart is dragged and dropped elements start to drag and drop

Drag is dragged and dropped during element drag-and-drop

When the element over which the mouse is passed during the dragenter drag-and-drop process is dragged and dropped, the element begins to enter this element

The elements that the mouse passes over during dragover drag and drop move within this element

The element that you mouse over during drageleave drag and drop leaves this element.

The target element of the drop drag and drop the element dragged into this element

End of dragend drag-and-drop object

In fact, there is a problem here, I did not go in-depth study from the beginning to drag through a variety of elements will produce Shenma situation, this can be used as the focus of the second learning object.

Html5 documents and forms to do more exquisite, personal feel more useful than the layout of a few new tags, tomorrow to learn canvas, although do not understand, although I have seen, but still feel very powerful!

After reading the above, have you mastered the method of liberating form validation and adding file upload and integrated drag-and-drop methods in the HTML5 form tag? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.