H5利用FileReader上传图片

比眉伴天荒 2022-07-11 09:22 234阅读 0赞

1. Html部分

<h2>文件上传演练</h2>
        <div id="result"> 
           
          <div id="inResult">
            <div id="inImgs"></div>
           <div id="imgInfo"></div>
          </div>
        </div>
        
        <input type="text" id="txtImgSrc" />
        <input type="button" id="btnRemove" />
        <button id="btnBrowse" onClick="onFile()">Browse...</button>
        <input type="file" id="file_input" />

2. JS部分

<script type="text/javascript">
        var result = document.getElementById("result");
        var input = document.getElementById("file_input");
    	var inResult = document.getElementById('inResult');
        
        if(typeof FileReader === 'undefined'){
            result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
            input.setAttribute('disabled','disabled');
        }else{
            input.addEventListener('change',readFile,false);
        }
       function onFile(){
    	   document.getElementById('file_input').click(); //打开<input type="file" id="file_input" />
    	   }             
                    
       function readFile(){
            var file = this.files[0];
    		var fsize = parseInt((file.size)/1024); //计算图片大小，默认是B，转换成KB
            if(!/image\/\w+/.test(file.type)){
                alert("请确保文件为图像类型");
                return false;
            }
            var reader = new FileReader();
            reader.readAsDataURL(file);
            
            reader.onload = function(e){
                //alert(this.result);
                inImgs.innerHTML = '<img src="'+this.result+'" alt="" width="198px" height="250px" id="img"/>'; //显示图片
    			var arr = input.value.split('\\'); //分割图片路径
    			document.getElementById('result').style.display="block";
    			document.getElementById('txtImgSrc').value = arr[arr.length-1]; //取数组最后部分 - 图片名字.jpg
    			document.getElementById('imgInfo').innerHTML = arr[arr.length-1]+"<br/>("+fsize+"kb)"; //显示图片名字加图片大小
    		
            }
        }
    </script>

3.图片测试

![Center][]

[Center]: /images/20220711/2b4f7b83921a41708c7cf6d62504820e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，234人围观）

还没有评论，来说两句吧...

相关阅读

相关 h5图片压缩上传

1、图片上传过慢，图片进行压缩上传 ![1021765-20190706163117700-599513873.png][] <div class="form-it

偏执的太偏执、/ 2023年08月17日 15:47/ 0 赞/ 94 阅读

相关 H5利用FileReader上传图片

1. Html部分 <h2>文件上传演练</h2> <div id="result">

比眉伴天荒/ 2022年07月11日 09:22/ 0 赞/ 235 阅读

相关图片预览新特性 h5 FileReader

图片预览新特性 h5 FileReader <!DOCTYPE html> <html lang="en"> <head> <meta

红太狼/ 2022年05月12日 01:58/ 0 赞/ 248 阅读

相关 [HTML5] FileReader 上传文件读取

new FileReader(); function upLoadImg(){ var file = document.getElementById('u

傷城~/ 2022年05月08日 07:46/ 0 赞/ 169 阅读

相关 h5多图片上传

做了一个h5多图片上传只要了解了基本原理，那就很好理解了，可以看看注释或者在网上找找原理 <!doctype html> <html>

迷南。/ 2022年04月12日 02:28/ 0 赞/ 202 阅读

相关 H5中，FileReader使用

FileReader允许web应用程序异步读取存储在用户计算机上的文件的内容。使用File 或 Bolb 对象指定要读取的文件或数据。 file对象可以是来自<input

港控/mmm°/ 2022年04月08日 11:43/ 0 赞/ 249 阅读

相关 H5拍照、选择图片上传组件核心

背景前段时间项目重构，改成SSR的项目，但之前用的图片选择上传组件不支持SSR（server-side-render）。遂进行了调研，发现很多的工具。但有的太大，有的使

绝地灬酷狼/ 2022年03月30日 14:18/ 0 赞/ 271 阅读

相关移动端H5实现图片上传

效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

雨点打透心脏的1/2处/ 2022年01月25日 22:27/ 0 赞/ 1544 阅读

相关 uni-app h5 上传图片压缩图片

由于uni-app h5 不支持sizeType，如果需要压缩图片就只能自己去实现了。 1. 选择图片： uni.chooseImage({ co

谁践踏了优雅/ 2021年11月05日 14:58/ 0 赞/ 1435 阅读

相关 FileReader上传多张图片

使用Promise实现同步处理 <div> <input type="file" accept="image/" @change="setImage

客官°小女子只卖身不卖艺/ 2021年06月24日 16:10/ 0 赞/ 578 阅读