Angularjs+ionic Mobile Image Upload Solution

Front-end development often encounter the problem of uploading pictures, online solutions are many, but some image upload plugin will have some attached plug-ins, so because a picture upload problem may need to introduce other plug-ins to the project, the time of the project will be nondescript, and sometimes there will be some conflicts between plugins, So we can write an image upload method by ourselves.

Today's demo is to help a friend to do a mobile public number project, the project structure is angular+ionic, because the operation of the DOM jquery is much more convenient, but jquery is thicker, so the last choice to use the lightweight Zepto to the project Dom operation.

One of the requirements of the project is to upload a personal work, to implement the function needs to H5 new objects Formdata objects, XMLHttpRequest objects, FileReader objects. Just need these three objects, not much to say on the code.

DOM Structure:

JS structure:

Function1:

$scope. imglist = [];
$scope. Setuploader = function () {
var files = document.getElementById (' photo ');
Files.click ();
$ (Files). Unbind (). On (' Change ', function (e) {
var file = E.target.value;
if (!/. ( Jpg|jpeg|png| Gif| jpg|png) $/.test (file)) {
Common.toast (' picture type must be one of the jpeg,jpg,png ');
return false;
};
Fsubmit ();
Readasbinarystring ();
});
};

Function2:

function Fsubmit () {
var itemimg = {};
var Form=document.getelementbyid ("Form1");
Console.log (' form ', form)
var formdata=new formData (form);
Formdata.append (' Wxdesigner_sid ', $.fn.cookie (' Wxdesigner_sid '));
Formdata.append (' id ', $scope. masterinfo.id);
Formdata.append (' pc ', ' 1 ');
var oreq = new XMLHttpRequest ();
Oreq.onreadystatechange=function () {
if (oreq.readystate==4) {
if (oreq.status==200) {
var json=json.parse (Oreq.responsetext);
Console.log (JSON)
if (JSON. Success) {
Itemimg = json. Data;
$scope. imglist=itemimg;
Console.log ($scope. imglist)
$scope. $apply ();
Itemimg = {};
}
}
}
};
Console.log (Oreq)
Console.log (FormData)
Oreq.open ("POST", common.api+ "Wxdesigner/designer/uploadworks");
Oreq.send (FormData);
return false;
};

Determine if the browser supports the FileReader interface
if (typeof FileReader = = ' undefined ') {
Make the selection control not operational
File.setattribute ("Disabled", "disabled");
}

Function3:

function readasbinarystring () {
var file = document.getElementById (' photo '). Files[0];
Console.log (file)
var reader = new FileReader ();
Read the file into the page in binary form
Reader.readasdataurl (file);
Reader.onload=function (f) {
$scope. MasterInfo.thumblist.push (F.currenttarget.result)
Console.log ($scope. Masterinfo)
$scope. $apply ()
}
}

The DOM layer of the entire image upload is simple, with a form form and a function that triggers the form (function1). Get the Click event of <input type= "file" > in function1, and make a judgment when selecting the picture, if it is beyond the supported picture type, make a reminder.
Then call function2 and Function3 later.
Get the Form form object in Function2, then create a Formdata object, pass in the form form that gets to the Formdata, and then append some parameters to upload the picture. A new XMLHttpRequest object is created, and then open sends the XHR request interface, and send (FormData) passes the parameters to the interface.
By this time the interface was sent successfully.

The four parameters here are the four parameters in Formdata

The interface succeeds accordingly.

There is a problem, the image upload successfully written to the database, but this time need to show to the user in the local view but the page does not directly access the device local images, so we need to filereader object to upload the image file read as Dataurl to show on the local.

Start with a new FileReader object, and then pass the obtained input file object to the FileReader Readasdataurl () method, which reads the file as Dataurl.

Then call the OnLoad method of FileReader, and the result of this method will have the URL after the conversion, so we can get to this URL, which is actually encoded by base64. Then push to the end of the picture list

This solves the problem, the front end shows the local picture and the picture is written to the database, and when the page refreshes again, it gets the data in the database.

Of course, here is just a method, mobile image upload plugins abound, and even a variety of drag-and-drop upload image upload plugin also many, here is suitable for the project without the introduction of plug-in image upload simple function.


Make a little progress every day

Angularjs+ionic Mobile Image Upload Solution