Home >Web Front-end >JS Tutorial >Angularjs implements image preview and upload

Angularjs implements image preview and upload

php中世界最好的语言
php中世界最好的语言Original
2018-04-18 14:08:171962browse

This time I will bring you AngularjsImage previewUpload, what are the precautions for Angularjs to implement image preview and upload, the following is the actual combat Let’s take a look at the case.

Without further ado, I will just post the code for you. The specific code is as follows:

<input type="file"ng-file-select="onFileSelect($files)"accept="image/*">
app.factory("fileReader",function($q, $log) {
      varonLoad =function(reader, deferred, scope) {
        returnfunction() {
          scope.$apply(function() {
            deferred.resolve(reader.result);
          });
        };
      };
      varonError =function(reader, deferred, scope) {
        returnfunction() {
          scope.$apply(function() {
            deferred.reject(reader.result);
          });
        };
      };
      varonProgress =function(reader, scope) {
        returnfunction(event) {
          scope.$broadcast("fileProgress",
              {
                total: event.total,
                loaded: event.loaded
              });
        };
      };
      vargetReader =function(deferred, scope) {
        varreader =newFileReader();
        reader.onload = onLoad(reader, deferred, scope);
        reader.onerror = onError(reader, deferred, scope);
        reader.onprogress = onProgress(reader, scope);
        returnreader;
      };
      varreadAsDataURL =function(file, scope) {
        vardeferred = $q.defer();
        varreader = getReader(deferred, scope);
        reader.readAsDataURL(file);
        returndeferred.promise;
      };
      return{
        readAsDataUrl: readAsDataURL
      };
  });

The method of executing after selecting the picture

$scope.onFileSelect =function(files) {
      varfileIn=files[0];
      varimg =newImage();
      varfileType = fileIn.name.substring(fileIn.name.lastIndexOf(".") + 1, fileIn.name.length);
      if(fileIn.size>5242880){//单位是B,此处不允许超过5M
        alert("图片不能超过5M")
        return;
      }
      if(fileType=='JPG'|| fileType=='PNG'|| fileType=='JPEG '|| fileType=='jpg'|| fileType=='png'|| fileType=='jpeg'){
      }else{
        alert("图片格式只支持:JPG,PNG,JPEG")
        return;
      }
      fileReader.readAsDataUrl(fileIn, $scope)
          .then(function(result) {
            $scope.imageSrc = result;
            console.log(img.width);
      });
    }

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:



The above is the detailed content of Angularjs implements image preview and upload. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn