Encountered the project, asked to make an image system, for front-end development need to understand the relevant properties of file, and how to develop. 工欲善其事, must first sharp weapon. Degree Niang search for a while, find information. These days, you need to solve the problem of the ability Ah!
Reference applications: https://www.cnblogs.com/sunliyuan/p/5737928.html
Http://blog.okbase.net/jquery2000/archive/1296.html (The explanation is also very clear)
http://blog.csdn.net/qingyjl/article/details/52003567
File ( File)
The interface provides information about the file and allows JavaScript in the Web page to access its contents.)
The File
interface is based on BLOBs, inherits the functionality of the Blob, and extends it to support files on the user's system. Blob objects represent immutable raw data of similar file objects. A blob represents data that is not necessarily a native form of JavaScript.
For file official documents, you can refer to a more professional official website: Https://developer.mozilla.org/zh-CN/docs/Web/API/File This is very detailed, there is time to see more.
Here you can see the properties of the file interface.
File.name;返回当前 File
对象所引用文件的名字。
File.size;返回文件的大小。
File.lastModified;返回当前 File
对象所引用文件最后修改时间, 自 1970年1月1日0:00 以来的毫秒数。
File.webkitRelativePath 返回 File
相关的 path 或 URL。
It's time for an example,
// FileInput is a htmlinputelement: <input Type= "file" multiple id= "Myfileinput"; var fileInput = document.getElementById ("Myfileinput" // files are a FileList object (Simliar to NodeList) var files = Fileinput.files; for (var i = 0; i < files.length; I++ var type = Files[i].type; var name = Files[i].name; Alert ( Filename: "+ name +", Type: "+ Type);}
files 是一个 FileList 对象(类似于NodeList对象)。input里type=file里都有这个files属性,意为获取文件集合。
Another complete example:
<! DOCTYPE html>//The Multiple property allows the user to select multiple files<input id= "myfiles" multiple type= "file" ></body><script>varpullfiles=function(){ //gets the INPUT element varFileInput = Document.queryselector ("#myfiles"); varFiles =Fileinput.files; //gets the number of files selected varFl=files.length; varI=0; while(I <FL) { varFile =Files[i]; alert (file.name); I++; } }//To set the change event handler functionDocument.queryselector ("#myfiles"). onchange=Pullfiles;</script>All right, here we go. Upload a picture and display the image to the page. HTML5 read the picture in Input[type=file]
Reference: "HTML5 Learning FileReader Interface"--http://blog.csdn.net/zk437092645/article/details/8745647
A demo.
<form id= "Imgform" > <input type= "file" class= "Addborder" > <br/> <button type= " Button "onclick=" Loadimg () "> Get picture </button> </form> <div class=" Addborder "id=" Imgdiv " > </div>
functionloadimg () {//Get File varFile = $ ("#imgForm"). Find ("input") [0].files[0]; //to create an object that reads a file varReader =NewFileReader (); //creating file read-related variables varImgfile; //setting events successfully for file readReader.onload=function(e) {alert (' File read complete '); Imgfile=E.target.result;//Get the contents of the current file Console.log (imgfile); $("#imgContent"). attr (' src ', Imgfile); }; //formally read filesreader.readasdataurl (file); }
Note here that Reader.onload is the last to execute after the file is formally read.
We created a FileReader object named Reader. It also declares a imgfile variable, which is used primarily to store the Base64 code of the corresponding file generated after reading the file. After this paragraph reader.onload=function (e) {} is an OnLoad event for reading a file, similar to the OnClick event we bind to the HTML tag, the method is called when a particular condition is reached. The last and most important thing is to start reading the file. Using Reader.readasdataurl (file), as you can see from the programming experience, is to call the Readasdataurl method in the FileReader class and pass in the previously acquired file object. If the read succeeds, the Reader.onload event is called. Here, I also input the reading results into the console, such as the console output of the Base64 code (part) is: Light a picture there is so much data, specifically I did not study, but I know that the larger the picture, the larger the amount of data. But all the pictures are similar in the previous paragraph. such as the red callout part, is "data:image/jpeg;base64,", then is the body content of the picture. What's the use of this body of content? We can write this data in Base64 encoded format to the corresponding image file, you will find that the image came out. Half of the way I upload pictures is to get the image of the Base64 code, and then to the server, the server then generates a suffix name of the same file, and Base64 encoding to write the data, the server side has generated the same image, and then save the image address to the database. (Although you can put this data directly into the database, you can imagine how spectacular it would be to have a single word in the database Gencun so much data). Other than that:Reader.readasdataurl (file);//Convert to Base64 format.
There are some conversion to BLOB objects, you can see the site https://www.cnblogs.com/saysmy/p/5626337.html
<input type= "File" Name= "2" class= "file" accept= "image/*" capture= "Camera" id= "File39" />
var file = document.getElementById (idfile);
var fileList = file.files; Get the picture file
var imgurl = window. Url.createobjecturl (Filelist[i]);
You can refer to the website: http://blog.csdn.net/fd214333890/article/details/71250488
Relevant knowledge of image uploading input type=file,html5 input:file upload type control