我们都知道，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中了，上传文件时它会再去找到实际的本地文件
利用这个files对象，我们可以实现很多功能，例如：
一.选择图片未经后端显示预览图片
方法1：利用window的url工具将文件生成url，再将url赋值给img的src属性，显示出选中图像
顺便提一下，input中控制选中类型加一个accept属性就行了，只会显示设定的文件类型
$('.fbpj-camera').change(function(event) {//$('.dianpuzhuangxiu .addmokuai .block .shuoming1 .pic .pic1').children().remove();// 根据这个 <input> 获取文件的 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 生成目标 urlvar imgURL = URL.createObjectURL(file);// 用这个 URL 产生一个 <img> 将其显示出来$('.fbpj .container').prev().find("img").attr('src', imgURL);// 使用下面这句可以在内存中释放对此 url 的伺服，跑了之后那个 URL 就无效了//URL.revokeObjectURL(imgURL);}});
方法二：利用html5的FileReader()读取文件
*前提是浏览器支持的话
if(window.FileReader) { var fr = new FileReader(); // add your code here } else { alert("Not supported by your browser!"); } <script type="text/javascript"> function showPreview(source) { var file = source.files[0]; if(window.FileReader) { var fr = new FileReader(); fr.onloadend = function(e) { document.getElementById("portrait").src = e.target.result; }; fr.readAsDataURL(file); //也是利用将图片作为url读出} } </script> <input type="file" name="file" onchange="showPreview(this)" /> <img id="portrait" src="" width="70" height="75">
FileReader还有一些其他用法
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="author" content="oscar999"> <title></title> <script> function handleFiles(files) { if(files.length) { var file = files[0]; var reader = new FileReader(); reader.onload = function() { document.getElementById("filecontent").innerHTML = this.result; }; reader.readAsText(file); //作为字符串读出} } </script> </head> <body> <input type="file" id="file" onchange="handleFiles(this.files)"/> <div id="filecontent"></div> </body> </html>
二.文件拖拽的方法保存文件
关于文件拖拽下面有注释，我主要说一下怎么给用js给input赋值，而不是手动去选文件
因为拖拽的区域只是一个div，无法进行上传操作，所以需要加一个form和input，让拖拽进去的文件进入input中。
取出files后，用$("#file1")[0].files=files;将文件赋值给input，注意赋值的必须是fileList对象，不要试图只放进去一个文件，fileList只读。
然后用h5中的FormData将form转化，提交即可
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style>.container{width:300px;height: 300px;border:2px dashed #ddd;text-align: center;padding:50px;}</style><title>培训活动列表</title></head><body><div class="container">拖拽进入</div><form id="form1" method="post" enctype="multipart/form-data"><input type="file" name="file1" id="file1" value="" /></form><script type="text/javascript">$('.container').bind('dragenter dragover', ignoreDrag);$(".container").on({drop:function(e){var flag=true;e.preventDefault();//jquery的file要去e.originalEvent里面拿，拖拽获取files的方式与input的不同var files = e.originalEvent.dataTransfer.files;//var files = e.dataTransfer.files; 原生的话这样就可以获取for(var i=0;i<files.length;i++){myFileReader(files[i],function(result,file){if(result){//文件console.log(file.name)}else{//文件夹console.log("不要上传文件夹")flag=false;}});}if(flag){$("#file1")[0].files=files; //关键：将取到的文件赋值给input，用于ajax提交文件！！！var formData = new FormData($("#form1")[0]);$.ajax({url : "/it/orderManage/saveActivity",type : 'POST',data : formData,// 告诉jQuery不要去处理发送的数据processData : false,// 告诉jQuery不要去设置Content-Type请求头contentType : false,async : true,success : function(ret) {//alert("上传成功")if(ret){$("#trainInfoModal").modal("hide");layer.alert("保存成功")$('#orderTable').bootstrapTable("refresh");$("#trainInfoModal input").val("");$("#trainInfoModal textarea").val("");}}});}console.log(files);}})function ignoreDrag(e) {e.originalEvent.stopPropagation();e.originalEvent.preventDefault();}function myFileReader(file, callback){if(!window.FileReader){callback(true,file);return false;}var fr = new FileReader();fr.readAsDataURL(file);fr.function(e){callback(true,file);}fr.function(e){ //不好判断是否是文件夹，通过上传报错可以判断是文件夹callback(false,file);}return true;};</script></body></html>
后台获取文件还是用MutipartFile[]接收
public String saveActivity(@RequestParam HashMap<String, String> param,//@RequestParam(value = "banner") MultipartFile[] files,@RequestParam(value = "file1") MultipartFile[] file1,HttpServletRequest request,String fileNames,String TID, HttpServletRequest req) {
![input[type=file] 异步上传文件](https://2000zi.500zi.com/uploadfile/img/14/775/3f9b1a255411198f04fe5139ddf4654e.jpg)
