angularJS+Ionic implements mobile image upload function

This time I will bring you angularJS Ionic implements the mobile image upload function, angularJS Ionic implements the mobile image upload function. What are the precautions , the following is the actual combat Let’s take a look at the case.

We often encounter the problem of image uploading in front-end development. There are many solutions online. However, some image uploading plug-ins have some attached plug-ins. Therefore, because of an image uploading problem, other plug-ins may need to be introduced. In 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.

One requirement in the project is to upload personal works. To implement the function, new H5 objects FormData object, XMLHttpRequest object, and FileReader object are required. Only these three objects are needed, let’s not talk much about the code.

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. In function1, the click event of is obtained. A judgment will be made when selecting an image, and a reminder will be issued if the range of supported image types is exceeded.

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 vue2.x two-way binding encapsulation

Npm makes cli command line tool

Promise implements asynchronously

The above is the detailed content of angularJS+Ionic implements mobile image upload function. For more information, please follow other related articles on the PHP Chinese website!