# 实现文件上传 ## FormData上传 ~~~ // <input id="fileItem" type="file" onchange="previewFile()"> function uploadFile(file){ var xhr = new XMLHttpRequest(); xhr.open('POST','/upload', true); var formData = new FormData(); // 也可以直接传入form元素来获取已有数据 xhr.upload.onprogress = function(data){ var per = Math.ceil((data.loaded/data.total)*100); console.log(per); } xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { // Every thing ok, file uploaded var res = JSON.parse(xhr.responseText); if(res.code ==200){ // upload success } } }; formData.append("upload_file", file); formData.append("filename",file.name); xhr.send(formData); } function previewFile() { // 获取预览图 var preview = document.querySelector('img'); var file = document.querySelector('input[type=file]').files[0]; var reader = new FileReader(); reader.addEventListener('load', function () { preview.src = reader.result; }, false); if (file) { reader.readAsDataURL(file); // base64图片url } } ~~~ ## 表单上传 ~~~ <form action="/upload" method="post" enctype="multipart/form-data"> <input type="file" accept="images/*"></input> <button type="submit">上传</button> </form> ~~~ 上传表单中，对 form 标签的 enctype="multipart/form-data"。修改request Header的content-type **表单上传提交的优缺点** 优点：简单，兼容性好 缺点：上传文件会页面跳转，不能获得上传进度信息，如果不使用 HTML5 则不能选择多文件上传（想要上传多文件，就必须有多个input），不能限制上传大小及不能预览等。