Blog content

— All types of input

— Introduce the Accept and multiple attributes of input

— INPUT Event listener

— Change the INPUT file upload CSS style

— Upload the image file to obtain the image address

— Deletes the uploaded file

— Various file types

introduce

Input All types

How many types of input boxes are there? There are more than 20 types of input boxes

An overview

The common types recognized by most browsers are: Text, password, number, button, reset, submit, hidden, radio, checkbox, file, image, color, range, date, month, week, time, datetime-loca L.

There are other types: tel, email, URL, datetime, search. Some browsers of these types do not support recognition or validation.

Text Indicates a text box of type

<input type="text"></input>
Copy the code

Note that == : The default text field is when the input field is not typed

Password Indicates the password

<input type="password"></input>
Copy the code

Number Indicates the number box

<input type="number"></input>
Copy the code

Button type button

<input type="button"></input>
Copy the code

Reset Reset button

<input type="reset"></input>
Copy the code

**== Note that == : The reset type is usually used in the ** form

Submit type submit button

<input type="submit"></input>
Copy the code

Note that the == : submit type is typically used in form forms

Hidden Type hidden

<input type="hidden"></input>
Copy the code

Note: The hidden type hides the input, so you can’t see anything, and the hidden input box doesn’t take up space.

Radio type radio button

<input type="radio"></input>
Copy the code

Checkbox Check button

<input type="checkbox"></input>
Copy the code

Image type image

<input type="image" src=".. /.. /image/one.png"></input>
Copy the code

Color type Color

<input type="color"></input>
Copy the code

Range type slider

<input type="range"></input>
Copy the code

Date Type Date

<input type="date"></input>
Copy the code

Month Month of the type

<input type="month"></input>
Copy the code

Week week of type

<input type="week"></input>
Copy the code

Time Type Time

<input type="time"></input>
Copy the code

Datetime Time, day, month, year (UTC time)

<input type="datetime"></input>
Copy the code

== Note == : Datetime is not supported in Firefox or 360 browsers, and will be processed as text.

Datetime-local Time, day, month, year (local time)

<input type="datetime-local"></input>
Copy the code

Tel telephone

<input type="tel"></input>
Copy the code

== Note that == : This type is of no practical use to me

Email Address

<input type="email"></input>
Copy the code

== Note == : Firefox has verification for the email type, while browser 360 does not.

= = = = = = =

All right, here’s the focus of the day

The file type

<input type="file" accept multiple></input>
Copy the code

< input > type An input element of type File that allows the user to select one or more elements to upload to the server by submitting a form, or to operate on the file through Javascript’s File Api.

attribute

The accept attribute

This property indicates the types of files that are acceptable to the server and can limit the number of files your phone can select. If multiple files are limited, separate them with commas.

