Relevant knowledge of image uploading input type=file,html5 input:file upload type control

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