JavaScriptで画像をアップロードして使用するには？

-2

私はこの変更をdivの背景にしたいと思っています。JavaScriptで画像をアップロードして使用するには？

<html> 
    <head> 
    </head> 
    <body> 
     <input type="file"> 
     <div id="myBackground"></div> 
    </body> 
</html>

出典

2016-05-18 Eddie Domingues

を使用しますが、サーバーへの入力ファイルをアップロードし、それを保存し、持っているような実際のアップロードを意味しますかjavascriptは保存された画像にバックグラウンドを設定します。または、divファイルの背景として入力ファイルをそのまま使用しますか？ –

https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL –

投稿する前に著者が自分の問題について調査したとは思わない –

私の事例えばファイルの入力にidとのonchangeアクションを追加してみてください入力からファイルを読み込み、その後のdivの背景として適用し、FileReader.readAsDataURL()

function previewFile() { 
 
    var preview = document.querySelector('#myBackground'), 
 
     file = document.querySelector('input[type=file]').files[0], 
 
     reader = new FileReader(); 
 

 
    reader.addEventListener("load", function() { 
 
    preview.style.backgroundImage = 'url(' + reader.result + ')'; 
 
    }, false); 
 

 
    if (file) { 
 
    reader.readAsDataURL(file); 
 
    } 
 
}

#myBackground{ 
 
    width: 150px; 
 
    height:150px; 
 
    background-size: cover 
 
}

<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
     <input type="file" onchange="previewFile()"/> 
 
     <div id="myBackground"></div> 
 
    </body> 
 
</html>

出典

2016-05-18 07:02:58

function readURL(input) { 
 

 
    if (input.files && input.files[0]) { 
 
     var reader = new FileReader(); 
 

 
     reader.onload = function (e) { 
 
      $('#myBackground img').attr('src', e.target.result); 
 
     } 
 

 
     reader.readAsDataURL(input.files[0]); 
 
    } 
 
} 
 

 
$("#imgUpload").change(function(){ 
 
    readURL(this); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
<input type="file" id="imgUpload"> 
 
    <div id="myBackground"> 
 
    <img src="#" alt="your image" /> 
 
    </div> 
 
</body> 
 
</html>

出典

2016-05-18 06:38:53

この

function input_image_changefunction(){ 
         var e; 
         var oFReader = new FileReader(); 
         oFReader.readAsDataURL(document.getElementById("full_image").files[0]); 

      oFReader.onloadend = function() { 


     // Do what you want to to with the image here 
      } 
       oFReader.onload = function (oFREvent) { 

     //some other action eg load the image to the background 
     document.getElementById("myBackground").src = oFREvent.target.result; 
    }; 


}

は、あなたが意味

<input type="file" id="full_image" onchange="input_image_changefunction()" name="full_image" class="ssb" required="required" accept='image/*'>

出典

2016-05-18 06:54:21

JavaScriptで画像をアップロードして使用するには？

答えて

関連する問題