angularJS+Ionic uploads images on the mobile terminal (with code)

This time I bring you angularJS Ionic uploads images on the mobile terminal (with code), angularJS Ionic uploads images on the mobile terminal What are the precautions, here are Let’s take a look at practical cases.

In front-end development, we often encounter the problem of image uploading. There are many solutions online, but some image uploading plug-ins have some attached plug-ins, so because of an image uploading problem, you may need to If other plug-ins are introduced into the project, the project will become nondescript over time, and sometimes there will be some conflicts between plug-ins, so we can write a method of uploading images ourselves.

Today’s demo is a mobile WeChat public account project that I made for a friend. The project architecture uses Angular Ionic because it is much more convenient to operate jQuery on the DOM, but jQuery is relatively heavy, so in the end I chose to use the lightweight zepto to operate the project DOM. Perform operations.

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('图片类型必须是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;
};
//判断浏览器是否支持FileReader接口
if(typeof FileReader == 'undefined'){
  //使选择控件不可操作
  file.setAttribute("disabled","disabled");
}

function3:

function readAsBinaryString(){
  var file = document.getElementById('photo').files[0];
  console.log(file)
  var reader = new FileReader();
  //将文件以二进制形式读入页面
  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 very simple, a form plus a function (function1) that triggers the form. The click event of is obtained in function1, and a judgment will be made when selecting an image. If the range of the supported image types is exceeded, a reminder will be issued.

Then call function2 and function3 later.

Get the form object in function2, then create a FormData object, pass the obtained form into FormData, and then append some parameters for uploading images. Create another new XMLHttpRequest object, then open the XHR request interface, and send(formData) passes parameters to the interface.

At this time, the interface is sent successfully.

The four parameters here are the four parameters in formData

The interface accordingly succeeds.

There is a problem here. The image upload is successfully written to the database, but at this time it needs to be displayed locally to the user, but the web page cannot directly access the local image of the device, so we need a FIleReader object to read the uploaded image file as a DataURL. Shown locally.

First, New a FileReader object, and then pass the obtained input file object into the FileReader's readAsDataURL() method. This method reads the file as DataURL.

Then call the onload method of FileReader. The result of this method will have the converted url, so we can get this url, which is actually base64 encoded. Then push to the end of the picture list

This solves the problem. The front end displays local pictures and the pictures are also written to the database. When the page is refreshed again, the data in the database is obtained.

Of course, this is just a method, mobile image upload Plug-ins abound, and there are even various drag-and-drop image upload plug-ins. This is suitable for simple functions of image upload in projects without introducing plug-ins.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the scrolling behavior of Vue-Router

Particles.js implements particle dynamic background animation

Detailed explanation of the use of routing meta information of Vue-router

The above is the detailed content of angularJS+Ionic uploads images on the mobile terminal (with code). For more information, please follow other related articles on the PHP Chinese website!