精华内容
下载资源
问答
  • input file读取文件

    千次阅读 2018-12-20 11:25:24
    js读取 input file 文件的两种方式: <div id="localImag"> <img id="preview" src="" width="150" height="180" style="display:...

    js读取 input file 文件的两种方式:

    <div id="localImag">
        <img id="preview" src="" width="150" height="180" style="display: block; width: 150px; height: 180px;">
        <input type="file" name="img" id="docfile" style="width:150px;" onchange="setImagePreview();">
    </div>

    1.使用FileReader读取图片(转化为base64)

    function setImagePreview() {
            var docObj = document.getElementById("docfile");
            var imgObjPreview = document.getElementById("preview");
            console.log(docObj.files[0])
            if (docObj.files && docObj.files[0]) {
                var reader = new FileReader();
                reader.readAsDataURL(docObj.files[0]);//发起异步请求
                reader.onload = function(){
                    //读取完成后,数据保存在对象的result属性中
                    // console.log(this.result)
                    imgObjPreview.src=this.result
                }
            }
    }

    主要使用readAsDataURL去完成转换base64,如果是文档,也可以用readAsText(file,encoding)去读取。

    方法

    FileReader提供了如下方法:

    readAsArrayBuffer(file)按字节读取文件内容,结果用ArrayBuffer对象表示
    readAsBinaryString(file)按字节读取文件内容,结果为文件的二进制串
    readAsDataURL(file)读取文件内容,结果用data:url的字符串形式表示
    readAsText(file,encoding)按字符读取文件内容,结果用字符串形式表示
    abort()终止文件读取操作

    readAsDataURL和readAsText较为常用,这里只对这两者进行说明。


    2.使用 window.URL.createObjectURL  读取图片(转化为blod)(推荐)

    function setImagePreview() {
            var docObj = document.getElementById("docfile");
            var imgObjPreview = document.getElementById("preview");
            console.log(docObj.files[0])
            if (docObj.files && docObj.files[0]) {
                imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
            }
    }

    总结

    按照前辈们的说法,creatObjectURL可以有更好的性能,或许是浏览器自带接口的原因, 可以处理的更快。 

    而且最近做了一个需要上传图片预览的项目,用的最简单的input file上传,最开始想到的就是用filereader实现前端预览,很简单,见前面的第一段代码,在自己手机上测试,没问题。但在某些奇葩手机上,比如oppo 安卓4.3在我们app的webview内通过打开相册上传发现无法预览图片!但在该手机的微信,浏览器内上传均可以!所以推荐使用window.URL.createObjectURL

    最后如果需上传,可以使用form或者使用ajax上传,form表单提交比较简单,就不介绍。

    ajax提交的时候原理还是获取到obj.files[0]后。利用实例化的FormData 上传文件。如:

    let fileObj = this.$refs.fileObj.files[0]; // js 获取文件对象
     var formData = new FormData();
            formData.append('file', fileObj);
            axios({
              url: process.env.URL_PATH + '/mallSealApply/uploadSealApply',
              method: 'post',
              headers: {'Authorization': this.$store.state.token},
              data: formData
            })

     

    展开全文
  • input file读取图片

    千次阅读 2018-07-24 14:17:46
    file" class="ImageInput" accept="image/*" name="imagefiles"&gt; &lt;img src=""/&gt; 1.获取File对象 var fileinput = Document.getElementById...

    <input type="file" class="ImageInput" accept="image/*" name="imagefiles">

    <img  src=""/>

    1.获取File对象

    var fileinput = Document.getElementById('id');
    var File = fileinput.files[0];  //获取第一个File对象
    //当上传文件为多个时,通过循坏获取多个File对象
    var fileList = fileinput.files;
            for( var i = 0 ; i < fileList.length ; i++ ){
                console.log(fileList[i]);
            }
    File.name  //返回当前 File 对象所引用文件的名字,只读 
    File.size  //返回文件的大小,只读,单位为字节
    File.type  //返回文件类型,例如 PNG 图像是 "image/png",只读
    File.lastModifiedDate //返回当前文件的最后修改日期,如果无法获取到文件的最后修改日期,则使用当前日期来替代,只读
    
    //可以根据以上属性设置上传文件类型以及最大上传文件大小

    2.FileReader

    if (window.FileReader){    //检测浏览器是否支持
        var reader = new FileReader();  //构造FileReader对象
    }else{
        //不支持则只有使用其他图片预览方法
    }
    reader.readAsArrayBuffer(File);  //将文件读取为ArrayBuffer对象格式
    reader.readAsBinaryString(File); //将文件读取为二进制数据
    reader.readAsDataURL(File);   //将文件读取后返回其URL,适合图片预览
    reader.readAsText(File,encoding='UTF-8') //将文件读取为文本形式,可指定编码方式
    reader.abort()  //终止读取操作
    reader.onloadstart = function(){
        //文件开始读取时触发
    };
    
    reader.onprogress = function(event){
        //文件读取过程时定时触发
        //已读取文件大小: event.loaded
        //文件总大小: event.total
        //可利用以上两个参数和HTML的<progress>标签搭配,制作一个读取进度条
    };
    
    reader.onabort = function(){
        //当文件读取被中止时触发
    };
    
    reader.onerror = function(){
        //当读取操作发生错误时触发
    };
    
    reader.onload = function(){
        //当读取操作成功完成时触发
    };
    
    reader.onloadend = function(){
        //当读取操作完成时调用,不管是成功还是失败.该处理程序在onload或者onerror之后调用.
    };

    属性

    reader.error  //在读取文件时发生的错误. 只读
    
    reader.readyState  //表明FileReader对象的当前状态。包含以下三种状态,0:还没有加载任何数据;1:数据正在被加载;2:已完成全部的读取请求
    
    reader.result   //读取到的文件内容.这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的. 只读.

     3.Window.URL

    获取URL对象

    var URL = window.URL || window.webkitURL;

    创建图片URL

    var imageURL = URL.createObjectURL(File);
    //创建后即可直接使用该URL,赋值给<img>的src属性

    释放URL

    URL.revokeObjectURL(imageURL) 

    4.IE滤镜

    try
    {
        fileobj.select();
        fileobj.blur();
        var path = document.selection.createRange().text;
        var pic = document.getElementById("person_pic");   //获取img标签
        pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + path + "\")";    //滤镜预览图片
        pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';                 //设置img的src为base64编码的透明图片,要不会显示红xx
    }
    catch(e)
    {
        alert(e+"\n"+"如果错误为:Error:Automation 服务器不能创建对象;"+"\n"+"请按以下方法配置浏览器:"+"\n"+"请打开【Internet选项-安全-Internet-自定义级别-ActiveX控件和插件-对未标记为可安全执行脚本的ActiveX控件初始化并执行脚本(不安全)-点击启用-确定】");
    }

     实例代码:

    <script>
    	$('.ImageInput').on('change', function() {
    	var file = this.files[0]; //获取File对象
    	if(!/image\/\w+/.test(file.type)) {
    		alert("看清楚,这个需要图片!");
    		return false;
    	}
    	if(typeof FileReader != 'undefined') {
    		//创建读取文件的对象
    		var reader = new FileReader();
    		//创建文件读取相关的变量
    		var imgFile;
    		//正式读取文件
    		reader.readAsDataURL(file);
    		//为文件读取成功设置事件
    		var str = '';
    		reader.onload = function(e) {
    			imgFile = e.target.result;
    			console.log(imgFile);
    			$('img').attr('src', imgFile);
    
    			console.log(imgFile);
    
    		};
    	} else {
    		var URL = window.URL || window.webkitURL;
    		var imageURL = URL.createObjectURL(file);
    
    		$('img').attr('src', imageURL);
    
    		console.log(imgFile);
    
    	}
    
    }
    
    });
    </script>

     

     
     

    1.若想预览该图片,可以像demo中一样,直接把读取的文件的所有数据,包括数据头(就是控制台输出的所有数据,包括“data:image/jpeg;base64,”和后面的所有内容)一起写入一个<img>标签的src中。这样就可以看到<img>显示对应的图像。

        2.若想存入服务器端的文件中,需要把数据头(data:image/jpeg;base64,)去掉,并且根据“image/“之后的内容(如“jpeg、png……”)来判断图片文件的后缀,从而在服务器端生成对应后缀的文件,并写入除开数据头之外的所有数据。

    这里,我先给出一部分base64码中文件格式以及对应应该生成什么后缀的文件:

     

     

     

    展开全文
  • Groovy File 读取中文乱码

    千次阅读 2018-10-09 13:28:56
    new File(filename).eachLine ("GBK"){ jsontext = jsontext+it } log.info jsontext  2.指定UTF-8编码  def jsontext = "" new File(filename).eachLine ("UTF-8"){ json...

      1.指定GBK编码 

    def jsontext = ""
    new File(filename).eachLine ("GBK"){
        jsontext = jsontext+it
    }
    log.info jsontext

      2.指定UTF-8编码 

    def jsontext = ""
    new File(filename).eachLine ("UTF-8"){
        jsontext = jsontext+it
    }
    log.info jsontext

    注意:

    1.主要是看filename文件的编码格式,对应编码格式读取文件,就可以解决乱码问题

    展开全文
  • java通过file读取txt文件内容

    千次阅读 2019-11-06 14:29:59
    String path="G:/test.txt"; File file = new File(path); // 要读取以上路径的input。txt文件 System.out.println(file.getName()); byte[] bytes = new byte[1024]; StringBuffer s...
            String path="G:/test.txt";
            File file = new File(path); // 要读取以上路径的input。txt文件
            System.out.println(file.getName());
            byte[] bytes = new byte[1024];
            StringBuffer sb = new StringBuffer();
            FileInputStream in = new FileInputStream(file);
            int len;
            while ((len = in.read(bytes)) != -1) {
                    sb.append(new String(bytes, 0, len));
                }
            System.out.println(sb.toString());

     

    展开全文
  • 文件流infile读取数据

    千次阅读 2017-07-12 17:26:04
    //读取文件数据 #include #include #include using namespace std;int main(){ string b[100]; string file_path = "D:\\P1.txt"; //cout << file ; ifstream infile
  • 如果在spark-shell中使用textFile(“file://path”)演示,在local模式下是没有问题的,因为毕竟就是在本机运行,读取本地的文件。但是如果spark-shell --master指定spark集群的话,这样运行就会有问题,会报找不到...
  • input file 读取文件内容

    千次阅读 2016-07-06 10:03:51
    "file" name = "fileDemo" id = "fileDemo" multep /> < input type = "button" value = "readAsDataURL" id = "readAsDataURL" onclick = "showDataByURL();" /> < input type = "button" ...
  • Java_使用jarFile读取jar包中的内容

    千次阅读 2017-07-28 16:14:50
    jarFile是Java提供的一个类,可以读取jar包中的所有文件(递归读取),然后提取指定的文件
  • JS-前端使用Blob和File读取文件

    万次阅读 2019-04-07 15:10:16
    File FileReader及其属性和方法 URL及其属性和方法 历史上,JavaScript 无法处理二进制数据。如果一定要处理的话,只能使用 charCodeAt() 方法,一个个字节地从文字编码转成二进制数据,还有一种办法是将二进制数据...
  • jarFile读取jar文件内容

    千次阅读 2017-08-03 13:46:11
     你可能注意到当文件不在class path中时,JarFile类对于从JAR中读取文件文件是很有用的。当你想指定目标JAR文件时,JarFile类对于从JAR中读取文件同样也很有用。  当然,如果JAR文件在class path中,从其中读取...
  • springboot 项目打成 jar 包后,找不到 ResourceUtils.getFile 读取的文件。使用 ResourceUtils.getFile 读取的文件为空 解决办法: 不使用 ResourceUtils.getFile 方法,改用 ClassPathResource 读取,具体代码如下...
  • 使用 tf.read_file读取图片

    万次阅读 2018-08-08 15:29:24
    # -*- coding: utf-8 -*- ...This is a temporary script file. """ import matplotlib.pyplot as plt import tensorflow as tf import numpy as np print(tf.__version__) image_value = tf....
  • 读取file文件中的数据

    万次阅读 2019-07-07 16:38:24
    private void beginLoadFile() { try { List mPaths = new ArrayList<>(); File file = new File( "D://info.txt"); FileInputStream fis = new FileInputS...
  • JarFile读取jar内文件实例

    千次阅读 2014-09-25 20:00:32
     你可能注意到当文件不在class path中时,JarFile类对于从JAR中读取文件文件是很有用的。当你想指定目标JAR文件时,JarFile类对于从JAR中读取文件同样也很有用。  当然,如果JAR文件在class path中,从其中读取...
  • java new file 使用相对路径读取文件

    万次阅读 2016-05-05 17:43:12
    java new file 使用相对路径读取文件
  • 亲测有效 不多说,直接上图 图一为文件,目录结构,图二为读取方法。
  • jsp提交form表单的时候servlet接收时候怎么接收file信息,又怎么读取,怎么获取file的文件流,怎么获得file要求不使用框架,使用原生态方法解决问题
  • Oracle utl_file文件写入读取

    千次阅读 2018-05-29 19:10:22
    Oracle utl_file文件写入读取 --1、创建服务器目录 (1)在system用户下执行如下命令:CREATE OR REPLACE DIRECTORY MAIL_FILE_DIR AS '/tmp/data/DEV'; (2)给创建的目录赋权限,执行:GRANT read ,write ON ...
  • ![图片说明](https://img-ask.csdn.net/upload/201705/07/1494152949_457053.png) 这样读文件后,第一行存在,如果不读取第一行,该如何写?
  • 在做模板导出的时候,想要把项目...来简单分析下,我是使用spring-core下的ResourceUtils.getFile()工具(这个jar包的util目录下有很多有用的工具),直接来看看它的源码吧。 从方法的注释来看,入参可以是classpat...
  • 字节流 操作文件的字节流 主要的操作方法 字节流不需要flush,为什么? 字节流的available()方法 例子 ... 返回此输入流下一个方法调用可以不受阻塞地从此输入流读取(或跳过)的估计字节数。 void
  • html读取input type=file文件内容

    千次阅读 2019-08-21 15:24:07
    input id="uploadInput" type="file" class="file_input" name="myFiles" onchange="UpdateOnChange(this);" multiple>上传文件 function UpdateOnChange(that){ redFile(that,function(name,data){ var di....
  • C#_File文件读取和写入

    千次阅读 2015-12-19 23:54:20
    // 文件读取类 // File.ReadAllLines类 //string[] strArray = File.ReadAllLines("Skill.json"); //foreach (var item in strArray) //{ // Console.WriteLine("File.ReadAllLines:" + item); //} // ...
  • ifstream fileIn 读取文件遇到的问题

    千次阅读 2013-12-25 14:44:53
    如果最后一行什么都没有,即倒数第二行多了个\n,文本的末尾多一个\n,那么fileIn还是会读取到length,因为什么都没有,所以length还会是last time value。所以。要每次都给length赋初值为0 while ( fileIn....
  • [开发技巧]·h5文件读取失败分析-OSError:Unable to open filefile signature not found) 使用keras在加载网络网络参数的时候出现这个问题 File "h5py\h5f.pyx", line 78, in h5py.h5f.open OSError: Unable...
  • Android 读取文件File的大小

    千次阅读 2017-06-28 22:15:22
    /** * 读取文件的大小 */  public long getFileSize(File f) throws Exception{  long l="";  if ( f.exist ){  FileInputStream mFIS = new FileInputStream(f);  l= mFI
  • java new File使用相对路径读取文件

    万次阅读 2019-03-12 19:26:26
    1.java project环境,使用java.io用相对路径读取文件的例子: *目录结构: DecisionTree |___src |___com.decisiontree.SamplesReader.java |___resource |___train.txt,test...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,249,896
精华内容 499,958
关键字:

file读取信息