值得注意的是：当一个表单里面包含这个上传元素的时候，表单的enctype必须指定为multipart/form-data,method必须指定为post，浏览器才会认识并正确执行。但是还有一点，浏览器只允许用户点击<input type="file">来选择本地文件，用JavaScript对<input type="file">的value赋值是没有任何效果的。当用户选择了上传某个文件后，JavaScript也无法获得该文件的真实路径：
但是有个方法可以，利用File和FileReader两个主要对象，可以获得文件信息并读取文件。
例子文件：file-upload-demo.html
HTML文件
<form method="post" enctype="multipart/form-data" id="file_upload">
<p>图片预览：</p>
<div id="test-image-preview"></div>
<p>
<input type="file" id="test-image-file" name="test" accept="image/gif, image/jpeg, image/png, image/jpg"> ?accept在文件上传中使用 accept 属性，本例中的输入字段可以接受 GIF 和 JPEG 两种图像：请避免使用该属性。应该在服务器端验证文件上传。
</p> ??<p id="test-file-info"></p></form>
CSS
#test-image-preview {
border: 1px solid #ccc; ??width: 100%; ??height: 200px; ??background-size: contain; ??background-repeat: no-repeat; ??background-position: center center;}JS
<script src="http://cdn.loveqiao.com/jquery.js"></script><script type="text/javascript"> var
fileInput = document.getElementById(‘test-image-file‘), ??????info = document.getElementById(‘test-file-info‘), ??????preview = document.getElementById(‘test-image-preview‘); ??????// 监听change事件: ??????fileInput.addEventListener(‘change‘, function() { ?????? // 清除背景图片: ?????????preview.style.backgroundImage = ‘‘; ?????????// 检查文件是否选择: ?????????if(!fileInput.value) { ??????????????info.innerHTML = ‘没有选择文件‘; ??????????????????return; ?????????} ?????????????????????????????// 获取File引用: ?????????var file = fileInput.files[0]; ?????????//判断文件大小 ?????????var size = file.size; ?????????if(size >= 1*1024*1024){ ???????????????alert(‘文件大于1兆不行!‘); ???????????????return false; ?????????} ?????????// 获取File信息: ?????????info.innerHTML = ‘文件: ‘ + file.name + ‘<br>‘ + ??????????????????????????‘大小: ‘ + file.size + ‘<br>‘ + ??????????????????????????‘修改: ‘ + file.lastModifiedDate; ?????????if(file.type !== ‘image/jpeg‘ && file.type !== ‘image/png‘ && file.type !== ‘image/gif‘) { ?????????????alert(‘不是有效的图片文件!‘); ?????????????return; ?????????????????????????????// 读取文件: ?????????var reader = new FileReader(); ???????????????reader.onload = function(e) { ??????????????? var ???????????????????? data = e.target.result; // ‘data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...}‘ ???????????????????????????????? preview.style.backgroundImage = ‘url(‘ + data + ‘)‘; ??????????????}; ???????????????// 以DataURL的形式读取文件: ???????????????reader.readAsDataURL(file); ???????????????console.log(file); ??????????});</script>
<input type=file>上传唯一控件
原文地址：https://www.cnblogs.com/fpcbk/p/9841095.html