アップロードする画像のURLを取得する

Question

アップロードした画像の画像URLを取得して配列に格納するHTMLアップロード入力から、ユーザーが端末/コンピュータから画像をアップロードできるようにする方法がありますか？どのような方法でも動作しますが、私の最終目標は画像形式またはURLでMongoデータベースにアップロードされた画像を取得することです。私は最小のコード量を持ち、フレームワークの量を最小限に抑えるソリューションを探しています。ユーザーがファイルをアップロードできるMeteorパッケージについて知っていますが、フレームワークや極端に長いコードを必要としない単純なソリューションがあるかどうかを知りたいだけです。好ましくは反応してもいいといいですね。

Answer 1

あなたはこれを試すことができます。

'click #explorer': function() { 
    $("#file-upload").click(); 
    }, 
    'change #file-upload': function() { 
    var photoid = $('#photoid').val(); 
    encodeImageFileAsURL(photoid); 

    function encodeImageFileAsURL(photoid) { 
     var filesSelected = document.getElementById("file-upload").files; 
     if (filesSelected.length > 0) { 
     var fileToLoad = filesSelected[0]; 
     var fileReader = new FileReader(); 
     fileReader.onload = function(fileLoadedEvent) { 
      var photo = { 
      srcData: fileLoadedEvent.target.result, 
      userid: Meteor.userId(), 
      photo_id: photoid 
      } 

      Meteor.call('addPhoto', photo) 
     } 
     fileReader.readAsDataURL(fileToLoad); 
     } 
    } 
    $('#photoid').val(''); 
    }, 

HTML

<div class=" row "> 
      <div class=" col-xs-12 "> 
       <div> 
       {{#if photo}} 
       <img id="explorer" style="width: 130px;height: 130px;border-radius: 50%;margin: 0 auto;" class="img-responsive" src='{{photo}}' alt="" /> 
       {{else}} 
        <img id="explorer" class="img-responsive img-circle" src="/persona2.png" width="120px" alt="" /> 
       {{/if}} 
       </div> 
       <div class="col-xs-12" id=""> 
        <div class="popuptext" id="myPopup"> 
        <img class="img-responsive" id="explorer" src="/pencil.png" alt="" style="width: 43px;margin-left: 86px;margin-top: -43px;"/> 
        <image id="Browser" src=""/> 
        <input type="hidden" id="photoid"></div> 
       </div> 
      </div> 
      <input id="file-upload" style="display: none;" type="file" accept="image/*" /> 
     </div> 

流星方法addPhoto addPhoto方法がある

updatePhoto: function(photo) { 

     Meteor.users.update({'_id' : photo.userid},{$set:{'profile.photo_1': photo.srcData}},{"multi" : false, "upsert" : false}); 

    }