The common scheme for uploading and previewing pictures and videos is to upload the file to the server first. After the server returns the address of the file, the address string is assigned to the SRC attribute of IMG or video to achieve the so-called file preview. It’s really just a “preview after upload” file, which is a waste of both the user’s time and a significant amount of traffic.

Recently I found that it is very easy to implement “preview before uploading”. There are two implementations: FileReader and url.createObjecturl.

A description of FileReader can be found here

The url.createObjecturl method can be explained and used here

The demo address

Directly on the code:


      
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>preview</title>
    <style>
        * {
            box-sizing: border-box;
        }
        .section {
            margin: 20px auto;
            width: 500px;
            border: 1px solid # 666;
            text-align: center;
        }
        .preview {
            width: 100%;
            margin-top: 10px;
            padding: 10px;
            min-height: 100px;
            background-color: # 999;
        }
        .preview img..preview video {
            width: 100%;
        }
    </style>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
    <div class="section">
        <p>Plan 1</p>
        <input class="upload" type="file" onchange=onUpload1(this.files[0])>
        <div class="preview preview1"></div>
    </div>

    <div class="section">
        <p>Scheme 2</p>
        <input class="upload" type="file" onchange=onUpload2(this.files[0])>
        <div class="preview preview2"></div>
    </div>
    <script>
        function onUpload1 (file) {
            var fr = new FileReader();
            fr.readAsDataURL(file);  // Read the file as a Data URL

            fr.onload = function(e) {
                var result = e.target.result;
                if (/image/g.test(file.type)) {
                    var img = $('<img src="' + result + '" >');
                    $('.preview1').html(' ').append(img);
                } else if (/video/g.test(file.type)) {
                    var vidoe = $('<video controls src="' + result + '" >');
                    $('.preview1').html(' ').append(vidoe); }}}function onUpload2 (file) {
            var blob = new Blob([file]), // Convert files to binary files
                url = URL.createObjectURL(blob); // Convert to url
            if (/image/g.test(file.type)) {
                var img = $('<img src="' + url + '" >');
                img[0].onload = function(e) {
                    URL.revokeObjectURL(this.src);  // Release the object created by createObjectURL
                }
                $('.preview2').html(' ').append(img);
            } else if (/video/g.test(file.type)) {
                var video = $('<video controls src="' + url + '" >');
                $('.preview2').html(' ').append(video);
                video[0].onload = function(e) {
                    URL.revokeObjectURL(this.src);  // Release the object created by createObjectURL}}}</script>
</body>
</html>Copy the code

The demo screenshot:

Plan 1 and 2 upload pictures

Solution 1 Upload videos

Solution 2 Upload videos

FileReader and url.createObjecturl both work perfectly for previewing images, but FileReader doesn’t work for uploading videos, and the browser crashes. The url.createObjecturl method, however, works perfectly.

The exact difference is not clear on the web, but the overall feeling is that url.createObjecturl performs better than FileReader. I hope I can correct my mistakes.

Another application for url.createObjecturl is available hereA few lines of code at the front simply implement the W3School code preview

Other articles, welcome correctionOther articles