关于input type="file"的及其files对象的深度解析-kb88凯时官网登录

我们都知道，html5中有个input type=file元素。用该元素可以实现页面上传文件的功能

但一般的做法只是简单的在表单中操作，我来研究一下深层东西

想要了解它，就要知道它的内置对象，files

页面上写一个input，然后选俩个图片，打印这个input对象

$("input[name='file1']").change( function(e){
    console.log($("input[name='file1']"))
})

发现有下列值，在0中，有一个files对象

我们发现input选择的文件被记录到了这个对象中，这个是filelist对象，是一个只读对象，不能修改

因为它不能修改，所以很难实现对已选中多个文件的删除某个文件等操作

里面记录了文件的name，size，type，和修改时间等，可知这个对象只存放了一些文件的信息，相当于是本地文件的索引，并不是把文件放到input中了，上传文件时它会再去找到实际的本地文件

filelist数组包含多个file对象，file对象是继承与blob对象的，关于file，url,blob，dataurl可以详细查查

一般url可以是本地地址，http地址等

blob对象一般的形式是：blob:http://192.168.100.151:8080/1148dcd6-952e-4478-823d-21b37e537c2f，属于浏览器对象

dataurl 一直格式是：以data:image/jpeg;base64,这种类似形式打头的一串很长的字符串。

这三种形式在img标签中src属性都可以调用。

file对象有name，size,lastmodified属性

file对象的创建：

var file1=new file([blob], "aa.png",{type:"image/jpg"}); //第一个参数是blob对象或者dataurl，第二个参数是文件名，三个参数可选，规定文件类型

注意：第一个参数必须是对象，不能是转换成的字符串，比如uniapp或者微信小程序的chooseimage方法返回的blob的url，他是一个字符串，这样生成的file对象只是将url字符串变成文件了，不是文件本身！！！

想把blob字符串变成blob对象，可以用es6的：const blob = await fetch(image.path).then(r => r.blob())

或者用传统的xhr或者ajax也行，就是把blob对象根据url给获取出来就行。

利用这个files对象，我们可以实现很多功能，例如：

一.选择图片未经后端显示预览图片

方法1：利用window的url工具将文件生成url，再将url赋值给img的src属性，显示出选中图像

顺便提一下，input中控制选中类型加一个accept属性就行了，只会显示设定的文件类型

$('.fbpj-camera').change(function(event) {
	 	//$('.dianpuzhuangxiu .addmokuai .block .shuoming1 .pic .pic1').children().remove();
   		 // 根据这个  获取文件的 html5 js 对象
	    var files = event.target.files, file;        
	    if (files && files.length > 0) {
	      // 获取目前上传的文件
	      file = files[0];
	      // 来在控制台看看到底这个对象是什么
	      console.log(file);
	      // 那么我们可以做一下诸如文件大小校验的动作
	      if(file.size > 1024 * 1024 * 2) {
	        alert('图片大小不能超过 2mb!');
	        return false;
	      }
	      // !!!!!!
	      // 下面是关键的关键，通过这个 file 对象生成一个可用的图像 url
	      // 获取 window 的 url 工具     
	      var url = window.url || window.webkiturl;     
	      // 通过 file 生成目标 url
	      var imgurl = url.createobject;
	      // 用这个 url 产生一个  将其显示出来
	      $('.fbpj .container').prev().find("img").attr('src', imgurl);
	      // 使用下面这句可以在内存中释放对此 url 的伺服，跑了之后那个 url 就无效了
	      	 //url.revokeobject;
   		 }
  		});

方法二：利用html5的filereader()读取文件

*前提是浏览器支持的话

if(window.filereader) {  
    var fr = new filereader();  
    // add your code here  
}  
else {  
    alert("not supported by your browser!");  
} 

filereader还有一些其他用法

readastext一般只能读取txt,html等等文件，局限性较大，比如想要前端读excel文件，由于解决文件编码问题较为复杂，需要用到js-xlsx插件，具体可百度方法。

常用api：

filereader.readasdata //转换成base64格式

filereader.readastext() //转换成字符串格式

filereader.readasarraybuffer(file) //转换成arraybuffer格式

filereader.readasbinarystring(file) //转换成原始二进制格式（貌似已被废除）

filereader.onload = function (e) { console.log(e.target.result) } //在上述读取事件完成时触发

二.文件拖拽的方法保存文件

关于文件拖拽下面有注释，我主要说一下怎么给用js给input赋值，而不是手动去选文件

因为拖拽的区域只是一个div，无法进行上传操作，所以需要加一个form和input，让拖拽进去的文件进入input中。

取出files后，用$("#file1")[0].files=files;将文件赋值给input，注意赋值的必须是filelist对象，不要试图只放进去一个文件，filelist只读。

然后用h5中的formdata将form转化，提交即可

    
    
    

    拖拽进入


    

后台获取文件还是用mutipartfile[]接收

public string saveactivity(@requestparam hashmap param,
                               //@requestparam(value = "banner") multipartfile[] files,
                               @requestparam(value = "file1") multipartfile[] file1,
                               httpservletrequest request,
                               string filenames,
                               string tid, httpservletrequest req) {

三.vue axios 上传文件

无论ajax还是axios，都不是直接用表单提交的，都是 要用 new formdata()转化一下。

所以axios方法与ajax方法类似

uploadmarketingform(e){
	console.log(e)
	var filename=e.target.files[0].name; //文件名
	var filesize=e.target.files[0].size; //文件大小
	var param = new formdata();
        //添加表单参数，如果后台用文件数组接收
        //param.append("file", e.target.files);
        //如果后台只接收单一文件
	param.append("file", e.target.files[0]);
        //设置表头类型
	const config = {
		headers: { "content-type": "multipart/form-data" }
	};
	this.axios.post("/.../uploadtest", param, config).then(res => {
		console.log(res);
	});
},

在java spring mvc中还是这么接收

@responsebody
@requestmapping(value = "uploadtest", produces = "text/plain;charset=utf-8")
public string uploadtest(@requestparam map param,@requestparam(value = "file") multipartfile[] file1,
                         httpservletrequest request) throws ioexception {
    retbase retbase = new retbase();
    //文件可以在参数中用multipartfile[]（多文件） 或者 multipartfile （单一文件）接收
    //也可以像这样在request中接收
    multiparthttpservletrequest multipartrequest = (multiparthttpservletrequest) request;
    multipartfile multifile = multipartrequest.getfile("file"); // 通过参数名获取指定文件
    string filename = multifile.getoriginalfilename();
    // 获取文件后缀
    string prefix=filename.substring(filename.lastindexof("."));
    // 用uuid作为文件名，防止生成的临时文件重复
    final file file = file.createtempfile(uuid.randomuuid().tostring(), prefix);
    // multipartfile to file
    return json.tojsonstring(retbase, serializerfeature.writemapnullvalue);
}