原生js实现文件上传
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生js实现文件上传相关的知识,希望对你有一定的参考价值。
参考技术A function saveUser()var file = document.getElementById("file").files[0];
//原生ajax实现文件上传
var formData = new FormData();
if (file)
formData.append("file", file);
console.log(file)
//得到xhr对象
var xhr = null;
if (XMLHttpRequest)
xhr = new XMLHttpRequest();
else
xhr = new ActiveXObject("Microsoft.XMLHTTP");
xhr.open("post", "http://www-test.mianyazhu.com/supplier/fileSupplier/file/upload/supplier", true);//设置提交方式,url,异步提交
// xhr.setRequestHeader("Content-Type","multipart/form-data");
xhr.onload = function ()
var data = xhr.responseText; //得到返回值
console.log(data);
xhr.send(formData);
原生JS实现异步图片上传(预览)
效果
实现过程分为两步
1. 用户点击添加后通过 H5文件读取 FileReader对象以DataURL的格式读取图片
2. 通过FormData对象生成表单数据,通过ajax上传到后台
HTML
<style> .file-box{display: inline-block;position: relative;padding: 3px 5px;overflow: hidden;color:#fff;background-color: #ccc;} .file-btn{position: absolute;width: 100%;height: 100%;top: 0;left: 0;outline: none;background-color: transparent;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0;opacity: 0;} .prev-box{display: inline-block; min-width: 200px;min-height: 120px;border-radius: 5px;padding: 5px;border:1px #ccc dotted;} </style> <body> <form id="form1"> <div class="file-box"> <input type="file" class="file-btn" onChange="uploadImg(this)" accept="image/*" name="image"/> 上传文件 </div> <br> <div class="prev-box" id="prev-box"> <img style="width: 200px;" id="img"> </div> <div id="uploadMsg" style="color: #f00"></div> </form> </body>
JS
function uploadImg(obj){ //1. 图片预览 //如果浏览器不支持 FileReader 则用文字提示 if(typeof FileReader == \'undefined\'){ var prevBox = document.getElementById(\'prev-box\') prevBox.innerHTML = "浏览器不支持预览" }else{ //获取上传文件,返回 File对象 var file = obj.files[0]; var reader = new FileReader() //注册读取成功的回调函数 reader.onload = function (e) { var img = document.getElementById("img"); img.src = e.target.result; } //开始以 DataURL格式读取文件 reader.readAsDataURL(file) } //2. 图片上传 if(typeof FormData == \'undefined\'){ alert(\'浏览器不支持图片上传\') }else{ var form = document.getElementById(\'form1\') var data = new FormData(form) //添加自定义字段 data.append("CustomField", "This is some extra data") //ajax请求 var httpRequest = new XMLHttpRequest(); httpRequest.open("POST", "upload.php", true); httpRequest.onload = function(oEvent) { if (httpRequest.status == 200) { //服务器返回的保存路径 console.log(httpRequest.responseText) } else { document.getElementById(\'uploadMsg\').innerHTML = \'图片上传失败,错误码:\' + httpRequest.status } }; httpRequest.send(data); } }
相关知识
1. 通过获取 <input type="file" /> 的files获取结果为 File对象的伪数组集合
2. FileReader 支持输出多个格式 readAsDataURL( ) 、readAsText( ) 、readAsArrayBuffer( ),他们都接收一个 File 或者 Blob 对象作为参数
3. FileReader 对象支持多个事件回调 onloadstart( ) --开始读取、onprogress( ) --正在读取、onabort( ) --读取中断、onload( ) -- 读取成功,读取成功后数组保存在事件对象中 e.target.result
4. FromData 对象可以单独创建,也可以通过Form创建,使用append添加字段
5. 如果FormData对象是通过表单创建的,则表单中指定的请求方式会被应用到方法open()中 。
以上是关于原生js实现文件上传的主要内容,如果未能解决你的问题,请参考以下文章