Home >Web Front-end >JS Tutorial >How to make image upload preview component in H5

How to make image upload preview component in H5

php中世界最好的语言Original: 2018-03-10 16:19:422065browse

This time I will show you how to make an image upload preview component in H5. What are the precautions for making an image upload preview component in H5? The following is a practical case, let’s take a look.

My development environment is Windows 10 and the test browsers are Chrome and Firefox
If you encounter incompatible browsers, you can try to upgrade the browser or Google it (~￣▽￣)~

1 .Single selection and multiple selection of files

By default, 714779e36f6b8fe3da1575391740131b belongs to single selection. Adding the multiple attribute allows multiple selection of files

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <label>单选:<input type="file"/></label>
        <label>多选:<input type="file" multiple="multiple"/></label>
    </body></html>

2 .Get the file object

Open the browser console and select the file to see the console changes

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body> 
        <label>可以这样:<input type="file" multiple="multiple" onchange="getFilesInfo(this.files)"/></label>
        <script>
            function getFilesInfo(f){                console.log(f);
            }        </script>
        <label>也可以这样:<input id="files" type="file" multiple="multiple" /></label>
        <script>
            function getFilesInfo2(evt) {                var files = evt.target.files; 
                console.log(files);
            }            document.getElementById(&#39;files&#39;).addEventListener(&#39;change&#39;, getFilesInfo2, false);        </script>
        <label>还可以这样:<input id="fileInput" type="file" multiple="multiple" onchange="getFilesInfo3()"/></label>
        <script>
            function getFilesInfo3(){                var files=document.getElementById("fileInput").files;                console.log(files);
            }        </script>
    </body></html>

3. Common attributes

In the second step, we have already looked in the console When we get to the file, let’s expand it and see what common attributes there are.

Common attribute description:
name-file name
size-size
type-file type
lastModified-last Modification date

Come on, let’s try to output some information to the page

<!doctype html><html>
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
    </head>
    <body>
        <input type="file" id="files"  multiple />
        <output id="list"></output>
        <script>
            function handleFileSelect(evt) {                var files = evt.target.files; //如果你是单选那就直接evt.target.files[0]
                var output = []; 
                for(var i = 0, f; f = files[i]; i++) {
                    output.push(&#39;<li><strong>&#39;, f.name, &#39;</strong> (&#39;, f.type || &#39;n/a&#39;, &#39;) - &#39;,
                        f.size, &#39; bytes, last modified: &#39;,
                        f.lastModifiedDate.toLocaleDateString(), &#39;</li>&#39;);
                }                document.getElementById(&#39;list&#39;).innerHTML = &#39;<ul>&#39; + output.join(&#39;&#39;) + &#39;</ul>&#39;;
            } 
            document.getElementById(&#39;files&#39;).addEventListener(&#39;change&#39;, handleFileSelect, false);        </script>
    </body> </html>

4. Limit file size and file format

When it comes to uploading previews of images, it is not allowed The size and format of uploaded files will not be filtered.
Assume that we only allow jpg and png to be uploaded and the file size is within 2mb. It is very simple and only the file information can be judged.
If you don’t know the file you want to filter Type You can check the file type in the console and then copy and paste
Of course you can also set accept="image/*" in the input tag to only allow the input of image files

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h3>过滤出图片</h3>
        <input type="file" id="files"   multiple accept="image/*"  />
        <output id="list"></output> 
        <script>
            function handleFileSelect(evt) {                var files = evt.target.files;                var output = [];                for(var i = 0, f; f = files[i]; i++) {                    if(f.size<1024*1024*2&&(f.type=="image/png"||f.type=="image/jpeg")){//<===这里
                        output.push(&#39;<li><strong>&#39;, f.name, &#39;</strong> (&#39;, f.type || &#39;n/a&#39;, &#39;) - &#39;,
                        f.size, &#39; bytes, last modified: &#39;,
                        f.lastModifiedDate.toLocaleDateString(), &#39;</li>&#39;);
                    }
                }                document.getElementById(&#39;list&#39;).innerHTML = &#39;<ul>&#39; + output.join(&#39;&#39;) + &#39;</ul>&#39;;
            } 
            document.getElementById(&#39;files&#39;).addEventListener(&#39;change&#39;, handleFileSelect, false);        </script>
    </body> </html>

5. Preview example

Preview is implemented by dynamically creating img tags and binding ObjectURL to the src attribute of img tags
Example

<!DOCTYPE html><html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
       <h3>预览</h3>
       <input type="file" id="files"  multiple accept="image/*" />
       <output id="list"></output>  
       <script>
           function handleFileSelect(evt) {               var files = evt.target.files;               var output = [];               for(var i = 0, f; f = files[i]; i++) {                   if(f.size<1024*1024*2&&(f.type=="image/png"||f.type=="image/jpeg")){
                       output.push("![]("+URL.createObjectURL(f)+")"); 
                   }
               }               document.getElementById(&#39;list&#39;).innerHTML = &#39;<ul>&#39; + output.join(&#39;&#39;) + &#39;</ul>&#39;;
           }           document.getElementById(&#39;files&#39;).addEventListener(&#39;change&#39;, handleFileSelect, false);       </script>
   </body></html>

6. Single image upload preview example

Example

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h3>简单预览示例</h3>
        <label id="fileBox" style="border: 1px #ccc solid;display:block;width: 100px;height:100px;background-clip:border-box;background-origin:padding-box;background-size:cover">
            <input type="file"  hidden="hidden" style="display: none;" onchange="fileSelect(this.files)"/>
         </label>
        <script>
            function fileSelect(f) { 
                if(!f){                    return;
                }  
                f=f[0];                if(f.size<1024*1024*2&&(f.type=="image/png"||f.type=="image/jpeg")){                    document.getElementById(&#39;fileBox&#39;).style.backgroundImage="url(" + URL.createObjectURL(f)+ ")";
                } 
                
            }　        </script>
    </body> </html>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

How to make image upload preview component in H5

Related articles