First, call the FileReader object methods
Method Name Parameter Description
abort none interrupted read
readAsBinaryString file to read the file into a binary code
readAsDataURL file will read the file DataURL
readAsText File, [encoding] to read the file as text
readAsText: This method has two parameters, wherein the second parameter is a text encoding, the default value is UTF-8. This method is very easy to understand, reading the file as text, that is the result of reading this text file.
readAsBinaryString: This method reads the file as a binary string, typically it will be transferred to the rear end, the rear end of the file can be stored this string.
readAsDataURL: This is the method used in the example program, which will read files to some data: the beginning of the string, the string essence this is Data URL, Data URL is a small file directly embedded documents Program. Here is a small file usually refers to an image file with html and other formats.
Second, handling events
Event Description
Trigger onabort interrupt
triggered onerror error
onload file reads the trigger upon successful completion
onloadend read the complete trigger, regardless of success or failure
triggered when onloadstart read start
onprogress reading
Third, the front-end load data show picture
<progress id="Progress" value="0" max="100"></progress> <input type="file" name="file" onchange="showPreview(this)" /> <img id="portrait" src="" width="70" height="75"> function showPreview(source) { var file = source.files[0]; console.log(file); if(window.FileReader) { var fr = new FileReader(); fr.onloadend = function(e) { // console.log(this.result); document.getElementById("portrait").src = e.target.result; }; //给FileReader对象一个读取完成的方法,使用readAsDataURL会返回一个url,这个值就保存在事件对象的result里,img通过加载这个地址,完成图片的加载 fr.readAsDataURL(file); } var total = source.files[0].size; fr.onprogress = function(ev) { // 简单测试了一下 大概12M左右的传输速度 // 推荐测试的时候用一个视频 console.log(ev.loaded / total); var loading = (ev.loaded / total)*100; document.getElementById("Progress").value = loading; } }
四、base64与后台交互前端代码
<input type="file" id="upload-file"> <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <script> // 用户选择图片进行上传 // 上传成功, 后台返回图片的URL // 显示在当前页面上 document.getElementById("upload-file").addEventListener("change", function(){ for (var i = 0; i < this.files.length; i++) { var file = this.files[i]; var reader = new FileReader(); reader.onload = function (ev) { console.log(ev); console.log(ev.target.result); var base64Str = ev.target.result.split(",")[1]; //console.log(base64Str) $.ajax({ url: "reImg.php", data: { "base64file": base64Str }, type: "post", success: function (res) { createImg(res); } }) } reader.readAsDataURL(file); } }); function createImg(imgSrc){ var theImg = document.createElement("img"); theImg.src = imgSrc; document.body.appendChild(theImg); theImg.className = "imgC"; }
转载于：https://www.jianshu.com/p/cde728c4e334