Ionic Cordova upload multiple pictures at a time (similar to input file submission form) Implementation Method _javascript skills

We can use Cordova provided by the plug-in to call the camera or image library to choose the image upload, according to Cordova official method, each choice after the direct upload, this is not in line with the user's habits, the best user habits are the user to choose the desired picture, and can be in the local preview, Then the user again open the camera or gallery again select the picture, and then preview, for unwanted pictures deleted, finally determine can, and then upload all the pictures. Obviously this way, Cordova is not supported, then how to achieve it, the following is my method:

By calling $cordovaImagePicker.getPictures This method to open the gallery, get the URL address of the picture, PS: Camera principle is the same

$cordovaImagePicker. Getpictures (Options). Then (function (Imageuri) {for 
 
  (var i=0; i<imageuri.length; i++) { 
    Rlfsurl (Imageuri[i]); 
  } 
 
, function (err) { 
  if (err.message && err.message.toString (). IndexOf (' cancelled ') < 0) { 
    $scope. Poptips (' Open failed ', ' open picture encountered problem '); 
  }   

The above method can get a list of picture addresses, and the next thing to do is to convert the images into binary streams stored locally, as follows:

function Rlfsurl (Imageuri) { 
  window.resolvelocalfilesystemurl (Imageuri, function (fileentry) { 
    Fileentry.file (function (file) { 
      var reader = new FileReader (); 
      Reader.onloadend = function (e) { 
        //need to convert picture path to binary stream, and specify type as image format (there are other formats, such as text formatting, and so on) 
        var the_file = new Blob ([ E.target.result], {type: "Image/jpeg"}); 
        Storage picture Binary stream 
        cachedata.setimgfilelist (the_file); 
        Store picture address for preview 
        cachedata.setimageurilist (imageuri); 
      Reader.readasarraybuffer (file); 
    }, Function (e) {$scope. ErrorHandler (e)}); 
  }, Function (e) {$ Scope.errorhandler (e)}); 

The key here is to var the_file = new Blob([e.target.result ], { type: "image/jpeg" } ); convert the image to binary, and then I CacheData.setImgFileList()和CacheData.setImageURIList() store the transformed binary stream and the image in a predefined way. new Blob()方The idea is not compatible with the lower version of the Android system.

If we add more pictures, we just need to push him into our array, delete the words on the Splice (index, 1) off, so that after the user operation, point submission, I will put these parameters append into the new FormData () on the OK, as follows

for (Var i=0 i < Cachedata.getimgfilelist (). length; i++) { 
  formdatabyimage.append ("Files") Cachedata.getimgfilelist () [i], "images.jpg"); 
} 
The following is the form parameter 
formdatabyimage.append ("Tenantid", 1); 
Formdatabyimage.append ("Facilityidentify", "217ae60e5bc746f"); 
Formdatabyimage.append ("NodeName", nodename); 
Formdatabyimage.append (' Sessiontoken ', formdata.sessiontoken); 

Background received the same method as the input file submission form, here is not much to write.

Here's what's the difference between Ionic and Cordova

Many new friends Ionic basic tutorials are finished, still do not know Ionic and Cordova is what relationship

What is ionic:

Ionic (Ionicframework), an open-source HTML5 mobile app development Framework, is a ANGULARJS mobile-end solution that ionic the popular Cross-platform mobile app development Framework Phoengap as a blueprint, Allows developers to quickly build Android iOS mobile app apps with command-line tools

What is Phoengap?

PhoneGap is a fast development platform that uses HTML,CSS and JavaScript to create mobile Cross-platform mobile applications. It enables developers to leverage the core capabilities of Iphone,android,palm,symbian,wp7,wp8,bada and BlackBerry smartphones-including geo-positioning, accelerators, contacts, sounds, and vibrations.

Perhaps some novice still do not understand, continue to look down:

In layman's terms: Ionic is a angularjs based HTML5 mobile app development Framework

PhoneGap is a package can be packaged and let JS invoke the native mobile app framework

Is the problem coming?

So I don't have to order to install ionic can I use ionic to develop apps? The answer is yes.

You can take ionic as a HTML5 mobile app framework, Phonegap/cordova as a package and invoke the native framework.

As for: Why Ionic can also pack, above also said, Ionic packaging plug-in is based on Phonegap/cordova.

The above is a small set to introduce ionic Cordova one upload multiple pictures (similar to input file submission form) to achieve the method, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!