H5 Photo Upload starter (filereader+formdata+ajax)

Tag: Day false time his HTM click on the type of file base64

一、选择图片（input的file类型）

<input type= "File" id= "Inputimg" >

1. The file type of input is rendered as a button and a text. Click the button to open the File Selection window; file type input will have the Files property, which holds information about the document.

2. Input.files is an array that consists of the file objects that are passed in. Each file object contains the following properties:

LastModified: Numeric value that represents the number of milliseconds of the most recent modification time;

LastModifiedDate: Object that represents the date object of the last modification time (the elevation is said to be a string, according to the object can be seen, in order to clear the hierarchy is not expanded, you can see for themselves, it can invoke the relevant methods of the date object, such as the Getday method);

Name: file name in the local file system;

Size: The bytes of the file;

Type: String, MIME type of file;

Weblitrelativepath: null here; When the Webkitdirectory property is added to input, the user can select the folder, at which point the Weblitrelativepath represents the relative path to the file in the folder. Like what:

二、读取图片数据 （FileReader对象）

The FileReader object is an asynchronous file-reading mechanism that uses a file or Blob object to specify which files or data to read, combined with Input:file to easily read local files.

var New FileReader (); // Create a FileReader instance reader.readasdataurl (file); //Call the method of the FileReader object to read the file as Dataurl  function() {// handle event Console.log (this. result);   After the read is completed, the data is saved in the object's Result property, and the result is printed as follows: (intercept partial result)}

Third, upload pictures (Formdata object)

1. Using some key-value pairs to simulate a series of form controls, the form of key and value is assembled into an object, the operation method of the Formdata object, all in the prototype, itself does not have any properties and methods.

2. Asynchronously uploads a binary file.

3. The attribute is not directly mounted on your formdata instance. The value can be obtained by the iterator it provides, or by the Get method.

var formdata=New formData (); // Create an empty object instance formdata.append (' key ', value); // Add a field to the object // print value values corresponding to key values

4. Formdata operation

(1) Gets the value: Formdata.get (key)/getall (key) to obtain the corresponding value

(2) Add data: Add data through Formdata.append (key, value), if the specified key does not exist, a new data will be added, and if key exists, add to the end of the data

(3) Modify the data: by Formdata.set (key, value) to set the modification data, if the specified key does not exist there will be a new one, if present, the corresponding value value will be modified

(4) Determine if the data: by Formdata.has (key) to determine whether the corresponding key value

(5) Delete data: Delete data by Formdata.delete (key)

(6) Traversing the data: using Formdata.entries () to get an iterator and then traversing all the data

(7) Sending data: Ajax asynchronous request

Iv. jquery Upload Image code

varFormdata;if(typeofFileReader = = = ' undefined ') {//Detecting Browser-to-filereader compatibilityshowimg.innerhtml = "Sorry, your browser does not support FileReader"; Imginput.setattribute (' Disabled ', ' disabled ');} Else{Imginput.addeventlistener (' Change ',function() {        varFile = This. files[0];        Console.log (file); if(!/image\/\w+/. Test (File.type)) {Alert ("Make sure the file is an image type"); return false; }        varReader =NewFileReader ();//Create a FileReader instanceReader.readasdataurl (file);//base64 encoding the contents of the file after output 　　　　　　　 //console.log (reader)Reader.onload =function(e) {//Console.log (This.result);//After reading is complete, the data is saved in the object's Result property$ (showimg). Append ('  This. Result + '/> ');//Displays the selected picture on the page//alert (' 111 '); Formdata=NewFormData (); Formdata.append (' File ', file); Console.log (Formdata.getall (' File ')); }},false); }$.ajax ({url:url, type:' Post ', DataType:"JSON", Data:formdata, cache:false, ProcessData:false,//tell jquery not to process the data sentContentType:false,//tell jquery not to set the Content-type request headerSuccess:function(data, status, XHR) {//alert (1);}, Error:function(XHR, ErrorType, error) {//alert (0);    }});

H5 Photo Upload starter (filereader+formdata+ajax)