Home > Article > Web Front-end > How to make image upload preview component in H5
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('files').addEventListener('change', 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('<li><strong>', f.name, '</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate.toLocaleDateString(), '</li>');
} document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
document.getElementById('files').addEventListener('change', 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('<li><strong>', f.name, '</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate.toLocaleDateString(), '</li>');
}
} document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
document.getElementById('files').addEventListener('change', 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('list').innerHTML = '<ul>' + output.join('') + '</ul>';
} document.getElementById('files').addEventListener('change', 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('fileBox').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!
Related reading:
How to use s-xlsx to import and export Excel files
How to use JavaScript to save text data
File upload extension made with jQuery
The above is the detailed content of How to make image upload preview component in H5. For more information, please follow other related articles on the PHP Chinese website!