The Accept attribute accepts a comma-separated string of MIME type, such as:

  • Accept =”image/ PNG “or accept=”.png” – Only PNG images are accepted.
  • Accept =”image/ PNG, image/jpeg” or accept=”.png,.jpg,.jpeg” – PNG/ jpeg files.
  • Accept =”image/*” — Accepts any image file type.
  • Accept =”audio/*” — Accepts any audio file type.
  • Accept =”video/*” — Accepts any audio and video file type.
  • The accept = “. Doc,. Docx,. XML, application/msword, application/VND. Openxmlformats – officedocument. Wordprocessingml. Document “- Accept any MS Doc file type.

Multiple attribute

The multiple attribute indicates whether multiple files can be selected, in which case its value is the virtual path of the first file.

<input id="fileId2" type="file" multiple="multiple" name="file" />
Copy the code

Event listeners

By listening for the change event on the input element, you can get information about the file name, upload time, file size, etc. FileReader can also convert image files to Base64 encoding to preview images.

In the function monitored by the change event, event.target.files is the picture information uploaded by the user.

<input style="display: none" 
	id="file" ref="files" 
	type="file" 
	@change="uploadData(e)" 
	accept=".doc,.docx,.pdf,.ai,.psd" 
	multiple="multiple" />
Copy the code
 Here is the Vue3.0 syntax used
        const uploadData = (e) = > {
            var e = window.event || e  // change the data obtained by the event
            if (e.target.files[0].size > 500 * 1024 * 1024) { // Limit file upload size
                ElMessage.error('Upload a single file size cannot exceed 500M! ')}else {
                state.ruleForm.documentFile = e.target.files[0]  // File assignment}}Copy the code

CSS style changes

The native input file is just plain ugly, plus it’s hard to modify the CSS. So it’s used in other ways.

Vue3.0 sets the input file style display: None; Hide, or set opacity to 0, use a nice button instead of clicking, and then set ref in the input to retrieve the data. Get ref in js and then link to the set style click event

The HTML code

<el-button  @click="goFile" size="small" type="primary">
      <i class="el-icon-upload2"></i>Upload a file</el-button>
<input style="display: none" 
	id="file" ref="files" 
	type="file" 
	@change="uploadData(e)" 
	accept=".doc,.docx,.pdf,.ai,.psd" 
	multiple="multiple" />
Copy the code

Js code

// Get the ref in vue
import{toRefs, ref}from 'vue'

export default {
    name: 'FileData'.components: {},
    setup () {
        const state = reactive({
         loading: false.pageInfo: {
                page: 1.rows: 10.total: 0,}})const files = ref(null) // get the ref that connects to the HTML
        // Here is the click event with the HTML code
        const goFile = () = > {
            files.value.click()
        }
        // Finally return out
        return {
            ...toRefs(state),
            goFile,
            files,
        }
Copy the code

The effect

There are many ways to write vue2.0. Here’s an example: Associate the input file control with the label element and then hide the input. Same thing. You just don’t have to call the method.

<label class="ui_button ui_button_primary" for="xFile"> Upload file </label><form><input type="file" id="xFile" style="display:none;"></form>
Copy the code

Upload the image file to obtain the image address

The HTML code

 <input style="display: none" 
 	id="fileImg" ref="filesImg" type="file" 
 	@change="uploadImg(e)" 
	accept=".jpg,.png,.gif,.bmp" 
	multiple="multiple" />
Copy the code

Js code

  // Get the image
        const uploadImg = (e) = > {
            var e = window.event || e // change the data obtained by the event
            if (e.target.files[0].size > 2 * 1024 * 1024) { // Limit the size of the uploaded image file
                ElMessage.error('Upload single cover size cannot exceed 2M! ')}else {
                state.ruleForm.coverFile = e.target.files[0] 
                // Get the image address
                var file = e.target.files[0]
                var reader = new FileReader()
                reader.readAsDataURL(file)
                reader.onload = function (result) {
                    state.coverFile = result.target.result // Image addresses are previewable in Base64 format}}}Copy the code

Input Type File Deletes the content after uploading the file

Last time I wrote how to upload a file, after the successful upload, there will be some problems.

When I open the uploaded file and don’t click upload, then close the popover and continue uploading the same file. In order to meet the requirements of the product group, we usually have some style overlays.

But there are certain problems. In that case, the overwrite style is empty when I open it again.

In fact, I was puzzled at first, but finally I thought about it, it should be caused by the fact that the content of the file was not cleared.

Look online for ways to clear it out.

In both cases, the value of the obtained files is directly assigned to the null value. However, this method treats the symptoms rather than the root cause, and cannot solve the problem by thoroughly cleaning the files

After struggling for two hours, the solution to clean up the file was to add an external form form and then empty the contents of the form form.

As shown above, I add a form tag outside the input tag with the id DataForm

Our product requirement upload file is in a popup box.

So every time I open the popup, I just have to clear it out.

Specific code

document.getElementById('DataForm') &&document.getElementById('DataForm').reset();
Copy the code

Various file types

*.3gpp    audio/3gpp, video/3gpp
*.ac3    audio/ac3
*.asf       allpication/vnd.ms-asf
*.au           audio/basic
*.css           text/css
*.csv           text/csv
*.doc    application/msword    
*.dot    application/msword    
*.dtd    application/xml-dtd    
*.dwg    image/vnd.dwg    
*.dxf      image/vnd.dxf
*.gif            image/gif    
*.htm    text/html    
*.html    text/html    
*.jp2            image/jp2    
*.jpe       image/jpeg
*.jpeg    image/jpeg
*.jpg          image/jpeg    
*.js       text/javascript, application/javascript    
*.json    application/json    
*.mp2    audio/mpeg, video/mpeg    
*.mp3    audio/mpeg    
*.mp4    audio/mp4, video/mp4    
*.mpeg    video/mpeg    
*.mpg    video/mpeg    
*.mpp    application/vnd.ms-project    
*.ogg    application/ogg, audio/ogg    
*.pdf    application/pdf    
*.png    image/png    
*.pot    application/vnd.ms-powerpoint    
*.pps    application/vnd.ms-powerpoint    
*.ppt    application/vnd.ms-powerpoint    
*.rtf            application/rtf, text/rtf    
*.svf           image/vnd.svf    
*.tif         image/tiff    
*.tiff       image/tiff    
*.txt           text/plain    
*.wdb    application/vnd.ms-works    
*.wps    application/vnd.ms-works    
*.xhtml    application/xhtml+xml    
*.xlc      application/vnd.ms-excel    
*.xlm    application/vnd.ms-excel    
*.xls           application/vnd.ms-excel    
*.xlt      application/vnd.ms-excel    
*.xlw      application/vnd.ms-excel    
*.xml    text/xml, application/xml    
*.zip            aplication/zip    
*.xlsx     application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

Copy the code

Looking forward to the third consecutive!!