`

HTML5 FileReader用法：图片预览、文本文件预览等

    博客分类：
  • JS
HTML5JS 
阅读更多 
<!DOCTYPE html>
<html>
<head lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title></title>

    </head>
    <body>
    <h3>文本选择预览</h3>
        <input type="file" id="file" onchange="readAsText(this.files)"/>
        <div id="fileContent" style="background-color: #e3ceab;"></div>
        <script>
            function  readAsText(files)
            {
                if(files.length)
                {
                    var file = files[0];
                    var reader = new FileReader();
                    reader.onload = function(){
                        document.getElementById("fileContent").innerHTML = this.result;
                    };
                    reader.readAsText(file);
                }
            }
            function handleFiles(files){
                for (var i = 0; i < files.length; i++) {
                    var file = files[i];
                    var imageType = /image.*/;

                    if (!file.type.match(imageType)) {
                        continue;
                    }

                    var img = document.createElement("img");
                    img.classList.add("obj");
                    img.file = file;
                    preview.appendChild(img);

                    var reader = new FileReader();
                    reader.onload = (function(aImg){
                        return function(e){
                            aImg.src = e.target.result;
                        };
                    })(img);
                    reader.readAsDataURL(file);
                }
            }
        </script>
        <hr/>
        <h3>文本拖拽预览</h3>
        <div id="dropbox" style="width: 100%;min-height: 200px;background-color: #b2dba1;">
            <p>Drop Here</p>
            <div id="fileContent2" style="background-color: #a8ff60;"></div>
            <script>
                var dropbox = document.getElementById("dropbox");
                dropbox.addEventListener("dragenter", dragenter, false);
                dropbox.addEventListener("dragover", dragover, false);
                dropbox.addEventListener("drop", drop, false);

                function dragenter(e) {
                    e.stopPropagation();
                    e.preventDefault();
                }

                function dragover(e) {
                    e.stopPropagation();
                    e.preventDefault();
                }

                function drop(e) {
                    e.stopPropagation();
                    e.preventDefault();
                    var dt = e.dataTransfer;
                    var files = dt.files;
                    if(files.length){
                        var file = files[0];
                        var reader = new FileReader();
                        reader.onload = function()
                        {
                            document.getElementById("fileContent2").innerHTML = this.result;
                        };
                        reader.readAsText(file);
                    }
                }

            </script>
        </div>
        <hr/>
        <h3>图片预览</h3>
        <input type="file" multiple onchange="handleFiles(this.files)"/>
        <div id="preview"></div>
        <script>
            var preview = document.querySelector("#preview");
            function handleFiles(files){
                console.info(files);
                for (var i = 0; i < files.length; i++) {
                    var file = files[i];
                    var imageType = /image.*/;

                    if (!file.type.match(imageType)) {
                        continue;
                    }

                    var img = document.createElement("img");
                    img.classList.add("obj");
                    img.file = file;
                    preview.appendChild(img);

                    var reader = new FileReader();
                    reader.onload = (function(aImg){
                        return function(e){
                            aImg.src = e.target.result;
                        };
                    })(img);
                    reader.readAsDataURL(file);
                }
            }
        </script>
    </body>
</html>

 

分享到：
| nodejs实现web服务实例
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Html5FileReader文档

    HTML5 FileReader API 提供了读取本地文件的方法，这些方法包括读取文件为文本、二进制字符串、DataURL（Base64编码的字符串）等。以下是一些核心的API方法： 1. `readAsText(file, encoding)`: 这个方法用于读取...

    Html5FileReader文档.docx

    FileReader 接口的使用场景非常广泛，如上传文件、预览图片、读取文件内容等。下面我们将详细介绍 FileReader 接口的使用方法和事件模型。 FileReader 接口的方法 FileReader 接口提供了四个方法： 1. ...

    图片上传(图片预览+文件类型验证)

    `FileReader`对象可以读取用户选择的文件，并通过`readAsDataURL()`方法将其转换为Base64编码的URL，然后将该URL赋值给`&lt;img&gt;`标签的`src`属性，从而实现图片预览。 2. **文件类型验证**： 验证用户上传的文件类型...

    基于bootstrap.3的文件上传效果, 可拖拽上传、预览的HTML5文件上传插件.zip

    标题中的“基于Bootstrap.3的文件上传效果, 可拖拽上传、预览的HTML5文件上传插件.zip”指的是一个使用Bootstrap 3框架和HTML5技术实现的高级文件上传功能。这个插件允许用户通过拖放操作上传文件，并且在上传前可以...

    html网页js打开文件对话框带预览框.JS实现文件上传前先本地预览功能

    `FileReader`提供了异步读取文件内容的方法，如`readAsDataURL`，它会将文件内容读取为一个Base64编码的数据URL，这可以直接用作`&lt;img&gt;`标签的`src`属性，从而实现图片预览： ```javascript function previewFile...

    html5实现的文件上传预览功能

    对于非图片类型的文件，可能需要提供不同的预览方式，比如文本文件可以显示部分文本内容，或者提供下载链接。 此外，HTML5还提供了FormData对象，它可以将文件和其他表单数据打包，通过XMLHttpRequest发送到服务器...

    javascript HTML5文件上传FileReader API_.docx

    通过使用FileReader API，开发者可以在客户端进行诸如文件类型验证、大小限制、预览等操作，避免了不必要的服务器负载，提高了响应速度，同时也增强了安全性。例如，你可以检查文件类型是否符合预期，或者文件大小...

    基于FileReader多图片上传特效源码.zip

    2. **FileReader对象**：创建FileReader对象后，可以使用它的方法读取FileList中的文件。主要有`readAsDataURL()`、`readAsText()`、`readAsArrayBuffer()`等，这里我们关注`readAsDataURL()`，它会读取文件内容并将...

    HTML5多文件预览上传.zip

    4. **FileReader接口**：FileReader提供了读取文件的方法，如`readAsDataURL()`，`readAsText()`等。当用户选择文件后，可以通过这个接口将文件内容转化为数据URL或文本，实现预览效果。 5. **跨域资源共享（CORS）...

    图片不保存预览 html+js

    总结来说，利用 HTML 和 JavaScript，我们可以通过监听文件选择事件，使用 `FileReader` API 读取文件内容并将其转化为数据 URL，从而实现在不保存图片的情况下进行图片预览。这种方法在网页上传图片、在线编辑图片...

    文件上传预览

    对于图片文件，我们通常使用`FileReader`的`readAsDataURL(file)`方法读取文件为data URL，这个URL可以直接用作`&lt;img&gt;`标签的`src`属性，展示图片预览。当`onload`事件触发时，表明读取完成，可以将生成的data URL...

    JavaSctit 利用FileReader和滤镜上传图片预览功能

    JavaSctit（可能是JavaScript的误拼）利用FileReader和滤镜实现的上传图片预览功能，是Web应用中常用的一种技术，它允许用户在上传图片前先进行本地预览，提高了用户体验。FileReader对象是HTML5引入的一个关键API，...

    JavaScript使用FileReader实现图片上传预览效果

    总的来说，FileReader API为JavaScript提供了强大的本地文件处理能力，使得在Web应用中实现诸如图片预览、文件读取等功能变得更加便捷。通过合理利用这些API，开发者可以创建更加丰富、交互性更强的Web应用。

    JAVA实现文件预览功能

    本篇文章将深入探讨如何使用Java来实现这一功能，特别是针对文本、图片以及PDF等常见类型的文件。 一、文本文件预览 对于文本文件（如.txt、.csv等），预览相对简单。Java提供了一系列内置的类，如`BufferedReader...

    javascript结合fileReader 实现上传图片.docx

    - 对于不支持`FileReader`的旧版IE浏览器，使用`DXImageTransform.Microsoft.AlphaImageLoader`实现图片预览。 #### 五、总结 通过上述代码，我们可以实现一个基本的图片上传预览功能。需要注意的是，在实际项目...

    html5手机页面选择相册图片上传表单提交

    可以使用FileReader的`readAsDataURL`方法读取文件内容并将其转换为DataURL，然后设置为`&lt;img&gt;`元素的`src`属性： ```javascript function handleFileSelect(event) { const files = event.target.files; for ...

    图片预览小例子.rar

    为了实现更高级的图片预览功能，还可以使用Lightbox插件，如Fancybox或Magnific Popup，它们提供了更丰富的用户体验，包括淡入淡出效果、全屏查看、图片导航箭头等。这些插件通常基于jQuery，通过引入相应的...

    zyUpload文件上传预览示例

    通过FileReader API的`readAsDataURL()`方法，可以将文件内容转换为数据URL，然后在页面上以`&lt;img&gt;`或`&lt;iframe&gt;`展示预览效果。 8. **文件删除**： 文件删除功能通常需要一个用户界面元素（如删除按钮），与...

    JS中FileReader类实现文件上传及时预览功能

    这段代码实现了一个简单的文件选择器和图片预览功能。用户通过点击选择文件后，文件内容被读取为DataURL，并显示在页面上。这是一个非常实用的前端功能实现，尤其在网站需要用户上传个人头像或者产品图片时。 在...

Magicbox
Global site tag (gtag.js) - Google Analytics